목록기술 학습/JavaScript (12)
현인
클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 프로토타입 기반 객체지향 언어다. 비록 다른 객체지향 언어와의 차이점에 대한 논쟁이 있긴 하지만 자바스크립트는 강력한 객체지향 프로그래밍 능력을 지니고 있다. ES6에서 도입된 클래스는 기존 프로토타입 기반 객체 지향 프로그래밍보다 클래스 기반 객체지향 프로그래밍에 익숙한 프로그래머가 더욱 빠르게 학습할 수 있도록 클래스 기반 객체지향 프로그래밍 언어와 매우 흡사한 새로운 객체 생성 메커니즘을 제시한다. 그렇다고 ES6의 클래스가 기존의 프로토타입 기반 객체지향 모델을 폐지하고 새롭게 클래스 기반 객체지향 모델을 제공하는 것은 아니다. 사실 클래스는 함수이며 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕이라고 볼..
클로저는 자바스크립트 고유의 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. 클로저는 자바스크립트 고유의 개념이 아니므로 클로저의 정의가 ECMAScript 사양에 등장하지 않는다. MDN에서는 클로저에 대해 다음과 같이 정의하고 있다. 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 렉시컬 스코프 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의 했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프라 한다. 스코프의 실체는 실행 컨텍스트의 렉시컬 환경이다. 렉시컬 환경은 자신의 외부 렉시컬 환경에 대한 참조를 통해 상위 렉시컬 환경과 연결된다. 이것이 바로 스코프 체인이다. 정리하면, 렉시컬 환경의 “외부 렉시컬..
실행 컨텍스트는 자바스크립의 동작 원리를 담고 있는 핵심 개념이다. 실행 컨텍스트를 바르게 이해하면 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저의 동작 방식, 그리고 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있다. 소스코드의 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다. 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다. 소스코드의 타입 설명 전역 코드 전역에 존재하는 소스코드. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함 X 함수 코드 함수 내부에 존재하는 소스코드. 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함 X eval 코드 빌트인 전역 함수인 ev..
this 키워드 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드로 이루어져 있다. 메서드는 자신이 속한 객체의 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드는 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다. 객체 리터럴은 circle 변수에 할당되기 직전에 평가된다. 따라서 메서드가 호출되는 시점에는 이미 객체 리터럴의 평가가 완료되어 객체가 생성되었고 식별자에 생성된 객체가 할당된 이후다. 따라서 메서드 내부에서 재귀 참조가 가능하다 하지만 재귀 참조 방식은 일반적이지 않으며 바람직하지 않다. 생성자 ..
자바스크립트는 멀티 패러다임 프로그래밍 언어이다. 명령형 함수형 프로토타입 기반 객체지향 프로그래밍 클래스 기반 객체지향 프로그래밍 언어 C++, Java 등 프로토타입 기반 객체지향 프로그래밍 클래스 기반 객체지향 프로그래밍 언어보다 효율적이며 더 강력하다. 자바스크립트는 객체 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는 거의 모든 것이 객체다. 원시 타입의 값을 제외한 나머지 값들은 모두 객체이다. 객체지향 프로그래밍 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임 실제 세상의 실체를 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작. 실체는 특징이나 성질을 나타내는 속성을 가지고 있고, ..
내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. ECMAScript 사양에 등장하는 이중 대괄호로 감싼 이름들이 내부 슬롯과 내부 메서드다. 개발자가 직접 접근할 수 있는 공개된 프로퍼티는 아니다. 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있다 [[Prototype]]이라는 내부 슬롯을 __proto__를 통해 간접적으로 접근할 수 있다. 자바스크립트 엔진의 내부 로직 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본 값으로 자동 정의한다. 프로퍼티 어트리뷰트는 내부 슬롯에..
var 키워드로 선언한 변수의 문제점 var 키워드로 선언된 변수는 다음과 같은 특징이 있다. 1. 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언이 가능하다. 초기화문이 있는 경우 var 키워드가 없는 것처럼 동작 초기화문이 없는 경우 무시된다 에러 발생 X 동일한 이름의 변수가 이미 선언되어 있는 것을 모르고, 변수를 중복 선언하면서 값까지 할당했다면 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 발생한다. 2. 함수 레벨 스코프 var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다. 예를 들어 반복문이나 조건문 같은 코드 블록 내에서 선언했을 때 함수 레..
8장 제어문 제어문은 조건에 따라 코드 블록을 실행하거나 반복 실행 할 때 사용한다. 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다. 블록문 블록문은 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부르기도 한다. 자바스크립트는 블록문을 하나의 실행 단위로 취급한다. 블록문은 단독으로 사용할 수도 있으나 일반적으로는 제어문이나 함수를 정의할 때 사용한다. 문의 끝에는 세미콜론을 붙이는 것이 일반적이다. 다만, 블록문은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않는다. // 블록문 { var foo = 1; } // 제어문 var x = 1; if (x < 10) { x++; } 조건문 조건문은 주어진 조건식의 평가 결과..
6장 데이터 타입 데이터 타입은 값의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 가지며 ES6 기준 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 원시 타입과 객체 타입으로 분류할 수 있다. 구분 데이터 타입 설명 원시 타입 숫자(number) 타입 숫자. 정수와 실수 구분 없이 하나의 숫자 타입만 존재 문자열(string) 타입 문자열 불리언(boolean) 타입 논리적 참(true)과 거짓(false) undefined 타입 var 키워드로 선언된 변수에 암묵적으로 할당되는 값 null 타입 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 심벌(symbol) 타입 ES6에서 추가된 7번째 타입 객체 타입 객체, 함수, 배열 등 타입에 따라 확보해야할 메모리 공간의 크기도 다르고..
개념을 이해한다는 것은 바로 용어를 정확히 이해하고 설명할 수 있다는 것이다. 이 책에 등장하는 대부분의 용어는 자바스크립트만의 전유물이 아닌 컴퓨터 공학 전반에서 사용하는 용어이다. 용어에 대해 정확히 이해하고 개발자 간의 의사소통 능력을 향상할 수 있도록 하자! 5장 표현식과 문 값 값(value)은 식(표현식, expression)이 평가(evaluate)되어 생성된 결과를 말한다. 평가란 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다. 10+20 이라는 식은 평가 되어 숫자 값 30을 생성한다. 모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트의 나열로 저장된다. 메모리의 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공..