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

4.1 변수란 무엇인 가? 왜 필요한가? 변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 값의 위치를 가리키는상징적인 이름이다. > 변수에 여러 개의 값을 저장하는 방법 변수는 하

5.1 값 값은 표현식이 평가되어 생성된 결과를 말한다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간이다. 따라서 변수에 할당되는 것은 값이다. 5.2 리터럴 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다. 위

자바스크립트(ES6)는 7개의 데이터 타입 1을 제공한다. 7개의 데이터 타입은 원시 타입(primitive type)과 객체 타입(object/reference type)으로 분류할 수 있다. 6.1 숫자타입 자바스크립트는 하나의 숫자 타입만이 존재한다. 6.2 문

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자operand라 한다. 피연산자는 값으로 평가될 수 있는 표현식이어야 한다. 7.1 산술 연산자 산술 연산자는 피연산자를 대

제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복실행(반복문)할 때 사용한다. 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다.블록문block statement/compound statement은 0개 이상의 문을 중괄호로 묶은 것으로, 코드

자바스크립트의 모든 값은 타입이 있다. 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다.개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅 이라고 한다.개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에

원시 타입은 단 하나의 값만 나타내지만 객체 타입object/reference type은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조data structure다. 또한 원시 타입의 값, 즉 원시 값은 변경 불가능한 값immuta

원시 타입primitive type의 값, 즉 원시 값은 변경 불가능한 값immutable value이다. 다시 말해, 한번 생성된 원시 값은 읽기 전용read only 값으로서 변경할 수 없다.변경 불가능하다는 것은 변수가 아니라 값에 대한 진술이다원시 값은 변경 불

함수는 자바스크립트에서 가장 중요한 핵심 개념이다. 또 다른 자바스크립트의 핵심 개념인 스코프, 실행 컨텍스트, 클로저, 생성자 함수에 의한 객체 생성, 메서드, this, 프로토타입, 모듈화 등이 모두 함수와 깊은 관련이 있다.프로그래밍 언어의 함수는 일련의 과정을

스코프(유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다.var 키워드로 선언한 변수와 let 또는 const키워드로 선언한 변수의 스코프도 다르게 동작한다.함수의 매개변수는 함수 몸체 내부에서만 참조할 수 있고 함수 몸체 외부에서는

변수는 선언에 의해 생성되고 할당을 통해 값을 갖는다. 변수는 자신이 선언된 위치에서 생성되고 소멸한다. 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다.하지만 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다.지역 변수 x는

var 키워드로 선언된 변수는 다음과 같은 특징이 있다. 이는 다른 언어와는 구별되는 독특한 특징으로, 주의를 기울이지 않으면 심각한 문제를 발생시킬 수 있다.var 키워드로 선언한 변수는 중복 선언이 가능하다. 다음 예제를 살펴보자.var 키워드로 선언한 변수는 오로

16.1 내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사 용하는 의사 프로퍼티pseudo property와 의사 메서드pseudo method다. ECMAScript 사양에 등장하는

객체를 생성하는 방법에는 크게 두가지가 있다객체 리터럴 : let obj = {};생성자 함수 : let obj = new Object();new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다.생성자 함수constructor란 new 연

다음과 같은 조건을 만족하는 객체를 일급 객체라 한다. 1\. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 2\. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 3\. 함수의 매개변수에 전달할 수 있다. 4\. 함수의 반환값으로 사용할 수

위 예제를 실행하면 결과는 10이 출력된다.x = 10 코드를 만나면 자바스크립트 엔진은 foo함수 스코프에서 x식별자를 검색한다.foo함수 스코프에 없으면 스코프 체인을 통해 상위 스코프에서 x 변수를 검색한다. 즉, 전역 스코프에서 검색하는데, 전역 스코프에 없으면

자바스크립트 객체는 다음과 같이 크게 3개의 객체로 분류할 수 있다.표준 빌트인 객체standard built-in objects/native objects/global objects : 표준 빌트인 객체는 ECMAScipt 사양에 정의된 객체를 말하ㅕ, 애플리케이션

객체는 상태state를 나타내는 프로퍼티와 동작behavior을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다.동작을 나타내는 메서드는 자신이 속한 객체의 상태,즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼

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

자바스크립트는 명령형imperative, 함수형functional, 프로토타입 기반prototype-based 객체지향 프로그래밍OOP; Object Ori-ented Programming을 지원하는 멀티 패러다임 프로그래밍 언어다. 자바스크립트는 객체 기반의 프로그래

클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.outerFunc 함수 내부에서 중첩 함수 innerFunc가 정의되고 호출되었다. 이때 중첩 함수 innerFunc의 상위 스코프는 외부 함수 outerFunc의 스코프다. 따라서 중첩 함수 innerFunc

자바스크립트는 프로토타입 기반 객체지향 언어다ES5에서는 클래스 없이도 다음과 같이 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다.클래스는 생성자 함수와 매우 유사하게 동작하지만 다음과 같이 몇 가지 차이가 있다.클래스를 new 연산자 없이 호

배열은 여러 개의 값을 순차적으로 나열한 자료구조다.배열의 요소는 배욜에서 자신의 위치를 나타내는 0 이상의 정수인 인덱스를 갖는다.배열은 요소의 개수, 즉 배열의 길이를 나타내는 length 프로퍼티를 갖는다.자바스크립트에 배열이라는 타입은 존재하지 않는다. 배열은

Number 객체는 생성자 함수 객체다.따라서 new 연산자와 함께 호출하여 Number 인스턴스를 생성할 수 있다.Number.MAX_VALUE는 자바스크립트에서 표현할 수 있는 가장 큰 양수 값이다.Number.MAX_VALUE보다 큰 숫자는 infinity다.Nu

표준 빌트인 객체인 Math는 수학적인 상수와 함수를 위한 프로퍼티와 메서드를 제공한다.Math는 생성자 함수가아니다. 따라서 Math는 정적 프로퍼티와 정적 메서드만 제공한다.원주율 PI 값을 반환한다.Math.abs메서드는 인수로 전달된 숫자의 절대값을 반환한다.절

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

이터리에션 프로토콜은 순회 가능한 데이터 컬레션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다.ES6 이전의 순회 가능한 데이터 컬렌션, 즉 배열, 문자열, 유사 배열 객체, DOM 컬렉션 등은 통일된 규약 없이 각자 나름의구조를 가

26.1 함수의 구분 자바스크립트의 함수는 일반적인 함수로서 호출 가능 new 연산자와 함께 호출하여 인스턴스를 생성할 수 있는 생성할 수 잇는 생성자 함수로서 호출 가능 객체에 바인딩되어 메서드로서 호출 가능 ES6 이전의 모든 함수는 일반 함수로서 호출할 수

ES6에서 도입된 스프레드 문법(전개문법은) ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서(전개, 분산하여, spread)개별적인 값들의 목록으로 만든다.스프레드 문법의 결과는 변수에 할당할 수 없다.이처럼 스프레드 문법의 결과물은 값으로 사용할 수 없고, 다음

디스트럭처링 할당(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.ES5에서 구조화

set 객체는 중복되지 않는 유일한 값들의 집합이다.set 객체는 배열과 유사하지만 다음과 같은 차이가 있다.set객체는 set생성자 함수로 생성한다.set생성자 함수에 인수를 전달하지 않으면 빈 set객체가 생성된다.set생성자 함수는 이터러블을 인수로 전달받아 se

브라우저가 HTML, CSS, JS로 작성된 텍스트 문서를 어떻게 파싱하여 브라우저에 렌더링하는지 살펴보자. >+ 파싱(parsing) : 파싱은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고,

DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API즉 프로퍼티와 메서드를 제공하는 트리 자료구조다.HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다.HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드

브라우저는 처리해야 할 특정 사건(ex. 클릭, 키보드 입력, 마우스 이동)이 발생하면 이를 감지하여 이벤트를 발생시킨다.만약 애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려

함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다.이를 호출 스케줄링텍스트이라 한다.타이머 생성 함수 : setTimout, setInterval타이머 제거 함수 : clearTimeout, clearI

함수 실행 과정함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다.이때 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(콜 스택)에 푸시되고 함수 코드가 실행된다.함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거된다.

Ajax(Asynchronous JavaScript And XML)란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 수신하는 프로그래밍 방식이다.Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동

HTTP의 장점을 최대한 활용할 수 있는 아키텍처로서 REST가 소개되었고, 이는 HTTP 프로토콜을 의도에 맞게 디자인하도록 유도하고 있다.REST의 기본 원칙을 성실히 지킨 서비스 디자인을 RESTful 이라고 표현한다.즉, REST는 HTTP를 기반으로 클라이언트

자바스크립트에서는 비동기 처리를 하기 위한 하나의 패턴으로 콜백 함수를 사용한다.그러나 콜백 패턴은 다음과 같은 단점이 있다.콜백 헬로 인해 가독성 나쁨에러 처리가 곤란함여러 개의 비동기 처리를 한 번에 처리하는 데 한계가 있음따라서 ES6에서는 비동기 처리를 위한 또

제너레이터를 사용해 비동기 처리를 동기 처리처럼 동작하도록 구현했지만 코드가 장황해지고 가독성도 나쁘다.ES8에서는 제너레이터보다 간단하고 가독성 좋게 비동기 처리를 동기 처리처럼 동작하도록 구현할 수 있는 async/await가 도입되었다.async/await는 프로

에러는 언제나 발생할 수 있다. 발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다.이를 막기 위해 try...catch 문을 사용해 발생한 에러에 적절하게 대응하면 프로그램이 강제 종료되지 않고 계속해서 코드를 실행시킬 수 있다.직접적인 에러를 발생하

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

크롬, 사파리, 파이어 폭스 같은 에버그린 브라우저의 ES6 지원율은 약 98%로 거의 대부분의 ES6 사양을 지원한다.하지만 IE 11의 ES6 지원율은 약 11%다.그리고 매년 새롭게 도입되는 ES6 이상의 버전과 제안 단계에 있는 ES 제안 사양은 브라우저에 따라