[자바스크립트] 모던 자바스크립트 Deep Dive

Node.js는 비동기 I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작함으로써 요청 처리 성능이 좋다. 따라서 Node.js는 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 SPA에 적합하다. 하지만 CPU 사용률이 높은 애플리케이션에는 권장하지

자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행할 수 있다. 한 가지 다른 점은 브라우저와 node.js 모두 자바스크립트 코어인 ECMAScript를 실행할 수 있지만 브라우저와 Node.js에서 ECMASCript 이외에 추가로 제공하는 기능은 호환되

변수를 선언할 때는 var, let, const 키워드를 사용한다. ES6에서 let, const 키워드가 도입되기 이전까지 var 키워드는 자바스크립트에서 변수를 선언할 수 있는 유일한 키워드였다. ES5 vs ES6아직 살펴보지 않았지만 var 키워드는 여러 단점이

값은 식(표현식)이 평가되어 생성된 결과를 말한다.리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다.표현식은 값으로 평가될 수 있는 문이다. 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다.문(stateme

자바스클비트(ES6)는 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 원시 탕비과 객체 타입으로 분류할 수 있다.자바스크립트는 독특하게 하나의 숫자 타입만 존재한다. ECMAScript 사양에 따르면 숫자 타입의 값은 배정밀도 64비트 부동소수점 형식을 따른다.

숫자 타입이 아닌 피연산자에 + 단항 연산자를 사용하면 피연산자를 숫자 타입으로 변환하여 반환한다. 이때 피연산자를 변경하는 것은 아니고 숫자 타입으로 변환한 값을 생성해서 반환한다.\- 단항 연산자는 피연산자의 부호를 반전한 값을 반환한다. + 단항 연산자와 마찬가지

문의 끝에는 세미콜론을 붙이는 것이 일반적이다. 하지만 블록문은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않는다는 것에 주의하기 바란다.

자바스크립트 엔진은 산술 연산자 표현식을 평가하기 위해 산술 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다. 이때 피연산자를 숫자 타입으로 변환할 수 없는 경우에는 산술 연산을 수행할 수 없으므로 표현식의 평가 결과는 NaN이

자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 "모든 것"이 객체다. 원시 타입은 단 하나의 값만 나타내지만 객체 타입은 다양하 타입의 값(운시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조다. 또한 원시 타입의 값, 즉

원시 타입과 객체 타입은 크게 세 가지 측면에서 다르다.원시 타입의 값, 즉 원시 값은 변경 불가능한 값이다. 이에 비해 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값이다.원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 이에 비해 객

자바스크립트의 함수는 객체 타입의 값이다. 따라서 숫자 값을 숫자 리터럴로 생성하고 객체를 객체 리터럴로 생성하는 것처럼 함수도 함수 리터럴로 생성할 수 있다. 함수 리터럴은 function 키워드, 함수 이름, 매개 변수 목록, 함수 몸체로 구성된다.리터럴은 사람이

스코프(유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다. 우리는 이미 스코프를 경험했다. 함수의 매개변수는 함수 몸체내부에서만 참조할 수 있고 함수 몸체 외부에서는 참조할 수 없다고 했다. 이것은 매개변수를 참조할 수 있는 유효범위,

4.4절에서 보았듯이 변수 선언은 선언문이 어디에 있든 상관 없이 가장 먼저 실행된다. 다시 말해 변수 선언은 코드가 한 줄씩 순차적으로 실행되는 시점인 런타임에 실행되는 것이 아니라 런타임 이전 단계에서 자바스크립트 엔진에 의해 실행된다.그런데 엄밀히 말하자면 위 설

ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다. var 키워드로 선언된 변수는 다음과 같은 특징이 있다. 위 예제의 var 키워드로 선언한 x 변수와 y 변수는 중복 선언되었다. 이처럼 var 키워드로 선언한 변수를 중복 선언하면 초

내부 슬롯과 내부 메서드는 자브스크렙트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 사용하는 의사 프로퍼티와 의사 메서드다. ECMAScript 사양에 등장하는 이중 대괄호로 감싼 이름들이 내부 슬롯과 내부 메서드다.내부 슬롯과 내부 메서

객체를 생성하는 방법은 객체 리터럴을 사용하는 것이 더 간편하다. Object 생성자 함수를 사용해 객체 생성하는 것은 유용해 보이지 않는다.프로퍼티 구조가 동일함에도 매번 같은 프로퍼티와 메서드를 기술해야 한다.생성자 함수에 의한 객체 생성 방식은 마치 객체(인스턴스

다음 조건을 만족하는 객체를 일급 객체라 한다.무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다변수나 자료구조객체, 배열 등)에 저장할 수 있다.함수의 매개변수에 전달할 수 있다.함수의 반환값으로 사용할 수 있다.자바스크립트의 함수는 다음 예제와 같이 위

자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다.객체지향 프로그래밍은 프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의

s

동작을 나타내는 키워드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다.생성자 함수 내부에서는 프로퍼티 또는 메서드를

실행 컨텍스트는 자바스크립트 동작 원리를 담고 있는 핵심 개념이다. 실행 컨텍스트를 바르게 이해하면 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저의 동작 방식, 그리고 태스크 큐와 함께 동작하는 이벤트

클로저는 자바스크립트 고유의 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. outer 함수 내부에서 중첩 함수 innerFunc가 정의되고 호출되었다. 이때 중첩 함수 innerFunc의 상위 스코프는 외부 함수 o

프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 프로그래밍 언어다. ES5에서는 클래스 없이도 다음과 같이 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다.ES6에서 도입된 클래스는 기존 프로토타입 기반 객체지향 프로그래밍보다 자바나

ES6이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다. 즉, callable이면서 constructor 이다.주의할 것은 ES6 이전에 일반적으로 메서드라고 부르던 객체에 바인딩된 함수도 callble이며 constructo

자바스크립트 배열은 일반적인 자료 구조와 달리, 메모리 공간이 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져 있지 않을 수도 있다. 배열의 요소가 연속적으로 이어져 있지 않는 배열을 희소 배열이라고 한다. 자바스크립트의 배열은 일반적인 배열의 동작을 흉내낸 특수한

심벌은 ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 심벌 값은 다른 값과 중복되지 않는 유일무이한 값이다. 따라서 주로 이름의 충돌 위험이 없는 유일무이한 프로퍼티 키를 만들기 위해 사용한다.심벌 값은 Symbol 함수를 호출해서 생성해

Es6 이전의 순회 가능한 데이터 컬렉션, 즉 배열, 문자열, 유사 배열 객체, DOM 컬렉션 등은 통일된 규약 없이 각자 나름의 구조를 가지고 for, for...in, forEach등 다양한 방법으로 순회할 수 있었다.ES6에서는 이터러블로 통일하여 for...of

ES6에 도입된 스프레드 문법 ...은 하나로 뭉쳐 있는 여러 값들을 펼쳐서 개별적인 값들의 목록으로 만든다.스프레드 문법 사용 대상은 이터러블에 한정된다.스프레드 문법의 결과는 값이 아니다. 따라서 스프레드 문법의 결과는 변숭 할당할 수 없다.아래 문맥에서 사용 가능

디스트럭처링 할당은 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스다.이때 변수를 배열 리터럴 형태로 선언한다.변

Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체 생성. Set 객체는 이터러블이다. 따라서 for ... of 문으로 순회 가능하고, 스프레드 문법과 배열 디스트럭처링 대상이 될 수 있다.Map 함수는 이터러블을 인수로 받아 map 객체 생성. 인수로 전달

브라우저는 다음과 같은 과정을 거쳐 렌더링을 수행한다. 브라우저는 HTML/CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다.브라우저의 렌더링 과정은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSO

함수가 실행되려면 "함수 코드 평가 과정"에서 생성된 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되어야 한다. 다시 말해, 실행 컨텍스트 스택에 함수 실행 컨텍스트가 푸시되는 것은 함수 실행의 시작을 의미한다. 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수

자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다.ES6에서는 비동기 처리를 위

ES6에서 도입된 제너레이터는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수다. 제너레이터와 일반 함수의 차이는 다음과 같다.제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.일반 함수를 호출하면 제어권이 함수에게

에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다.

모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. 이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다.자신만의 파일 스코프를 갖는 모듈의 자