JavaScript에서 심볼(Symbol)은 ES6에서 추가된 7번째 데이터 타입이다.심볼(Symbol) 타입은 JavaScript에서 고유하고 불변하는 값을 생성하는 데 사용된다.심볼은 주로 객체의 속성 키로 활용되어 속성 이름 충돌을 방지하거나, 특정 기능을 구현하는 데 사용된다. 특징원시 타입 (primitive data type): Boolean, null, undefined, Number, String과 같은 원시 타입에 속한다.변경 불가능한 값: 심볼 값은 한 번 생성되면 변경할 수 없다.유일성: 심볼은 생성될 때마다 고유한 값으로 만들어진다. 같은 설명(description)을 가진 심볼도 서로 다른 값으로 취급된다.생성 방법심볼은 Symbol() 함수를 호출하여 생성한다.const mySy..

JavaScript에서 비동기 처리는 웹 개발에서 필수적인 개념이다. 비동기 처리를 효과적으로 관리하기 위한 다양한 방법들이 존재하며, 그중 대표적인 것이 콜백(callbacks), 프로미스(Promises), async/await이다.콜백 함수 (Callbacks)콜백 함수는 프로그래밍에서 다른 함수에 인자로 전달되는 함수이다. 이 함수는 특정 이벤트가 발생하거나 특정 작업이 완료된 후 "나중에 호출"된다. 콜백 함수의 핵심은 웹 API에 작업을 전달하고, 해당 작업이 완료되었을 때 특정 함수(콜백 함수)를 실행하여 결과를 처리하는 것이다. 이 과정을 이벤트 루프라고 한다.이 과정에서 2가지 핵심 요소를 만족하게 된다.비동기 처리웹 API 호출, 파일 읽기, 타이머 설정 등 시간이 걸리는 작업은 비동기..

ES6 클래스는 ECMAScript 2015(ES6)에서 도입된 새로운 객체 지향 프로그래밍 문법이다. 기존의 프로토타입 기반 상속보다 클래스 기반 언어와 유사한 문법을 제공하여 개발자들이 객체 지향 프로그래밍을 더욱 쉽게 사용하도록 돕는다.class는 기본적으로 프로토타입 기반 상속이다.class 문법은 자바스크립트의 프로토타입 기반 상속을 더욱 쉽게 사용할 수 있도록 "문법적 설탕(syntactic sugar)"을 제공하는 것이지 상속을 받는 전혀 다른 방식이 아니다.문법적 설탕(syntactic sugar)?프로그래밍 언어에서 기존에 존재하는 기능을 더 쉽고 간결하게 사용할 수 있도록 제공하는 문법을 의미한다.자바 스크립트에선화살표 함수 (Arrow functions)구조 분해 할당 (Destruc..

다형성(Polymorphism)은 객체 지향 프로그래밍(OOP)의 핵심 개념 중 하나로, '여러 형태를 가질 수 있는 능력'을 의미한다. 즉, 하나의 인터페이스나 메서드가 다양한 형태의 객체를 처리할 수 있는 능력을 말한다. 핵심 개념하나의 인터페이스, 다양한 구현:다형성을 통해 동일한 이름의 메서드가 객체의 타입에 따라 다르게 동작할 수 있다.예를 들어, '소리 내기'라는 메서드가 동물 객체에서는 '멍멍', 고양이 객체에서는 '야옹'으로 다르게 구현될 수 있다.유연성과 확장성:다형성은 코드의 유연성을 높여주고 새로운 타입의 객체가 추가되더라도 기존 코드를 수정하지 않고 확장할 수 있게 해준다.이는 코드의 재사용성을 높이고 유지 보수를 용이하게 한다.다형성의 종류오버로딩(Overloading):같은 이름..

객체 지향 프로그래밍(Object-Oriented Programming, OOP) 은 프로그래밍의 한 패러다임(paradigm)이다. 즉 지배적인 사상, 접근 방식, 철학이라고 볼 수 있다. 이런 패러다임은 크게 2가지로 나뉘는데 흔히들 말하는 절차 지향 프로그래밍(Procedural Programming)과 객체 지향 프로그래밍(Object-Oriented Programming, OOP)이다. 그렇다면 객체 지향이란 결국엔 무엇인가?기본적으로 프로그램은 코드 1줄, 1줄로 만들어진다. 그렇지 않은 프로그램은 존재하지 않는다고 볼 수 있다.그런데 객체 지향은 그런 코드를 1줄, 1줄 단위가 아닌 객체라는 덩어리 단위로 관리하는 것을 선호한다는 것이다. 그렇다면 객체란 결국 무언인가?핵심 개념객체 (Obj..

'얕은 비교(shallow comparison)'와 '깊은 비교(deep comparison)'는 프로그래밍에서 두 값(특히 객체나 배열과 같은 복잡한 자료형)이 같은지 비교하는 방식의 차이를 나타낸다.1. 얕은 비교 (Shallow Comparison)정의: 두 값의 메모리 주소를 비교한다.동작 방식:원시 자료형(숫자, 문자열, 불리언 등)의 경우, 실제 값을 비교한다.객체나 배열과 같은 참조 자료형의 경우, 메모리 주소(참조)가 같은지 비교한다. 즉, 두 변수가 같은 객체를 가리키는지 확인한다.특징:비교 속도가 빠르다.객체나 배열의 내부 값은 비교하지 않는다.두 객체의 내부 값이 같더라도 메모리 주소가 다르면 다르다고 판단한다.사용 예시: JavaScript에서 '===' 연산자나 Object.is(..

내부 함수가 외부 함수의 변수 환경(스코프)을 기억하고, 외부 함수가 종료된 후에도 해당 변수를 사용할 수 있도록 한 기능이다. closure라는 단어에서 처럼 폐쇄 환경에 대한 개념이다.기본적으로 함수는 외부의 변수를 받아서 실행되지만 함수 내부에 또다른 함수를 정의하는 경우가 있다.이런 함수를 중첩 함수(nested function)라고 하는데 구조는 대강 다음과 같다.function outerFunction(x) { function innerFunction(y) { }}이렇게 내부 함수 입장에선 외부 함수의 스코프{}로 인해서 폐쇄된 환경이 되기 때문에 클로저라 부른다. 뭐 그렇다고 저런 모양 자체를 클로저라고 하는 것은 아니고 클로저란 저런 폐쇄 환경에서 내부 함수에 사용되는 기능에 대한 정의..

이벤트 루프는 자바스크립트와 같은 단일 스레드 환경에서 비동기 작업을 효율적으로 처리하기 위한 핵심 메커니즘이다. 쉽게 말해, 마치 교통 정리와 같이 작업들이 순서대로 처리될 수 있도록 관리하는 역할을 한다. 동기 vs 비동기동기와 비동기를 나누는 핵심 기준은 '작업의 완료와 대기'이다. 동기는 특정 작업이 있다면 무조건 순서대로 진행한다. 작업 A와 B가 있다면 무조건 작업 A가 완료되야 작업 B를 진행한다. A가 오래걸리거나 아예 작업이 멈춰있어도 B를 진행할 수 없다. A가 완료 될때까지 무조건 기다린다.하지만비동기는 작업 A의 완료를 기다리지 않고 작업 B를 진행할 수 있다. 작업 A가 오래걸리든 멈춰있든, 아주 빠르든 아무런 관계 없이 작업 B를 진행할 수 있다. 때문에 동기는 파일을 다운로드 ..

자바스크립트 이벤트 위임(Event Delegation)은 하위 요소들에 각각 이벤트 핸들러를 할당하는 대신, 상위 요소에 하나의 이벤트 핸들러를 할당하여 하위 요소들의 이벤트를 처리하는 방식이다. 예를 들어 매니저와 직원들이 있는 식당이 있다면 기존에는 직원들이 각각 주문을 받고 서빙까지 했다면 이제는 매니저가 주문을 받고 직원들에게 서빙을 지시하는 상황이라고 할 수 있다. 이벤트 위임의 개념상위 요소에서 하위 요소의 이벤트를 처리각 요소에 개별적인 이벤트 핸들러를 할당하는 대신, 상위 요소에 하나의 이벤트 핸들러를 할당하여 하위 요소의 이벤트를 처리한다.이벤트 버블링 활용이벤트 위임은 이벤트 버블링 현상을 이용하여 상위 요소에서 하위 요소의 이벤트를 감지하고 처리한다.2. 이벤트 위임의 작동 방식상위..

이벤트 버블링은 웹 개발에서 이벤트가 발생하는 방식 중 하나이다. 특정 요소에서 이벤트가 발생했을 때, 그 이벤트가 해당 요소의 상위 요소들로 차례대로 전달되는 현상을 말한다. 마치 물방울이 아래에서 위로 올라가는 모습과 비슷하다고 하여 '버블링(bubbling)'이라는 이름이 붙었다.이벤트 버블링의 작동 방식이벤트 발생: 가장 안쪽 요소에서 이벤트가 발생한다. 예를 들어, 버튼을 클릭하면 버튼 요소에서 클릭 이벤트가 발생한다.이벤트 전파: 발생한 이벤트는 해당 요소의 부모 요소로 전달됩니다. 부모 요소에도 동일한 이벤트에 대한 이벤트 핸들러가 있다면 실행됩니다.핸들러 있음: 핸들러를 실행하고 다음 상위 요소로 이벤트를 전달합니다.들러 없음: 아무런 반응 없이 다음 상위 요소로 이벤트를 전달합니다.상위 ..