모던 자바스크립트 Deep Dive

프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션.이때 요구되는 것은 문제 해결 능력이다.문제(요구사항)을 명확히 이해 -> 복잡함을 단순하게 분해 -> 자료를 정리하고 구분 -> 순서에 맞게 행위를 배열즉, 프로그래밍이란 0과 1밖에 모르는 기계가 실행할

1995년, 넷스케이프 커뮤니케이션즈는 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결정그래서 탄생한 것이 브렌던 아이크가 개발한 자바스트립트이다.1996년 3월 자바스크립트는 넷스케이프 내비게이터2에 탑재되었고 "모

모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크린트 엔진을 내장하고 있다.브라우저 뿐만 아니라 Node.js도 자바스크립트 엔진을 내장하고 있다.따라서, 자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행할 수 있다.한가지 주의 점은 브라우저

변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다.프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어들여 재사용하기 위해 변수라는 메커니즘 제공한다.즉, 변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체

값(value)은 식(표현식 expression)이 평가(evaluate)되어 생성된 결과를 말한다. 평가란, 식을 해석해서 값을 생성하거나 참조하는 것을 의미.모든 값은 \- 데이터 타입을 가지며, \- 메모리에 2진수, 즉 비트(bit)의 나열로 저장된다.

데이터 차입은 값의 종류자바스크립트(ES6)는 7개의 데이터 타입을 제공하고 원시타입, 객체타입으로 분류한다.C나 자바의 경우 정수, 실수를 구분하여 int,long,float,double 등 다양한 숫자 타입 제공자바스크립트는 하나의 숫자 타입만 존재한다.모든 수를

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다.연산의 대상을 피연산자이라고 하며, 값으로 평가될 수 있는 표현식이다.피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식

제어문은 조건에 따라 코드블럭을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다.코드는 위에서 아래로 순차적으로 실행한다.제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있는데, 직관적인 코드의 흐름을 혼란스럽게 만들어서 코드의 가독성을 해치는 단점이

자바스크립트의 모든 값은 타입이 있다.개발자가 의도적으로 값의 타입을 변환하는 것을 아래와 같이 부른다.명시적 타입 변환(explicit coercion) 또는타입 캐스팅 (type casting)개발자 의도와는 상관없이 표현식 평가 도중 자바스크립트 엔진에 의해 암묵

자바스트립트는 객체 기반의 프로그래밍 언어이며, 자바스트립트를 구성하는 거의 "모든 것"이 객체이다. (원시 값 제외)0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 key, value로 구성된다.자바스크립트에서 사용할수 있는 모든 값은 프로퍼티 값이 될 수 있기

자바스크립트가 제공하는 7가지 데이터 타입은 크게 원시 타입과 객체 타입으로 구분할 수 있다.원시 타입과 객체 타입은 크게 세가지 측면에서 다르다.원시 타입의 값, 즉 원시 값은 변경 불가능한 값이다.(한번 생성된 원시 값은 읽기 전용, 데이터의 신뢰성 보장)여기서 원

프로그래밍 언어의 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.입력을 받아서 출력을 내보낸다. 이때,함수 내부로 입력을 전달받는 변수를 매개 변수입력을 인수출력을 반환값이라 한다.함수는 함수 정의를 통해 생성하고인수를 매

스코프(유효범위)는 자바스크립트를 포함한 모든 프로그래민 언어의 기본적이며 중요한 개념이다.자바스크립트의 스코프는 다른언어의 스코프와 구별되는 특징이 있다. var로 선언한 변수와 let, const 로 선언한 변수의 스코프도 다르게 동작한다.코드 문맥과 환경"코드가

전역변수의 무분별한 사용은 위험하다.전역 변수를 반드시 사용해야 할 이유를 찾치 못한다면 지역 변수를 사용해야한다.변수는 선언에 의해 생성되고 할당을 통해 값을 갖고 소멸되는 생명주기(life cycle)가 있다.함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되

스코프는 "(ㅤㅤㅤㅤㅤㅤㅤ)"이라고 표현하는 것이 적절하다.변수의 생명 주기는 메모리 공간이 (ㅤㅤㅤ)된 시점부터 메모리 공간이 (ㅤㅤㅤ)되어 가용 메모리 풀(memory pool)에 (ㅤㅤㅤ)되는 시점까지다.4️⃣는 \[]표기법은 따옴표 지정(책에서는 에러로 나오는데

var 키워드로 선언된 변수는 다음과 같은 특징이 있고, 주의를 기울이지 않으면 심각한 문제를 발생시킬 수 있다.var 키워드로 선언한 변수는 중복 선언이 가능하다.초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작하고,초기화문이

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

다양한 객체 생성 방식 중에서 생성자 함수를 사용하여 객체를 생성하는 방식을 살펴본다.그리고 객체 리터럴을 사용하여 객체를 생성하는 방식과 생성자 함수를 사용하여 객체를 생성하는 방식과의 장단점을 알아본다.new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객

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

자바스크립트는 명령형, 함수형, 프로토타입 기반, 객체지행 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다.클래스(class)E6S에서 클래스가 도입되었지만 새로운 객체지향 모델을 제공하는 것은 아니고 기존 프로토타입 기반 패턴의 문법적 설탕(syntactic

1️⃣. 생성자 함수는 객체를 생성하기 위한 템플릿(클래스)으로 동작하여, 인스턴스를 생성하고 초기화하는 역할을 한다.ㅤ2️⃣. 객체 리터럴에 의한 객체 생성 방식은 여러 개의 동일한 프로퍼티를 가진 객체를 효율적으로 생성할 수 있어 생성자 함수에 비해 유용하다.ㅤ3️

아래 예제를 봤을 때 전역 스코프에도 x변수의 선언이 존재하지 않기 때문에 referenceError를 발생시킬 것 같지만자바스크립트 엔진은 암묵적으로 전역 객체에 x프로퍼티를 동적 생성한다.이때 전역 객체의 x 프로퍼티는 마치 전역변수처럼 사용할 수 있다. 이러한 현

자바스크립트 객체는 다음과 같이 크게 3개의 객체로 분류할 수 있다.표준 빌트인 객체표준 빌트인 객체는 ECMAScript 사양에 정의된 객체이므로 자바스크립트 실행 환경(브라우저나 node.js)과 관계없이 언제나 사용할 수 있다.표준 빌트인 객체는 전역 객체의 프로

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

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

클로저(closure)는 난해하기로 유명한 자바스크립트의 개념 중 하나이지만, 자바스크립트 고유의 개념은 아니다.함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(예) 하스켈, 리스프, 얼랭, 스칼라 등)에서 사용하는 중요한 특성이다.클로저가 자바스크립트 고유의 개념

ES6에서 도입된 클래스는 클래스 기반 객체지향 프로그래밍언어와 매우 흡사한 새로운 객체 생성 메커니즘을 제시한다.그렇다고 클래스가 기존 프로토타입 기반 객체지향 모델을 폐지하고 새롭게 클래스 기반 객체 지향 모델을 제공하는 것은 아니다.클래스는 함수이며 기존 프로토타

ES6 이전까지는 자바스크립트의 함수는 별다른 구분 없이 다양한 목적으로 사용되었다.자바스크립트의 함수는 일반적인 함수로서 호출할 수도 있고,new 연산자와 함께 호출하여 인스턴스를 생성할 수 있는 생성자 함수로서 호출할 수도 있으며,객체에 바인딩되어 메서드로서 호출할

배열은 여러 개의 값을 순차적으로 나열한 구조다. 배열은 사용 빈도가 매우 높은 가장 기본적인 자료구조다.배열이 가지고 있는 값을 요소(element)라고 부른다. 자바스크립트의 모든 값은 배열의 요소가 될 수 있다.배열의 요소는 배열에서 자신의 위치를 나타내는 0 이

function 키워드를 생략한 메서드 축약표현을 사용한다.ㅤ객체 리터럴과는 다르게 클래스에 메서드를 정의할 때는 콤마가 필요하다.ㅤ암묵적으로 strict mode로 실행된다.ㅤfor ... in 문이나 Object.keys 메서드 등으로 열거할 수 없다. 즉, 프로퍼

표준 빌트인 객체인 Number는 원시 타입인 숫자를 다룰 때 유용한 프로퍼티와 메서드를 제공한다.표준 빌트인 객체인 Number 객체는 생성자 함수 객체다. 따라서 new 연산자와 함께 호출하여 Number 인스턴스를 생성할 수 있다.Number 생성자 함수에 인수를

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

표준 빌트인 객체인 Data는 날짜와 시간을 위한 메서드를 제공하는 빌트인 객체이면서 생성자 함수다.UTC(협정 세계시)는 국제 표준시를 말하며 기술적인 표기에는 UTC가 사용된다.KST(한국 표준시)는 UTC에 9시간을 더한 시간이다. 즉 KST는 UTC보다 9시간

정규 표현식(regular expression)은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어다.문자열을 대상으로 패턴 매칭기능을 제공한다. 패턴 매칭 기능이랑 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다.

표준 빌트인 객체인 String은 원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메서드를 제공한다.표준 빌트인 객체인 String 객체는 생성자 함수 객체다. 따라서 new 연산자와 함께 호출하여 String 인스턴스를 생성할 수 있다.String 생성자 함수에 인수

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

ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다.이터레이션 프로토콜에는 이터러블 프로토콜과 이터레이터 프로토콜이 있다.Well-known Symbol 인 Symbol.i

ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다.이터레이션 프로토콜에는 이터러블 프로토콜과 이터레이터 프로토콜이 있다.Well-known Symbol 인 Symbol.i

ES6에서 도입된 스프레드 문법(전개 문법) ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록을 만든다.사용할 수 있는 대상은 for...of 문으로 순회할 수 있는 이터러블에 한정된다.스프레드 문법 ...이 연산자가 아니기 때문에 변수에 할당

디스트럭처링 할당(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다.이때 배열 디스트럭

Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다.이러한 Set 객체 특성은 수학적 집합의 특성과 일치한다. Set은 수학적 집합을 구현하기 위한 자료구조다. 따라서 Set을 통해 교집합, 합집합, 차집합,

1️⃣ Math.roundㅤ2️⃣ Math.sqrtㅤ3️⃣ Math.floorㅤ4️⃣ Math.ceilㅤ5️⃣ Math.pow1️⃣ ... 내의 ^은 문자열의 시작을 의미한다.ㅤ2️⃣ &는 문자열의 마지막을 의미한다.ㅤ3️⃣ /A+|B+/g 와 /+AB/g 는 동일하다

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

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