브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 파싱하는 과정을 살펴보자. 파싱 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영해 트리 구조의 파스트리를 생성하는 과정이다. 파싱이 완료된 이후에는 그 파스 트리를 기반으로 중간언어인 바이트코드를 생성하고 실행한다. 렌더링 HTML, CSS, 자바스크립트로 작성된 문서를 파싱해 브라우저에 시각적으로 출력하는 것이다. 브라우저는 다음과 같은 과정을 거쳐 렌더링을 수행한다. 브라우저는 HTML, CSS, 자바스크립트, 이미지 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답받음 브라우저에 탑재된 렌더링 엔진은 서버로부터 응답받은 HTML과 CSS 를 파싱해 DOM과 CSSOM 을 생성하고 이를 결합해 렌더트리 생성함 ..

Map 객체는 키와 값의 쌍으로 이루어진 컬렉션이다. 설명만 들었을 때는 객체와 유사하지만, Map 객체의 키로 사용할 수 있는 값은 객체를 포함한 모든 값이고, Map 객체는 이터러블 객체라는 차이점이 있다. Map 객체 생성 const map = new Map(); console.log(map); // Map(0) {} const map1 = new Map([['key1', 'value1'], ['key2', 'value2']]); console.log(map1); // Map(2) {"key1" => "value1", "key2" => "value2"} const map2 = new Map([1, 2]); // TypeError Map 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성한다..

Set Set 객체는 중복되지 않는 유일한 값들의 집합니다. Set 객체는 요소 순서에 의미가 없고, 인덱스로 요소에 접근할 수 없다. Set의 특성은 수학적 집합의 특성과 일치한다. Set을 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있다. Set 객체의 생성 Set 생성자 함수로 생성하며, 인수를 전달하지 않으면 빈 Set 객체가 생성된다. const set = new Set(); console.log(set); // Set(0) {} const set1 = new Set([1, 2, 3, 4]); console.log(set1); // Set(3) {1, 2, 3} const set2 = new Set('hello'); console.log(set2); // Set(4) {"h", "e..

디스트럭처링 할당(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring하여 1개 이상의 변수에 개별적으로 할당하는 것이다. 배열 디스트럭처링 할당 const arr = [1, 2, 3]; const [one, two, three] = arr; console.log(one, two, three); // 1 2 3 const [x, y] = [1, 2]; 배열 디스트럭처링 할당의 기준은 배열의 인덱스다. 이때 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다. const [a, b] = [1, 2]; console.log(a, b); // 1 2 const [c, d] = [1]; console.log(c, d); // 1 undefined const [e, ..