클래스 ES6에서 도입된 Class는 자바나 C#과 같은 클래스 기반 객체지향 프로그래밍에 익숙한 프로그래머가 더 빠르게 학습할 수 있도록 클래스 기반 객체지향 프로그램이 언어와 매우 흡사한 새로운 객체 생성 메커니즘을 제시한다. 클래스는 쉽게 말해서 객체를 만들기 위한 설계도이고 인스턴스는 이 설계도를 바탕으로 만들어진 실제 객체라고 볼 수 있다. 클래스와 생성자 함수 모두 프로토타입 기반의 인스턴스를 생성하지만 정확히 동일하게 동작하지는 않는다. 클래스 VS 생성자 함수 차이점 클래스 생성자 함수 new 연산자 new 연산자 없이 호출하면 에러가 발생한다. new 연산자 없이 호출하면 일반 함수로서 호출된다. 상속 상속을 지원하는 extends와 super 키워드를 제공한다. 지원하지 않는다. 호이스..

클로저는 난해하기로 유명한 자바스크립트의 개념 중 하나이다. 그러나 클로저는 자바스크립트 고유의 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(하스켈, 리스프, 스칼라 등)에서 사용하는 중요한 특성이다. MDN에서는 클로저에 대해 다음과 같이 정의하고 있다. Closure “A closure is the combination of a function and the lexical environment within which that function was declared” 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 위 정의에서 먼저 이해해야할 핵심 키워드는 “함수가 선언된 렉시컬 환경 (Lexcial Environment)" 이다. const x = 1; functi..

ES8에서 제네레이터 (Generator)보다 간단하고 가독성 좋게 비동기 처리를 동기 처리처럼 동작하도록 구현할 수 있는 async / await가 도입되었다. async / await 는 프로미스를 기반으로 동작한다. async 함수 await 키워드는 반드시 async 함수 내부에서 사용해야 한다. async 함수는 async 키워드를 사용해 정의하며 언제나 프로미스를 반환한다. async 함수가 명시적으로 프로미스를 반환하지 않더라도 암묵적으로 반환값을 resolve 하는 프로미스를 반환한다. // async 함수 선언문 async function foo(n) { return n; } foo(1).then(v => console.log(v)); // 1 // async 함수 표현식 const ba..

제네레이터란? ES6에서 도입된 제네레이터는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수다. 제네레이터와 일반 함수의 차이는 다음과 같다. 제네레이터는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다. 일반 함수를 호출하면 제어권이 함수에게 넘어가고 함수 코드를 일괄 실행한다. 제네레이터 함수는 함수 실행을 함수 호출자가 제어할 수 있다. 제네레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다. 일반 함수는 함수가 실행되고 있는 동안에는 함수 외부에서 내부로 값을 전달하여 함수의 상태를 변경할 수 없다. 제네레이터 함수는 함수 호출자와 양방향으로 함수의 상태를 주고받을 수 있다. 제네레이터 함수를 호출하면 제네레이터 객체를 반환한다. 제네레이터 함수를 호출..

ES6에서 비동기 처리를 위한 패턴으로 프로미스(Promise)를 도입했다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다. 비동기 처리를 위한 콜백 패턴의 단점 Callback Hell 비동기 함수는 비동기 처리 결과를 외부에 반환할 수 없고, 상위 스코프의 변수에 할당할 수도 없다. 따라서 비동기 함수의 처리 결과(서버의 응답 등)에 대한 후속 처리는 비동기 함수 내부에서 수행해야 한다. 이때 후속 처리를 수행하는 콜백 함수를 전달하는 것이 일반적이다. 콜백 함수를 통해 비동기 처리 결과를 처리해야 한다면 콜백 함수가 호출이 중첩되어 복잡도가 높아지는 현상이 발생한다. 이를 콜백 헬(Callback Hell)이라 한다. setTimeout( func..

this 키워드 동작을 나타나내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. const circle = { radius: 5, getDiameter() { return 2 * circle.radius; } } 위 예제에서 getDiameter 메서드가 호출되는 시점에는 이미 객체 리터럴의 평가가 완료되어 객체가 생성되었고 circle 식별자에 객체가 할당된 이후다. 따라서 메서드 내부에서 circle 식별자를 참조할 수 있다. 하지만 자기 자신이 속한 객체를 재귀적으로 참조하는 방식은 일반적이지 않으며 바람직하지도 않다. 따라서 자신이 속한 객체 ..