코딩을 쉽게 해보자

1. 함수의 구분 ES6 이전까지 JS 함수는 별다른 구분 없이 다양한 목적으로 사용되었다. 이는 언뜻 보면 편리한 것 같지만 실수를 유발시킬 수 있으며 성능 면에서도 손해다. var foo = function () { return 1; }; // 일반적인 함수로서 호출 foo(); // 1 // 생성자 함수로서 호출 new foo(); // foo {} // 메서드로서 호출 var obj = { foo: foo }; obj.foo(); // 1 ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다. ES6 이전의 모든 함수는 callable이면서 constructor이다. ES6 이전의 모든 함수는 사용 목적에 따라 명확한 구분이 없으므로 호출 방식에 특별..

1. 클래스는 프로토타입의 문법적 설탕인가? JS는 프로토타입 기반 객체지향 언어다. 프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 프로그래밍 언어다. ES5에서는 클래스 없이도 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다. ES6에서 도입된 클래스와 생성자 함수는 모두 프로토타입 기반의 인스턴스를 생성하지만 정확히 동일하게 동작 X 1. 클래스를 new 연산자 없이 호출하면 에러, BUT 생성자 함수를 new 연산자 없이 호출하면 일반 함수로서 호출 2. 클래스는 extends와 super 키워드 제공 3. 클래스는 호이스팅이 발생하지 않는 것처럼 동작 BUT 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이, 함수 표현식으로 정의한 생성자 함수는 변수 호이..

클로저는 JS의 고유의 개념 X 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성 클로저는 JS의 고유의 개념이 아니므로 클로저의 정의가 ECMAScript 사양에 등장하지 않는다. MDN에서는 클로저에 대해 다음과 같이 정의한다. A closure is the combination of a function and the lexical environment within which that function was declared 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. const x = 1; function outerFunc() { const x = 10; function innerFunc() { console.log(x); // 10 } innerFunc()..

실행 컨텍스트(execution context)는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다. 실행 컨텍스트를 이해하면 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값(식별자 바인딩)을 관리하는 방식 호이스팅이 발생하는 이유 클로저와 동작 방식 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식 을 이해할 수 있다. 1. 소스코드의 타입 ECMAScript 사양은 소스코드(ECMAScript code)를 4가지 타입으로 구분한다. 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다. 소스코드의 타입 설명 전역 코드(global code) 전역에 존재하는 소스코드를 말한다. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다. 함수 코드(function co..