van_lan.log

[모딥다] 38장. 브라우저의 렌더링 과정

Mon, 02 Mar 2026 23:43:29 GMT

38장. 브라우저의 렌더링 과정

파싱(Parsing) 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열 -> 토큰으로 분해 -> 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성. 일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어인 바이트코드를 생성하고 실행

렌더링(Rendering) HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 의미

📁 브라우저 렌더링 과정

브라우저는 HTML, CSS, JS, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로 부터 응답을 받음.
브라우저의 렌더링 엔진은 서버로 부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성.
브라우저의 JS엔진은 서버로 부터 응답된 JS를 파싱하여 AST를 생성하고 바이트코드로 변환하여 실행. 이때 JS는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있음. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합됨.
렌터 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 HTML 요소를 페인팅.

📁 요청과 응답

브라우저의 핵심 기능은 필요한 리소스를 서버에 요청하고 서버로 부터 응답 받아 브라우저에 시각적으로 렌더링 하는 것임.
서버에 요청을 전송하기 위해 브라우저는 주소창을 제공.
브라우저 주소창에 URL 입력 -> URL 호스트이름이 DNS를 통해 IP 주소로 변환 -> 해당 IP 주소를 갖는 서버에 요청을 전송.

📁 HTTP/1.1과 HTTP/2.0

HTTP/1.1은 기본적으로 커넥션당 하나의 요청과 응답만 처리.
여러개의 요청을 한 번에 전송할 수 없고 응답 또한 마찬가지 임.
link 태크, img 태그, script 태그 등에 의한 리소스 요청이 개별적으로 전송되고 응답 또한 개별적으로 전송됨.
이처럼 HTTP/1.1은 리소스의 동시 전송이 불가능한 구조이므로 요청할 리소스의 개수에 비례하여 응답 시간도 증가하는 단점이 존재.
HTTP/2는 커넥션당 여러개의 요청과 응답, 즉 다중 요청/응답이 가능.
HTTP/1.1에 비해 페이지 로드 속도가 약 50% 정도 빠르다고 알려져 있음.

📁 HTML 파싱과 DOM 생성

브라우저의 요청에 의해 서버가 응답한 HTML 문서는 문자열로 이루어진 순수한 텍스트임.
이를 시각적인 픽셀로 렌더링하려면 HTML 문서를 브라우저가 이해할 수 있는 자료구조(객체)로 변환하여 메모리에 저장해야 함.
브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성.
DOM 생성 과정

HTML 문서가 브라우저 요청에 의해 서버로 부터 응답됨. 서버는 브라우저가 요청한 HTML 파일을 읽어 들여 메모리에 저장한 다음 메모리에 저장된 바이트(2진수)를 인터넷을 경유하여 응답
브라우저는 HTML 문서를 바이트(2진수) 형태로 응답 받음. 이를 meta 태그의 charset 어트리뷰트에 지정된 인토딩 방식(ex: UTF-8)을 기준으로 문자열로 변환.
문자열로 변환된 HTML 문서를 읽어 들여 문법적 의미를 갖는 코드의 최소 단위인 토큰들로 분해.
각 토큰을 객체로 변환하여 노드를 생성. 토큰의 내용에 따라 문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드 등이 생성됨. ( DOM을 구성하는 기본 요소들이 됨 )
HTML 요소는 중첩 관계를 갖는데, 이를 반영하여 트리 자료구조로 구성. 이를 DOM이라 부름.

📁 CSS 파싱과 CSSOM 생성

렌더링 엔진은 HTML을 처음부터 한 줄씩 순차적으로 파싱하며 DOM을 생성하게 되는데, 이때에 CSS를 로드하는 link 태그나 style 태그를 만나면 파싱을 일시 중단함.
이어서 link 태그의 href 어트리뷰트에 지정된 CSS파이을 서버에 요청하여 응답된 CSS파일이나 style 태그 내의 CSS를 HTML과 동일한 파싱 과정(바이트 -> 문자 -> 토큰 -> 노드 -> CSSOM)을 거치며 해석하여 CSSOM을 생성.
이후 CSS 파싱을 완료하면 일시 중단지점으로 돌아가 HTML 파싱을 이어나감.

📁 렌더 트리 생성

렌더링 엔진은 응답된 HTML과 CSS를 파싱하여 각각 DOM과 CSSOM을 생성.
렌더링을 위해 두 트리구조를 결합하여 렌더 트리를 생성.
렌더 트리는 브라우저 화면에 렌더링 되는 노드만으로 구성됨.
이 렌더 트리는 각 HTML 요소의 레이아웃(위치와 크기)를 계산하는 데 사용되며 브라우저 화면에 픽셀을 렌더링하는 페이팅 처리에 입력됨.
이 브라우저 렌더링 과정은 반복되서 실행 됨.
- JS에 의한 노드 추가 또는 삭제 시.
- 브라우저 창의 리사징ㅇ에 의한 뷰포트 크기 변화.
- HTML 요소의 레이아웃(위치, 크기)에 변경을 발생시키는 width/height, margin, padding, border, display, position, top/right/bottom/left 등의 스타일 변경.
레이아웃 계산과 페인팅을 다시 실행하는 리렌더링은 비용이 많이드는 작업이므로 가급적 리렌더링이 빈번하게 발생하지 않도록 주의할 필요가 있음.

📁 자바스크립트 파싱과 실행

DOM은 HTML 문서의 구조와 정보뿐만 아니라 HTML 요소와 스타일 등을 변경할 수 있는 프로그래밍 인터페이스로서 DOM API를 제공.
이를 통해 JS코드에서 이미 생성된 DOM을 동적으로 조작이 가능.
CSS 파싱 과정과 마찬가지로 렌더링 엔진은 HTML을 순차적으로 한 줄씩 파싱하며 DOM을 생성해 나가다가 JS파일을 로드하는 script 태그나 JS 코드를 컨텐츠로 담은 script 태그를 만나면 DOM 생성을 일시 중단함.
JS 코드를 파싱하기 위해 JS엔진에 제어권을 넘겨준 후 이후 JS 파싱과 실행이 종료되면 렌더링 엔진으로 다시 제어권을 넘겨 HTML 파싱이 중단된 지점 부터 다시 HTML 파싱을 시작하여 DOM 생성을 재개함.

JS엔진의 파싱과 실행 과정

자바스크립트 소스 코드 -> 토크나이징 -> 토큰 -> 파싱 -> AST -> 바이트 코드 생성 -> 바이트 코드 -> 실행
🔹토크나이징
단순히 문자열인 JS 소스코드를 어휘 분석하여 문법적 의미를 갖는 코드의 최소 단위인 토큰들로 분해.
🔹파싱
토큰들의 집합을 구문 분석하여 AST(추상적 구문 트리)를 생성.
AST는 토큰에 문법적 의미와 구저를 반영한 트리 구조의 자료구조임. (AST는 인터프리터나 컴파일러만 사용하는 것이 아니고, 이를 활용해 Typescript, Babel, Prettier 같은 트랜스파일러를 구현하기도 함)
🔹바이트코드 생성과 실행
생성된 AST는 인터프리터가 실행할 수 있는 중간 코드인 바이트코드로 변환되고 인터프리터에 의해 실행됨.

📁 리플로우와 리페인트

JS코드에 DOM이나 CSSOM을 변경하는 DOM API가 사용된 경우 DOM이나 CSSOM이 변경되며 이는 다시 렌더트리로 결합되고 변경된 렌더 트리를 기반으로 레이아웃과 페인트 과정을 거쳐 브라우저의 화면에 다시 렌더링 됨.
이를 리플로우, 리페인트 라고 함.
1. 리플로우
레아이아웃 계산을 다시하는 과정을 말함.
노드 추가/삭제, 요소의 크기/위치 변경, 윈도우 리사이징 등 레이아웃에 영향을 주는 변경이 발생한 경우에 한하여 실행됨.
2. 리페인트
재결합된 렌더 트리를 기반으로 다시 페인트 하는 것을 말함.
레이아웃에 영향이 없는 변경은 리플로우 없이 리페인트만 실행 됨.

📁 script 태그의 async/defer 어트리뷰트

JS 파싱에 의한 DOM 생성 중단이 되는 문제를 근본적으로 해결하기 위해 async와 deffer 어트리뷰트가 추가됨.
src 어트리뷰트를 통해 외부 JS파일을 로드하는 경우에만 사용 가능. ( 인라인 스크립트에는 사용 X )
사용하게 되면 JS파일의 로드가 비동기적으로 동시에 진행됨.
1. async 어트리뷰트
HTML 파싱과 외부 JS파일의 로드가 비동기적으로 동시에 진행됨.
단, JS 파싱과 실행은 JS파일의 로드가 완료된 직후에 진행되며, 이때 HTML 파싱이 중단됨.
script 태그의 순서와는 상관없이 JS파일의 로드가 완료된 JS부터 먼저 실행되므로 실행 순서가 보장되지 않음.
실행 순서 보장이 필요한 script 태그에는 async 어트리뷰트를 지정하지 않아야 함.
2. defer 어트리뷰트
동일하게 HTML 파싱과 JS파일로드가 비동기적으로 동시에 진행됨.
단, JS의 파싱과 실행은 HTML 파싱이 모두 완료된 직후(DOM 생성 완료 직후)에 진행됨.
DOM 생성이 완료된 이후 실행되어야 할 JS에 유용함.

[모딥다] 37장. Set과 Map

Mon, 02 Mar 2026 22:42:06 GMT

37장. Set과 Map

📁 Set

Set 객체는 중복되지 않은 유일한 값들을 집합.
배열과 차이점:
- 중복 값 X.
- 요소 순서의 의미 X.
- 인덱스로 요소에 접근 X.
수학적 집합의 특성과 일치. ( 교집합, 차집합, 여집합 등 구현 가능 )

1. Set 객체의 생성
Set 생성자 함수로 생성. ( 인수 전달 X -> 빈 Set 객체 생성 )
```
const set = new Set();
console.log(set);  // Set(0) {}
```

Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성. ( 이때 중복된 값은 Set 객체에 요소로 저장 X )

const set1 = new Set([1, 2, 3, 3]);
console.log(set1);  // Set(3) {1, 2, 3}

const set2 = new Set('string');
console.log(set2);  // Set(6) {"s", "t", "r", "i", "n", "g"}

배열의 중복 요소 제거시 사용 가능.

const uniq = array => [...new Set(array)];
console.log(uniq[2, 1, 2, 3, 4, 3, 4]);  // [2, 1, 3, 4]

2. 요소 개수 확인

요소 개수를 확인할 때는 Set.prototype.size 프로퍼티를 사용.
```
const { size } = new Set([1, 2, 3, 3]);
console.log(size);
```
size 프로퍼티는 setter 함수 없이 getter 함수만 존재하는 접근자 프로퍼티이므로 직접적으로 요소 개수를 변경 불가.

3. 요소 추가

요소 추가시에는 Set.prototype.add 메서드를 사용.

const set = new Set();
console.log(set);  // Set(0) {}

set.add(1);
console.log(set);  // Set(1) {1}

add 메서드는 새로운 요소가 추가된 Set 객체를 반환. ( 연속적 호출 가능 )
```
const set = new Set();

set.add(1).add(2);
console.log(set);  // Set(2) {1, 2}
```

객체나 배열과 같이 JS의 모든 값을 요소로 저장 가능.

const set = new Set();

set
  .add(1)
  .add('a')
  .add(true)
  .add(undefined)
  .add(null)
  .add({})
  .add([])
  .add(() => {});

console.log(set);  // Set(8) {1, "a", true, undefined, null, {}, [], () => {}}

4. 요소 존재 여부 확인

특정 요소 존재확인은 Set.prototype.has 메서드를 사용. ( 요소 존재 여부를 나타내는 불리언 값을 반환 )
```
const set = new Set([1, 2, 3]);

console.log(set.has(2));  // true
console.log(set.has(4));  // false
```
5. 요소 삭제
특정 요소 삭제시 Set.prototype.delete 메서드를 사용. ( 삭제 성공여부를 나타내는 불리언 값 반환 )

인수로 삭제하려는 요소값을 전달.

const set = new Set([1, 2, 3]);

// 요소 2를 삭제
set.delete(2);
console.log(set);  // Set(2) {1, 3}

// 요소 1을 삭제
set.delete(1);
console.log(set);  // Set(1) {3}

// 존재하지 않는 요소 삭제시 에러없이 무시
set.delete(0);
console.log(set);  // Set(1) {3}

6. 요소 일괄 삭제

모든 요소 일괄 삭제시 Set.prototype.clear 메서드를 사용. ( undefined를 반환 )
```
const set = new Set([1, 2, 3]);

set.clear();
console.log(set);  // Set(0) {}
```
7. 요소 순회
Set 객체의 요소를 순회하려면 Set.prototype.forEach 메서드를 사용.
인수 설명:
- 1: 현재 순회 중인 요소값
- 2: 현재 순회 중인 요소값
- 3: 현재 순회 중인 Set 객체 자체
첫 번째 인수와 두번째 인수는 같은 값이며, 이는 Array.prototype.forEach 메서드와 인터페이스를 통일하기 위함일 뿐 다른 의미는 없음.
Set 객체는 이터러블 이므로, for ...of 문으로 순회가 가능하며, 스프레드 문법과 배열 구조분해의 대상이 될 수 있음.
Set 객체는 요소의 순서에 의미를 갖지 않지만, 순회시에는 요소가 추가된 순서를 따름.

8. 집합 연산
Set 객체는 수학적 집합을 구현하기 위한 자료구조 임. ( 교집합, 합집합, 차집합 등을 구현 가능 )

🔹교집합
```
Set.prototype.intersection = function (set) {
return new Set([...this].filter(v => set.has(v)));
};
```

const setA = new Set([1, 2, 3, 4]); const setB = new Set([2, 4]);

console.log(setA.intersection(setB)); // Set(2) {2, 4} console.log(setB.intersection(setA)); // Set(2) {2, 4}

#### 🔹합집합
```js
Set.prototype.union = function (set) {
  return new Set([...this, ...set]);
};

const setA = new Set([1, 2, 3, 4]);
const setB = new Set([2, 4]);

// SetA와 setB의 합집합
console.log(setA.union(setB));  // Set(4) {1, 2, 3, 4}
console.log(setB.union(setA));  // Set(4) {2, 4, 1, 3}

🔹차집합

Set.prototype.difference = function (set) {
  return new Set([...this].filter(v => !set.has(v)));
}

const setA = new Set([1, 2, 3, 4]);
const setB = new Set([2, 4]);

// setA에 대한 setB의 차집합
console.log(setA.difference(setB));  // Set(2) {1, 3}
// setB에 대한 setA의 차집합
console.log(setB.difference(setA));  // Set(0) {}

🔹부분 집합과 상위 집합

// this가 subset의 상위 집합인지 확인
Set.prototype.inSuperset = function (subset) {
  const supersetArr = [...this];
  return [...subset].every(v => supersetArr.includes(v));
};

const setA = new Set([1, 2, 3, 4]);
const setB = new Set([2, 4]);

// setA가 setB의 상위 집합인지 확인
console.log(setA.isSuperset);  // true
// setB가 setA의 상위 집합인지 확인
console.log(setB.isSuperset);  // false

📁 Map

키와 값의 쌍으로 이루어진 컬렉션.
객체와의 차이점:
- 키로 객체를 포함한 모든 값을 사용 가능.
- 이터러블 임.
- 요소 개수 확인시 Map.prototype.size 사용.
  1. Map 객체의 생성
Map 생성자 함수로 생성. ( 인수 전달 X -> 빈 Map 객체 생성 )
```
const map = new Map();
console.log(map);  // Map(0) {}
```

이터러블을 인수로 전달받아 Map 객체를 생성. ( 이때 이터러블은 키와 값의 쌍으로 이루어진 요소로 구성되어야 함 )

const map1 = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(map1);  // Map(2) {"key1" => "value1", "key2" => "value2"}

const map2 = new Map([1, 2]);  // TypeError: Iterator value 1 is not an entry object

전달된 이터러블에 중복된 키를 갖는 요소가 있으면, 값이 덮어써짐. ( 중복된 키를 갖는 요소 X )
```
const map = new Map([['key1', 'value1'], ['key1', 'value2']]);
console.log(map);  // Map(1) {"key1" => "value2"}
```
2. 요소 개수 확인

요소 개수 확인시 Map.prototype.size 프로퍼티를 사용.

const { size } = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(size);  // 2

3. 요소 추가

요소 추가시 Map.prototype.set 메서드를 사용.

마찬가지로 새로운 요소가 추가된 Map 객체를 반환함. ( 연속적으로 호출 가능 )

const map = new Map();
console.log(map);  // Map(0) {}

map.set('key1', 'value1');
console.log(map);  // Map(1) {"key1" => "value1"}

map
  .set('key2', 'value2')
  .set('key3', 'value3');

console.log(map);  // Map(3) {"key1" => "value1", "key2" => "value2", "key3" => "value3"}

중복된 키를 갖는 요소가 존재할 수 없기 때문에 중복된 키를 갖는 요소를 추가하면 값이 덮어 써짐. ( 에러 발생 X )
```
const map = new Map();

map
  .set('key1', 'value1')
  .set('key2', 'value2');

console.log(map);  // Map(1) {"key1" => "value2"}
```

Map 객체는 키 타입에 제한이 없으므로 객체를 포함한 모든 값을 키로 사용할 수 있음.

const map = new Map();

const lee = { name: 'Lee' };
const kim = { name: 'Kim' };

// 객체도 키로 사용 가능
map
  .set(lee, 'developer')
  .set(kim, 'designer');

console.log(map);  // Map(2) { {name: "Lee"} => "developer", {name: "Kim"} => "designer" }

4. 요소 취득

특정 요소를 취득하기 위해 Map.prototype.get 메서드를 사용.

인수로 키를 전달하면 전달한 키가 갖는 값을 반환. ( 존재하지 않을 시 undefined 반환 )

const map = new Map();

const lee = { name: 'Lee' };
const kim = { name: 'Kim' };

// 객체도 키로 사용 가능
map
  .set(lee, 'developer')
  .set(kim, 'designer');

console.log(map.get(lee));  // developer
console.log(map.get('key'));  // undefined

5. 요소 존재 여부 확인

특정 요소가 존재하는지 확인하려면 Map.prototype.has 메서드를 사용. ( 특정 요소의 존재 여부를 나타낸는 불리언 값을 반환 )

const lee = { name: 'Lee' };
const kim = { name: 'Kim' };

const map = new Map([[lee, 'developer'], [kim, 'designer']]);

console.log(map.has(lee));  // true
console.log(map.has('key'));  // false

6. 요소 삭제

객체의 요소를 삭제하려면 Map.prototype.delete 메서드를 사용. ( 삭제 성공 여부를 나타내는 불리언 값을 반환 )
존재하지 않는 키로 Map 요소를 삭제하려면 에러 없이 무시됨.

불리언 값을 반환하므로 연속적으로 호출은 불가.

const lee = { name: 'Lee' };
const kim = { name: 'Kim' };

const map = new Map([[lee, 'developer'], [kim, 'designer']]);

map.delete(kim);
console.log(map);  // Map(1) { { name: "Lee" } => "developer" }

7. 요소 일괄 삭제

요소 일괄 삭제시 Map.prototype.clear 메서드를 사용. ( 언제나 undefined를 반환 )

const lee = { name: 'Lee' };
const kim = { name: 'Kim' };

const map = new Map([[lee, 'developer'], [kim, 'designer']]);

map.clear();
console.log(map);  // Map(0) {}

8. 요소 순횐

요소 순회시 Map.prototype.forEach 메서드를 사용.
인수 설명:
- 1: 현재 순회 중인 요소값
- 2: 현재 순회 중인 요소키
- 3: 현재 순회 중인 Map 객체 자체
Map 객체는 이터러블이므로, for ...of 문으로 순회가 가능하며, 스프레드 문법과 배열 구조분해 할당의 대상이 될 수 있음.
Map객체는 이터러블이면서 동시에 이터레이터인 객체를 반환하는 메서드를 제공.
- Map.prototype.keys: Map 객체에서 요소키를 값으로 갖는 이터러블이면서 동시에 이터레이터인 객체를 반환.
- Map.prototype.values: Map 객체에서 요소값을 값으로 갖는 이터러블이면서 동시에 이터레이터인 객체를 반환.
- Map.prototype.entries: Map 객체에서 요소키와 요소값을 값으로 갖는 이터러블이면서 동시에 이터레이터인 객체를 반환.
```
const lee = { name: 'Lee' };
const kim = { name: 'Kim' };
```
const map = new Map([[lee, 'developer'], [kim, 'designer']]);

// 요소키를 값으로 갖는 이터레이터를 반환 for (const key of map.keys()) { console.log(key); // {name: "Lee"} {name: "Kim"} }

// 요소값을 값으로 갖는 이터레이터를 반환 for (const value of map.values()) { console.log(value); // developer designer }

// 요소키와 요소값을 값으로 갖는 이터레이터를 반환 for (const entry of map.entries()) { console.log(entry); // [{name: "Lee"}, "developer"] [{name: "Kim"}, "designer"] } ```
Map 객체는 요소의 순서에 의미를 갖지 않지만 순회시에는 요소가 추가된 순서를 따름.

[모딥다] 36장. 디스트럭처링 할당

Wed, 25 Feb 2026 21:53:39 GMT

36장. 디스트럭처링 할당

구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것.
배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용.

📁 배열 디스트럭처링 할당

대상은 이터러블 이어야 하며, 할당 기준은 배열의 인덱스임.

const arr = [1, 2, 3];

const [one, two, three] = arr;
console.log(one, two, three);  // 1 2 3

우변에 이터러블을 할당하지 않으면 에러 발생.

const [x, y];  // SyntaxError: Missing initializer in destructuring declaration
const [a, b] = {};  // TypeError: {} is not iterable

배열 디스트럭처링 할당의 기준은 배열 인덱스이므로, 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요 X.

const [a, b] = [1, 2];
console.log(a, b);  // 1 2

const [c, d] = [1];
console.log(c, d);  // 1 undefined

const [e, f] = [1, 2, 3];
console.log(e, f);  // 1 2

배열 디스트럭처링 할당을 위한 변수에 기본값 설정 가능.

// 기본값
const [a, b, c = 3] = [1, 2];
console.log(a, b, c);  // 1 2 3

// 기본값 보다 할당된 값이 우선
const [e, f = 10, g = 3] = [1, 2];
console.log(e, f, g);  // 1 2 3

Rest 요소 사용 가능.

// Rest 요소
const [x, ...y] = [1, 2, 3];
console.log(x, y);  // 1 [2, 3]

📁 객체 디스트럭처링 할당

대상은 객체이어야 하며, 할당 기준은 프로퍼티 키임.

const user = { firstName: 'HyounSeok', lastName: 'Kim' };

const { lastName, firstName } = user;
console.log(firstName, lastName);  // HyounSeok Kim

우변에 객체 또는 객체로 평가될 수 있는 표현식을 할당하지 않으면 에러 발생.

const { lastName, firstName };  // SyntaxError: Missing initailizer in destructuring declaration

const { lstName, firstName } = null;  // TypeError: Cannot destructure propery 'lastName' of 'null' as it is null.

객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받으려면 다음과 같이 변수를 선언.

const user = { firstName: 'HyounSeok', lastName: 'Kim' };

const { lastName: ln, firstName: fn } = user;
console.log(fn, ln);  // HyounSeok Kim

변수에 기본값 설정 가능.

const { lastName, firstName = 'HyounSeok' } = { lastName: 'Kim' };
console.log(firstName, lastName);  // HyounSeok Kim

const { lastName: ln, firstName: fn = 'HyounSeok' } = { lastName: 'Kim' };
console.log(fn, ln);  // HyounSeok Kim

중첩 객체일 경우 사용의 예:

const user = {
  name: 'Lee',
  address: {
    zipCode: '03068',
    city: 'Seoul'
  }
};

const { address: { city } } = user;
console.log(city);  // 'Seoul'

Rest 프로퍼티 사용.

const { x, ...rest } = { x: 1, y: 2, z: 3 };
console.log(x, rest);  // 1 { y: 2, z: 3 }

[모딥다] 35장. 스프레드 문법

Wed, 25 Feb 2026 21:28:42 GMT

35장. 스프레드 문법

...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서(전개, 분산, spread) 개별적인 값들의 목록으로 만듬.

사용할 수 있는 대상은 이터러블에 한정됨.

console.log(...[1, 2, 3]);  // 1 2 3
console.log(...'Hello');  // H e l l o
console.log(...new Map(['a', '1'], ['b', '2']));  // ['a', '1'] ['b', '2']
console.log(...new Set([1, 2, 3]));  // 1 2 3

// 이터러블이 아닌 일반 객체는 스프레드 문법의 대상이 될 수 없음
console.log(...{ a: 1, b: 2 });  // TypeError: Found non-callable @@iterator

스프레드 문법의 결과물은 값으로 사용할 수 없고, 다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용 가능.
- 함수 호출문의 인수 목록
- 배열 리터럴의 요소 목록
- 객체 리터럴의 프로퍼티 목록
```
// 스프레드 문법의 결과는 값이 아님
const list = ...[1, 2, 3];  // SyntaxError: Unexpected token ...
```

📁 함수 호출문의 인수목록에서 사용

배열을 펼쳐서 요소들의 목록을 함수의 인수로 전달하고 싶은경우
```
const arr = [1, 2, 3];

const max = Math.max(...arr);  // -> 3
```

Rest 파라미터와 형태가 동일하여 혼동할 수 있으나, Rest 파라미터와 스프레드 문법은 서로의 반대의 개념.

// Rest 파라미터는 인수들의 목록을 배열로 전달받음
function foo(...rest) {
  console.log(rest);  // 1, 2, 3 -> [1, 2, 3]
}

// 스프레드 문법은 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만듬
foo(..[1, 2, 3]);  // [1, 2, 3] -> 1, 2, 3

📁 배열 리터럴 내부에서 사용

1. concat

ES5에선 배열을 결합하고 싶은 경우 concat 메서드를 사용해야 했었음.

// ES5
var arr = [1, 2].concat([3, 4]);
console.log(arr);  // [1, 2, 3, 4]

// ES6
const arr = [...[1, 2], ...[3, 4]];
console.log(arr);  // [1, 2, 3, 4]

2. splice

배열의 중간에 다른 배열의 요소를 추가하거나 제거하려면 splice 메서드를 사용함. 이때 splice 메서드의 세 번째 인수로 배열을 전달하면 배열 자체가 추가됨.

// ES5
const arr1 = [1, 4];
const arr2 = [2, 3];

// 세 번째 인수 arr2를 해제하여 전달해야 함.
// 그렇지 않으면 arr1에 arr2 배열 자체가 추가됨.
arr1.splice(1, 0, ...arr2);
console.log(arr1);  // [1, 2, 3, 4]

3. 배열 복사

원본 배열의 각 요소를 얕은 복사하여 새로운 복사본 생성.

const origin = [1, 2];
const copy = [...origin];

console.log(copy);  // [1, 2]
console.log(copy === origin);  // false

4. 이터러블을 배열로 변환

이터러블을 배열로 변환.

function sum() {
  // 이터러블이면서 유사 배열 객체인 arguments를 배열로 변환
  return [...arguments].reduce((pre, cur) => pre + cur, 0);
}

console.log(sum(1, 2, 3));  // 6

이터러블이 아닌 유사 배열 객체를 배열로 변경시에는 Array.from 메서드 사용.

📁 객체 리터럴 내부에서 사용

스프레드 문법의 대상은 이터러블이어야 하지만, 스프레드 프로퍼티 제안으로 일반 객체를 대상으로도 스프레드 문법의 사용을 허용.

// 스프레드 프로퍼티
// 객체 복사(얕은 복사)
const obj = { x: 1, y: 2 };
const copy = { ...obj };
console.log(copy);  // { x: 1, y: 2 }
console.log(obj === copy);  // false

// 객체 병합
const merged = { x: 1, y: 2, ...{ a: 3, b: 4 } };
console.log(merged);  // { x: 1, y: 2, a: 3, b: 4 }

[모딥다] 34장. 이터러블

Wed, 25 Feb 2026 20:53:48 GMT

34장. 이터러블

📁 이터레이션 프로토콜

순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙.
순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for ...of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화.

1. 이터러블
Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체.

예를 들어, 배열은 Array.prototype의 Symbol.iterator 메서드를 상속받은 이터러블. 이터러블은 for ...of 문으로 순회 가능하며, 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용 가능.

const array = [1, 2, 3];

// 배열은 Array.prototype의 Symbol.iterator 메서드를 상속받는 이터러블
console.log(Symbol.iterator in array);  // true

// 이터러블인 배열은 for ...of 문으로 순회 가능
for (const item of array) {
  console.log(item);  // 1, 2, 3
}

// 이터러블인 배열은 스프레드 문법의 대상으로 사용 가능
console.log([...array]);  // [1, 2, 3]

// 이터러블인 배열은 배열 디스트럭처링 할당의 대상으로 사용 가능
const [a, ...rest] = array;
console.log(a, rest);  // 1, [2, 3]

Symbol.iterator 메서드를 직접 구현하지 않거나 상속받지 않은 일반 객체는 이터러블이 아님. ( 일반 객체는 for ...of 문으로 순회 불가, 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용 불가 )

const obj = { a: 1, b: 2 };

// 일반 객체는 이터러블이 아님
console.log(Symbol.iterator in obj);  // false

// 이터러블이 아닌 일반 객체는 for ...of 문으로 순회 불가
for (const item of obj) {
  console.log(item);
}

// 이터러블이 아닌 일반 객체는 배열 디스트럭처링 할당의 대상으로 사용 불가
const [a, b] = obj;  // TypeError: obj is not iterable

단, 일반 객체의 스프레드 문법의 사용은 허용됨.

const obj = { a: 1, b: 2 };

// 객체 리터럴 내부에서 스프레드 문법의 사용을 허용
console.log({ ...obj });  // { a: 1, b: 2 }

2. 이터레이터

이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환.

이터러블의 Symbol.iterator 메서드가 반환한 이터레이터는 next 메서드를 갖음.

const array = [1, 2, 3];

// Symbol.iterator 메서드는 이터레이터를 반환
const iterator = array[Symbol.iterator]();

// Symbol.iterator 메서드가 반환한 이터레이터는 next 메서드를 갖음
console.log('next' in iterator);  // true

이터레이터의 next 메서드는 이터러블의 각 요소를 순회하기 위한 포인터의 역할. ( next 메서드 호출 -> 이터레이터 리절트 객체 반환 )

const array = [1, 2, 3];

const iterator = array[Symbol.iterator]();

// next 메서드를 호출하면 이터러블을 순회하며 순회 결과를 나타내는 이터레이터 리절트 객체를 반환
// 이터레이터 리절트 객체는 value와 done 프로퍼티를 갖는 객체
console.log(iterator.next());  // { value: 1, done: false }
console.log(iterator.next());  // { value: 2, done: false }
console.log(iterator.next());  // { value: 3, done: false }
console.log(iterator.next());  // { value: undefined, done: true }

next 메서드가 반환하는 이터레이터 리절트 객체의 value 프로퍼티는 현재 순회 중인 이터러블의 값, done 프로퍼티는 이터러블의 순회 완료 여부.

📁 빌트인 이터러블

JS는 이터레이션 프로토콜을 준수한 객체인 빌트인 이터러블을 제공.
Array, String, Map, Set, TypedArray, arguments, Nodelist, HTMLCollection 등의 표준 빌트인 객체들은 빌트인 이터러블임.

📁 for ...of 문

이터러블을 순회하면서 이터러블의 요소를 변수에 할당.

문법:

for ( 변수선언문 of 이터러블 ) { ... }

내부적으로 이터레이터의 next 메서드를 호출하여 이터러블을 순회하며, next 메서드가 반환한 이터레이터 리절트 객체의 value 프로퍼티 값을 변수에 할당. 그리고 이터레이터 리절트 객체의 done 프로퍼티 값이 false이면 이터러블의 순회를 계속하고 true이면 순회를 중단.
```
for (const item of [1, 2, 3]) {
  console.log(item);  // 1 2 3
}
```

내부 동작:

// 이터러블
const iterable = [1, 2, 3];

// 이터러블의 Symbol.iterator 메서드를 호출하여 이터레이터를 생성
const iterator = interable[Symbol.iterator]();

for( ;; ) {
  // 이터레이터의 next 메서드를 호출하여 이터러블을 순회
  // 이때 next 메서드는 이터레이터 리절트 객체를 반환
  const res = iterator.next();

  // next 메서드가 반환한 이터레이터 리절트 객체의 done 프로퍼티 값이 true이면 이터러블의 순회를 중단
  if(res.done) break;

  // 이터레이터 리절트 객체의 value 프로퍼티 값을 item 변수에 할당
  const item = res.value;
  console.log(item);  // 1 2 3
}

📁 이터러블과 유사 배열 객체

유사 배열 객체는 인덱스로 프로퍼티 값에 접근할 수 있고, length 프로퍼티를 갖는 객체. ( for문으로 순회 가능, 인덱스를 나타내는 숫자 형식의 문자열을 프로퍼티 키로 가지므로 마치 배열처럼 인덱스로 프로퍼티 값에 접근 가능 )

// 유사 배열 객체
const arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
};

// 유사 배열 객체는 length 프로퍼티를 갖기 때문에 for 문으로 순회 가능
for (let i = 0; i < arrayLike.length; i++) {
  //  유사 배열 객체는 마치 배열처럼 인덱스로 프로퍼티 값에 접근 가능
  console.log(arrayLike[i]);  // 1 2 3
}

하지만 Symbol.iterator 메서드가 없기 때문에 for ...of 문으로 순회 불가.
arguments, NodeList, HTMLCollection은 유사 배열 객체이지만 객체에 Symbol.iterator 메서드를 구현하여 이터러블임.

Array.from 메서드를 사용하여 배열로 간단히 변환 가능. ( 유사 배열 객체 또는 이터러블을 인수로 전달받아 배열로 변환하여 반환 )

// 유사 배열 객체
const arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
};

// Array.from은 유사 배열 객체 또는 이터러블을 배열로 변환
const arr = Array.from(arrayLike);
console.log(arr);  // [1, 2, 3]

📁 이터레이션 프로토콜의 필요성

다양한 데이터 공급자가 하나의 순회 방식을 갖도록 규정하여 데이터 소비자가 효율적으로 다양한 데이터 공급자를 사용할 수 있도록 데이터 소비자와 데이터 공급자를 연결하는 인터페이스의 역할을 함.

📁 사용자 정의 이터러블

1. 사용자 정의 이터러블 구현

이터레이션 프로토콜을 준수하지 않는 일반 객체도 이터레이션 프로토콜을 준수하도록 구현하면 사용자정의 이터러블이 됨.

사용자 정의 이터러블은 Symbol.iterator 메서드를 구현하고 Symbol.iterator 메서드가 next 메서드를 갖는 이터레이터를 반환하도록 함. 그리고 이터레이터의 next 메서드는 done과 value 프로퍼티를 가지는 이터레이터 리절트 객체를 반환함.

// 피보나치 수열을 구현한 사용자 정의 이터러블
const fibonacci = {
  // Symbol.iterator 메서드를 구현하여 이터러블 프로토콜 준수
  [Symbol.iterator]() {
    let [pre, cur] = [0, 1];
    const max = 10;  // 수열의 최대값

    // Symbol.iterator 메서드는 next 메서드를 소유한 이터레이터를 반환
    // next 메서드는 이터레이터 리절트 객체를 반환
    return {
      next() {
        [pre, cur] = [cur, pre + cur];
        // 이터레이터 리절트 객체 반환
        return { value: cur, done: cur >= max }
      }
    };
  }
};

// 이터러블인 fibonacci 객체를 순회할 때마다 next 메서드가 호출됨
for (const num of fibonacci) {
  console.log(num);  // 1 2 3 5 8
}

// 이터러블은 스프레드 문법 사용 가능
const arr = [...fibonacci];
console.log(arr);  // [1, 2, 3, 5, 8]

// 이터러블은 배열 디스트럭처링 할당 가능
const [first, second, ...rest] = fibonacci;
console.log(first, second, rest);  // 1 2 [3, 5, 8]

2. 이터러블을 생성하는 함수

이터러블을 반환하는 함수를 만들면 됨.

// 피보나치 수열을 구현한 사용자 정의 이터러블을 반환하는 함수
const fibonacciFunc = function (max) {
  let [pre, cur] = [0, 1];

  // Symbol.iterator 메서드를 구현한 이터러블을 반환
  return {
    [Symbol.iterator]() {
      return {
        next() {
          [pre, cur] = [cur, pre + cur];
          return { value: cur, done: cur >= max };
        }
      };
    }
  };
};

// 이터러블을 반환하는 함수에 수열의 최대값을 인수로 전달하면서 호출
// fibonacciFunc(10)은 이터러블을 반환
for (const num of fibonacciFunc(10)) {
  console.log(num);  // 1 2 3 5 8
}

3. 이터러블이면서 이터레이터인 객체를 생성하는 함수

이터러블이면서 이터레이터인 객체를 생성하여 반환.

// 이터러블이면서 이터레이터인 객체를 반환하는 함수
const fibonacciFunc = function (max) {
  let [pre, cur] = [0, 1];

  // Symbol.iterator 메서드와 next 메서드를 소유한 이터러블이면서 이터레이터인 객체를 반환
  return {
    [Symbol.iterator]() { return this; },
    // next 메서드는 이터레이터 리절트 객체를 반환
    next() {
      [pre, cur] = [cur, pre + cur];
      return { value: cur, done: cur >= max };
    }
  };
};

// iter는 이터러블이면서 이터레이터임
let iter = fibonacciFunc(10);

// iter는 이터러블이므로 for ...of 문으로 순회 가능
for (const num of iter) {
  console.log(num);  // 1 2 3 5 8
}

// iter는 이터레이터이므로 이터레이션 리절트 객체를 반환하는 next 메서드를 소유
console.log(iter.next());  // { value: 1, done: false }
console.log(iter.next());  // { value: 2, done: false }
console.log(iter.next());  // { value: 3, done: false }
console.log(iter.next());  // { value: 5, done: false }
console.log(iter.next());  // { value: 8, done: false }
console.log(iter.next());  // { value: 13, done: true }

4. 무한 이터러블과 지연평가

무한 이터러블을 생성하는 함수 정의 가능

// 무한 이터러블을 생성하는 함수
const fibonacciFunc = function () {
  let [pre, cur] = [0, 1];

  return {
    [Symbol.iterator]() { return this; },
    next() {
      [pre, cur] = [cur, pre + cur];
      // 무한을 구현해야 하므로 done 프로퍼티를 생략
      return { value: cur };
    }
  };
};

// fibonacciFunc 함수는 무한 이터러블을 생성함
for (const num of fibonacciFunc()) {
  if (num > 10000) break;
  console.log(num);  // 1 2 3 5 8 ...  4181 6765
}

// 배열 디스트럭처링 할다응ㄹ 통해 무한 이터러블에서 3개의 요소만 취득
const [f1, f2, f3] = fibonacciFunc();
console.log(f1, f2, f3);

배열이나 문자열 등은 모든 데이터를 메모리에 미리 확보한 다음 데이터를 공급함. 하지만 이터러블은 지연 평가를 통해 데이터를 생성.
지연 평가: 데이터가 필요한 시점 이전까지는 미리 데이터를 생성 X <-> 필요 시점이 되면 그때야 비로소 데이터를 생성.

📁 제너레이터

이터러블 객체를 생성하는 특수 함수.

일반 함수와 달리 실행을 일시 중지했다가 필요한 시점에 재개할 수 있음.

// 제너레이터 함수 정의
const fibonacciGen = function* () {
  let [pre, cur] = [0, 1];

  while (true) {
    [pre, cur] = [cur, pre + cur];
    yield cur;  // 값을 내뱉고 여기서 멈춤 (무한 루프지만 안전)
  }
};

// 1. for ...of 문 사용
for (const num of fibonacciGen()) {
  if (num > 10000) break;
  console.log(num);  // 1 2 3 5 8 ...  6765
}

// 2. 배열 디스트럭처링 할당
const [f1, f2, f3] = fibonacciGen();
console.log(f1, f2, f3);  // 1 2 3

[모딥다] 33장. Symbol

Wed, 25 Feb 2026 18:45:33 GMT

33장. Symbol

📁 심벌이란?

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

📁 심벌 값의 생성

1. Symbol 함수

Symbol 함수를 호출하여 생성.

// Symbol 함수를 호출하여 유일무이한 심벌 값을 생성
const mySymbol = Symbol();
console.log(typeof mySymbol);  // symbol

// 심벌 값은 외부로 노출되지 않아 확인할 수 없다.
console.log(mySymbol);  // Symbol()

심벌은 new 연산자와 함께 호출하지 않음. ( 심벌 값은 변경 불가능한 원시 값 )
```
new Symbol();  // TypeError: Symbol is not a constructor
```

문자열을 인수로 전달 가능. ( 생성된 심벌 값에 대한 설명으로 디버깅 용도로만 사용됨. )

// 심벌 값에 대한 설명이 같더라도 유일무이한 심벌 값을 생성
const mySymbol1 = Symbol('mySymbol');
const mySymbol2 = Symbol('mySymbol');

console.log(mySymbol1 === mySymbol2);  // false

객체처럼 접근하면 암묵적으로 래퍼 객체를 생성.

const mySymbol = Symbol('mySymbol');

// 심벌도 래퍼 객체를 생성
console.log(mySymbol.descripttion);  // mySymbol
console.log(mySymbol.toString());  // Symbol(mySymbol)

심벌 값은 암묵적으로 문자열이나 숫자 타입으로 변환되지 않음.

const mySymbol = Symbol();

// 심벌 값은 암묵적으로 문자열이나 숫자 타입으로 변환되지 않음.
console.log(mySymbol + '');  // TypeError: Cannot convert a Symbol value to a string
console.log(+mySymbol);  // TypeError: Cannot convert a Symbol value to a string

불리언 타입으로는 암묵적 타입 변환 가능. ( if문 등에서 존재 확인이 가능 )

const mySymbol = Symbol();

// 불리언 타입으로는 암묵적 타입 변환
console.log(!!mySymbol);  // true

// if문 등에서 존재 확인 가능
if (mySymbol) console.log('mySymbol is not empty.');

2.Symbol.for / Symbol.keyFor 메서드

2-1. Symbol.for 메서드

인수로 전달받은 문자열을 키로 사용 -> 전역 심벌 레지스트리에서 해당 키와 일치하는 심벌 값을 검색 -> 검색 실패 시 인수로 전달받은 문자열의 키로 전역 심벌 레지스트레이 저장 -> 생성된 심벌값을 반환.

// 전역 심벌 레지스트리에 mySymbol이라는 키로 저장된 심벌 값이 없으면 새로운 심벌 값을 생성
const s1 = Symbol.for('mySymbol');
// 전역 심벌 레지스트리에 mySymbol이라는 키로 저장된 심벌 값이 있으면 해당 시벌 값을 반환
const s2 = Symbol.for('mySymbol');

console.log(s1 === s2);  // true

Symbol 함수 호출: 유일무이한 심벌 값 생성 ( 키 지정 불가 -> 전역 심벌 레지스트리에 등록/관리 X ) Symbol.for 메서드: 애플리케이션 전역에 중복되지 않는 유일무이한 상수인 심벌 값을 단 하나만 생성하여 전역 심벌 레지스트리를 통해 공요.

2-2. Symbol.keyFor 메서드

전역 심벌 레지스트리에 저장된 심벌 값의 키를 추출.

// 전역 심벌 레지스트리에 mySymbol이라는 키로 지정된 심벌 값이 없으면 새로운 심벌 값을 생성
const s1 = Symbol.for('mySymbol');
// 전역 심벌 레지스트리에 지정된 심벌 값의 키를 추출
Symbol.keyFor(s1);  // -> mySymbol

// Symbol 함수를 호출하여 생성한 심벌 값은 전역 심벌 레지스트리에 등록되어 관리되지 않음
const s2 = Symbol('foo');
// 전역 심벌 레지스트리에 저장된 심벌 값의 키를 추출
Symbol.keyFor(s2);  // -> undefined

📁 심벌과 상수

값에는 특별한 의미가 없고 상수 이름 자체에 의미가 있는 경우, 변경/중복될 가능 성이 있는 무의미한 상수 대신 중복될 가능성이 없는 유일무이한 심벌 값을 사용 가능.

// 중복될 가능성이 없는 심벌 값으로 상수 값을 생성
const Direction = {
  UP: Symbol('up'),
  DOWN: Symbol('down'),
  LEFT: Symbol('left'),
  RIGHT: Symbol('right')
};

const myDirection = Direction.UP;

if (myDirection === Direction.UP) {
  console.log('You are going UP.');
}

Enum

명명된 상수의 집합으로 열거형이라고 부름. ( JS는 enum을 지원하지 않지만 타입스크립트에선 enum을 지원 )

Object.freeze 메스드와 심벌 값을 사용해 enum을 흉내 내어 사용 가능.

// 중복될 가능성이 없는 심벌 값으로 상수 값을 생성
const Direction = Object.freeze({
  UP: Symbol('up'),
  DOWN: Symbol('down'),
  LEFT: Symbol('left'),
  RIGHT: Symbol('right')
});

const myDirection = Direction.UP;

if (myDirection === Direction.UP) {
  console.log('You are going UP.');
}

📁 심벌과 프로퍼티 키

객체의 프로퍼티 키는 빈 문자열을 포함하는 모든 문자열 또는 심벌 값으로 만들 수 있으며, 동적으로 생성 가능.
```
const obj = {
  [Symbol.for('mySymbol')]: 1
};

obj[Symbol.for('mySymbol')];  // -> 1
```
심벌 값으로 프로퍼티 키를 만들면 다른 프로퍼티 키와 절대 충돌하지 않음.

📁 심벌과 프로퍼티 은닉

심벌 값을 프로퍼티 키로 사용하여 생성한 프로퍼티는 for ...in 문이나 Object.keys, Object.getOwnPropertyNames 메서드로 찾을 수 없음.

심벌 값을 프로퍼티 키로 사용하여 프로퍼티를 생성하면 외부에 노출할 필요가 없는 프로퍼티를 은닉 가능.

const obj = {
  [Symbol('mySymbol')]: 1
};

for (const key in obj) {
  console.log(key);  // 아무것도 출력되지 않음
}

console.log(Object.keys(obj));  // []
console.log(Object.getOwnPropertyNames(obj));  // []

// getOwnPropertySymbols 메서드는 인수로 전달된 객체의 심벌 프로퍼티 키를 배열로 반환
console.log(Object.getOwnPropertySymbols(obj));  // [Symbol(mySymbol)]

// getOwnPropertySymbols 메서드로 심벌 값도 찾을 수 있음
const symbolKey1 = Object.getOwnPropertySymbols(obj)[0];
console.log(obj[symbolKey1]);  // 1

📁 심벌과 표준 빌트인 객체 확장

일반적으로 표준 빌트인 객체에 사용자 정의 메서드를 직접 추가하여 확장하는 것은 권장하지 않음. ( 읽기 전용으로 사용하는 것이 좋음 )

하지만 심벌값으로 프로퍼티를 생성하면 어떤 프로퍼티 키와도 충돌할 위험이 없이 안전하게 표준 빌트인 객체를 확장 가능.

// 심벌 값으로 프로퍼티 키를 동적 생성하면 다른 프로퍼티 키와 절대 충돌하지 않아 안전
Array.prototype[Symbol.for('sum')] = function () {
  return this.reduce((acc, cur) => acc + cur, 0);
};

[1, 2][Symbol.for('sum')]();  // -> 3

📁 Well-known Symbol

JS가 기본 제공하는 빌트인 심벌 값.
이는 JS엔진의 내부 알고리즘에 사용됨.
Array, String, Map, Set, TypedArray, arguments, NodeList, HTMLCollection과 같이 for ...of 문으로 순회 가능한 빌트인 이터러블은 Well-known Symbol인 Symbol.iterator를 키로 갖는 메서드를 가지며, Symbol.iterator 메서드를 호출하면 이터레이터를 반환하도록 ECMAScript 사양에 규정되어 있음.

일반 객체를 이터러블처럼 동작하도록 구현하고 싶다면 이터레이션 프로토콜을 따르면 됨.

const iterable = {
  // Symbol.iterator 메서드를 구현하여 이터러블 프로토콜을 준수
  [Symbol.iterator]() {
    let cur = 1;
    const max = 5;
    // Symbol.iterator 메서드는 next 메서드를 소유한 이터레이터를 반환
    return {
      next() {
        return { value: cur++, done: cur > max + 1 }
      }
    };
  }
}

for (const num of iteralbe) {
  console.log(num);  // 1 2 3 4 5
}

이때 이터레이션 프로토콜을 준수하기 위해 일반 객체에 추가해야 하는 메서드의 키 Symbol.iterator는 기존 프로퍼티 키 또는 미래에 추가될 프로퍼티 키와 절대 중복되지 않음.
이처럼 심벌은 중복되지 않는 상수 값을 생성하는 것은 물론 기존 작성된 코드에 영향을 주지 않고 새로운 프로퍼티를 추가하기 위해, 즉 하위 호환성을 보장하기 위해 도입.

[모딥다] 26장. ES6 함수의 추가 기능

Fri, 20 Feb 2026 07:01:11 GMT

26장. ES6 함수의 추가 기능

📁 함수의 구분

ES6 이전의 모든 함수는 일반함수, 생성자 함수 호출이 가능. ( callable, constructor )
ES6 이전 모든 함수는 사용목적에 따라 명확한 구분이 없으므로 호출 방식에 특별한 제약이 없고 생성자 함수로 호출되지 않아도 프로토타입 객체를 생성함. ( 혼란스러우며 실수 유발 가능성, 불필요한 프로토타입 객체 생성으로 성능에도 좋지 않음 )
ES6에서는 이러한 문제를 해결하기 위해 사용 목적에 따라 세 가지 종류로 명확히 함수를 구분.

메서드

ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미.
ES6 사양에서 정의한 메서드는 인스턴스를 생성할 수 없는 non-constructor 임.
메서드는 인스턴스를 생성할 수 없으므로 prototype 프로퍼티가 없고 프로토타입도 생성하지 않음.
ES6 메서드는 자신을 바인딩한 객체를 가리키는 [[HomeObject]] 내부 슬롯을 갖음. ( super 참조는 [[HomeObject]] 내부 슬롯을 사용하여 수퍼클래스 메서드를 참조하므로, ES6 메서드는 super 키워드 사용이 가능 )
```
const obj = {
  x: 1,
  foo() { return this.x; }
}

new obj.foo();  // TypeError: obj.foo is not a constructor
```

📁 화살표 함수

화살표 함수는 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제의 해결 대안으로 유용함.
1. 화살표 함수의 정의
```
const arrow = (x, y) => x * y;
```

const arrow = (x, y) => { ... };

const arrow = x => { ... };

const arrow = () => { ... };

const arrow = x => { return x ** 2 };

const arrow = () => const x = 1; // SyntaxError: Unexpected token 'const' const arrow = () => { return const x = 1; }; // 이렇게 해석 됨.

// 함수 몸체의 문이 표현식이 아닌 문 이라면 중괄호를 생략할 수 없음. const arrow = () => { const x = 1; };

// 객체 리터럴 반환의 경우 소괄호로 감싸주어야 함 const arrow = (id, content) => ({ id, content });

// 즉시 실행함수 사용 가능 const person = (name => ({ sayHi() { return Hi! {name} } }))('Kim');

### 2. 화살표 함수와 일반 함수의 차이
- 인스턴스를 생성할 수 없는 `non-constructor` 임.
- 중복된 매개변수 이름을 선언할 수 없음.
  ```js
  const arrow = (a, a) => a + a;
  // SyntaxError: Duplicate parameter name not allowed in this context

함수 자체의 this, arguments, super, new.target. 바인딩을 갖지 않음. (화살표 함수 내부에서 참조하면 스코프 체인을 통해 상위 스코프의 것을 참조함)
3. this
화살표 함수와 일반 함수의 this는 다르게 동작함.
화살표 함수는 함수 자체의 this 바인딩을 갖지 않음. 따라서 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조함 ( lexical this ).
마치 화살표 함수의 this가 함수가 정의된 위치에 의해 결정되는 것 처럼 동작.
4. super
this와 마찬가지로 상위 스코프의 super를 참조.
5. arguments
this와 바찬가지로 상위 스코프의 arguments를 참조.

📁 Rest 파라미터

기본 문법

Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달 받음.
Rest 파라미터는 반드시 마지막 파라미터여야 함.

Rest 파라미터는 함수 객체의 length 프로퍼티(함수 정의 시 선언한 매개변수 개수)에 영향을 주지 않음.

function foo(...rest) {
  // 매개변수 rest는 인수들의 목록을 배열로 전달받는 Rest 파라미터임.
  console.log(rest);
}
foo(1, 2, 3, 4, 5);  // [1, 2, 3, 4, 5]

function foo(param, ...rest) {
  console.log(param);
  console.log(rest);
}
foo(1, 2, 3, 4, 5);
// 1
// [2, 3, 4, 5]

Rest 파라미터와 arguments 객체

arguments 객체는 배열이 아닌 유사 배열 객체이므로 배열 메서드 사용시 prototype.call 또는 Function.prototype.apply 메서드를 사용해 배열로변환해야 하는 변거로움이 있었음.
ES6에서는 rest 파라미터를 사용하여 가변 인자 함수의 인수 목록을 배열로 직접 전달 받을 수 있음.

매개변수 기본값

함수 내부에서 수행하던 인수 체크 및 초기화의 간소화를 할 수 있음.

인수를 전달하지 않은 경우와 undefined를 전달한 경우에만 유효.

function sum(x = 0, y = 0) {
  return x + y;
}

console.log(sum(1, 2));  // 3
console.log(sum(1));  // 1

[모딥다] 25장. 클래스

Fri, 20 Feb 2026 06:11:35 GMT

25장. 클래스

JS는 프로토타입 기반 객체지향 언어임. 클래스는 완전히 새로운 개념이 아니라 기존 프로토타입 기반 상속을 더 명료하게 사용하기 위해 ES6 부터 도입된 문법적 설탕에 가까움. 하지만, 클래스는 생성자 함수 기반의 객체 생성 방식보다 견교하고 명료함. 특히 extends와 super 키워드는 상속 관계 구현을 더욱 간결하고 명료하게 하므로, 새로운 객체 생성 매커니즘으로 보는것이 타당함.

📁 생성자 함수 vs 클래스

1. 공통점

표면적인 문법은 다르지만, JS엔진 내부에서는 결국 동일한 매커니즘으로 동작.

둘다 JS의 프로토타입 기반으로 동작.
동일한 구조와 메서드를 가진 여러 개의 객체(인스턴스)를 효율적으로 생성하기 위해 사용.
생성된 인스턴스에 대해 instanceof 연산자를 사용하여 출처확인 가능.
자식 객체가 부모 객체의 속성과 메서드를 물려받아 재사용 가능하게 함. ( 객체지향의 상속 구현 )
2. 차이점
클래스는 개발자의 실수를 줄여주고 더 직관적이고 안전한 코드를 작성할 수 있도록 여러 가지 제약과 편의 기능을 추가함.

구분	생성자함수	클래스
`new` 키워드 호출	`new` 연산자 없이 일반 함수로 호출 가능	`new` 연산자 없이 호출시 타입 에러(TypeError)가 발생함
호이스팅	함수 선언문으로 작성 시 호이스팅이 발생하여 선언 전에 호출 가능	호이스팅이 발생하지만, TDZ의 영향을 받아 선언 전에 접근 시 참조에러(ReferenceError) 발생.
Strict Mode	기본적으로 적용되지 않음. (필요시 파일 최상단이나 함수 내부에 `'use strict'`를 명시해야 함.)	클래스 내부 코드는 암묵적으로 항상 엄격모드로 실행됨.
매서드 열거 여부	프로토타입에 추가한 메서드는 기본적으로 열거 가능 `(enumerable: true)`하여 `for ...in` 루프에 노출됨.	클래스 내부에 정의된 메서드는 기본적으로 열거 불가. `(enumerable: false)`
상속 구현 방식	`Object.create(Parent.prototype)`로 체인을 연결하고, 자식 생성자에서 `Parent.call(this)`로 부모의 `this`를 바인등하는 등 수동 작업이 많음	`extends` 키워드로 상속을 선언하고, `super()`를 호출하여 부모의 생성자와 메서드에 매우 쉽게 접근

📁 클래스 정의

class 키워드를 사용하여 정의함. (파스칼 케이스를 사용하는 것이 일반적이나 사용하지 않아도 에러 발생 X)
```
class Person {}
```

일반적이진 않지만 함수와 마찬가지로 표현식 정의도 가능

// 익명 클래스 표현식
const Person = class {};

// 기명 클래스 표현식
const Person = class MyClass {};

클래스에서 정의할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드 세가지가 있음.

// 클래스 선언문
class Person {
  // 생성자
  constructor(name) {
    // 인스턴스 생성 및 초기화
    this.name = name;
  }

  // 프로토타입 메서드
  sayHi() {
    console.log(`Hi! My name is ${this.name}`);
  }

  // 정적 매서드
  static sayHello() {
    console.log('Hello!');
  }
}

// 인스턴스 생성
const me = new Person('Kim');

// 인스턴스 프로퍼티 참조
console.log(me.name);  // Kim
// 프로토타입 메서드 호출
me.sayHi();  // Hi! My name is Kim
// 정적 메서드 호출
Person.sayHello();  // Hello!

📁 클래스 호이스팅

클래스는 함수로 평가되기 때문에, 클래스 선언문으로 정의한 클래스는 함수 선언문과 같이 소스코드 평가 과정(런타임 이전)에 먼저 평가되어 함수 객체를 생성함.
이때 클래스가 평가되어 생성된 함수 객체는 생성자 함수로서 호출할 수 있는 함수, 즉 constructor임.
생성자 함수로써 호출할 수 있는 함수는 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성됨. ( 프로토타입과 생성자 함수는 언제나 쌍으로 존재하기 때문 )

단, 클래스는 클래스 정의 이전에 참조 불가. (클래스 선언문 이전에 TDZ에 빠지기 때문)

const Person = '';

{
  console.log(Person);
  // ReferenceError: Cannot access 'Person' before initialization

  // 클래스 선언문
  class Person {}
}

📁 인스턴스 생성

클래스는 생성자 함수이며 new 연산자와 함께 호출되어 인스턴스를 생성.
생성자 함수와 달리 클래스는 인스턴스를 생성하는 것이 유일한 존재 이유이므로 반드시 new 연산자와 함께 호출.
```
class Person {}

const me = Person();
// TypeError: Class constructor Person cannot be invoked without 'new'
```

기명 함수 표현식과 마찬가지로 클래스 표현식에서 사용한 클래스 이름은 외부 코드에서 접근 불가.

const Person = class MyClass {};

const me = new Person();

console.log(MyClass);  // ReferenceError: MyClass is not defined

const you = new MyClass();  // ReferenceError: MyClass is not defined

📁 메서드

1. constructor

인스턴스를 생성하고 초기화하기 위한 특수한 메서드. (이름 변경 X)

class Person {
  // 생성자
  constructor(name) {
    // 인스턴스 생성 및 초기화
    this.name = name;
  }
}

클래스는 평가되어 함수 객체가 되기에, 클래스 또한 함수 객체의 고유의 프로퍼티를 모두 갖고 있음.
모든 함수 객체가 가지고 있는 prototype 프로퍼티가 가리키는 프로토타입 객체의 constructor 프로퍼티는 클래스 자신을 가리키고 있음. ( 클래스가 인스턴스를 생성하는 생성자 함수라는 것을 의미 )
constructor 내부에서 this에 추가한 프로퍼티는 인스턴스 프로퍼티가 됨. ( 생성자 함수와 마찬가지로 this는 클래스가 생성한 인스턴스를 가리킴 )
constructor는 메서드로 해석되는 것이 아닌, 클래스가 평가되어 생성된 함수 객체 코드의 일부가 됨.
생성자 함수와의 차이점:
- 클래스 내에 오직 한 개만 존재.
- 생략 가능 ( 빈 constructor가 암묵적으로 정의됨. )
- 프로퍼티가 추가되어 초기화된 인스턴스를 생성하려면 constructor 내부에서 this에 인스턴스 프로퍼티를 추가.
```
class Person {
  constructor(name, address) {
    // 고정값으로 인스턴스 초기화
    this.example = example;

    // 인수로 인스턴스 초기화
    this.name = name;
    this.address = address;
  }
}

const me = new Person('Lee', 'Seoul');
console.log(me);  // Person { example: "example", name: "Lee", address: "Seoul" }
```
- constructor는 별도의 반환문을 갖지 않아야함. ( new 연산자와 함께 클래스가 호출되면 생성자 함수가 동일하게 암묵적으로 this(인스턴스를 가리킴)를 반환하기 때문 )
  
  2. 프로토타입 메서드

생성자 함수와 다르게 클래스는 prototype 프로퍼티에 메서드를 추가하지 않아도 기본적으로 프로토타입 메서드가 됨.

class Person {
  // 생성자
  constructor(name) {
    // 인스턴스 생성 및 초기화
    this.name = name;
  }

  // 프로토타입 메서드
  sayHi() {
    console.log(`Hi! My name is ${this.name}`);
  }
}

const me = new Person('Kim');
me.sayHi();  // Hi! My name is Kim

생성자 함수와 마찬가지로 클래스가 생성한 인스턴스는 프로토타입 체인의 일원이 됨.

3. 정적 메서드
인스턴스를 생성하지 않아도 호출할 수 있는 메서드.

staic 키워드를 붙이면 정적 메서드가 된됨.

class Person {
  // 생성자
  constructor(name) {
    // 인스턴스 생성 및 초기화
    this.name = name;
  }

  // 정적 메서드
  static sayHi() {
    console.log('Hi');
  }
}

Person.sayHi();  // Hi!

4. 정적 메서드와 프로토타입 메서드의 차이

구분	정적 메서드	프로토타입 메서드
저장위치	Parent(생성자 함수 객체자체)	Parent.prototype
`this` 바인딩	클래스 자체를 가리킴	생성된 인스턴스를 가리킴
체인구조	클래스 자체에 속하므로, 인스턴스의 프로토타입 체인에는 존재하지 않음. (상속시 부모 클래스 자체가 자식 클래스의 프로토타입이 됨.)	인스턴스 -> Class.prototype -> Object.prototype 순으로 탐색
### 5. 클래스에서 정의한 메서드의 특징

function 키워드를 생략한 메서드 축약 표현 사용.
객체 리터럴과 다르게 클래스에서 메서드를 정의할 때 콤마 사용 X.
암묵적 strict mode로 실행.
for ...in문이나 Object.keys 메서드 등으로 열거 불가.
내부 메서드 [[Construct]]를 갖지 않는 non-constructor. ( new 연산자와 함꼐 호출 불가 )

📁 클래스의 인스턴스 생성 과정

1. 인스턴스 생성과 this 바인딩

new 연산자와 함께 클래스 호출 -> 빈 객체 생성(완성되지 않은 인스턴스) -> 생성한 인스턴스의 프로토타입으로 클래스의 prototype 프로퍼티가 가리키는 객체가 설정됨 -> 인스턴스는 this에 바인딩 됨. -> 고로 this는 인스턴스를 가리키게 됨.
2. 인스턴스 초기화
constructor 내부 코드 실행 -> this에 바인딩되어 있는 인스턴스를 초기화 -> 인스턴스에 프로퍼티를 추가하고 인수로 전달받은 초기값으로 인스턴스의 프로퍼티 값을 초기화. ( constructor가 생략되었다면 이과정이 생략됨 )
3. 인스턴스 반환
클래스의 모든 처리가 끝나면 완성된 인스턴스(바인딩된 this)가 암묵적으로 반환됨.

📁 프로퍼티

1. 인스턴스 프로퍼티

constructor 내부에서 정의 해야함.
constructor 내부에서 this에 추가한 프로퍼티는 언제나 클래스가 생성한 인스턴스의 프로퍼티가 됨.

2. 접근자 프로퍼티
자체적으로 값([[Value]] 내부슬롯)을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티
get, set 키워드를 동일하게 사용
클래스 메서드는 기본적으로 프로토타입 메서드 이므로, 접근자 프로퍼티 또한 인스턴스 프로퍼티가 아닌 프로토타입의 프로퍼티임.

3. 클래스 필드 정의 제안
클래스 필드: 클래스가 생성할 인스턴스의 프로퍼티를 가리키는 용어.

초기 ES6 클래스 문법에서는 클래스 몸체 안에 메서드만 선언할 수 있었으나, ES13 이후 부터는 클래스 필드를 도입하여 constructor 없이도 몸체에 직접 변수 선언이 가능함.

// 초기 ES6
class Player {
  constructor() {
    this.hp = 100;  // 인스턴스 필드
  }
}
Player.maxLevel = 99;  // 정적 필드 (밖에서 정의 해야 함)

// ES13 이후
class Player {
  hp = 100;  // Public 인스턴스 필드

  status() {
    console.log(hp);  // ReferenceError: hp is not defined
    console.log(this.hp);
  }
}

인스턴스를 생성할 때 외부 초기값으로 클래스 필드를 초기화할 필요가 있다면 constructor에서 인스턴스 프로퍼티를 정의하고, 필요가 없다면 클래스 필드 정의 제안을 사용하는것이 기본적임.

4. private 필드 정의 제안
private 필드의 선두에 #을 붙여 사용. ( 참조 시에도 #을 붙여주어야 함 )
public 필드와 다르게 private 필드는 클래스 내부에서만 참조할 수 있음. (접근자 프로퍼티를 통해 간접적으로 접근하는 방법은 유효 )

private 필드는 반드시 클래스 몸체에 정의해야 함.

class Person {
  // private 필드 정의
  #name = '';

  constructor(name) {
    this.#name = name;
  }

  get name() {
    return this.#name.trim();
  }
}

const me = new Person(' Kim ');
console.log(me.name);  // Kim

5. static 필드 정의 제안

ES22 이후 부터 정적 필드를 정의할 수 있게 됨.

단, static 필드는 인스턴스 프로퍼티가 아닌, 클래스의 프로퍼티임.

class MyMath {
  // static public 필드 정의
  static PI = 22 / 7;

  // static private 필드 정의
  static #num = 10;

  // static 메서드
  static increment() {
    return ++MyMath.#num;
  }
}

📁 상속에 의한 클래스 확장

1. 클래스 상속과 생성자 함수 상속

기존 클래스를 상속받아 새로운 클래스를 확장하여 정의하는 것.

class Animal {
  constructor(age, weight) {
    this.age = age;
    this.weight = weight;
  }

  eat () { return 'eat'; }
  move () { return 'move'; }
}

class Bird extends Animal {
  fly () { return 'fly'; }
}

const bird = new Bird(1, 5);

console.log(bird);  // Bird { age: 1, weight: 5 }
console.log(bird instance Bird);  // true
console.log(bird instance Animal);  // true

console.log(bird.eat());  // eat
console.log(bird.move());  // move
console.log(bird.fly());  // fly

2. extends 키워드

상속을 통해 클래스를 확장하려면 extends 키워드를 사용하여 상속받을 클래스를 정의
```
// 수퍼(베이스/부모) 클래스
class Base {}

// 서브(파생/자식) 클래스
class Derived extends Base {}
```
3. 동적 상속
extends 키워드는 클래스 뿐 아니라 생성자 함수를 상속받아 클래스를 확장할 수 있음. ( 단, 상속받는 주체는 클래스여야 함. )

상속받을 주체는 클래스 뿐 아니라 [[Construct]] 냅부 메서드를 갖는 함수 객체로 평가될 수 있는 모든 표현식이 가능.

function Base1() {}

class Base2 {}

let condition = true;

class Derived extends (condition ? Base1 : Base2) {}

const derived = new Derived();
console.log(derived);  // Derived {}

console.log(derived instanceof Base1);  // true
console.log(derived instanceof Base2);  // false

4. 서브클래스 constructor

서브클래스 또한 constructor 생략시 암묵적으로 정의됨.

// 수퍼 클래스
class Base() {}

// 서브 클래스
class Dervied extends Base {
  // 암묵적 정의 예시
  constructor(...args) { super(...args); }
}

const derived = new Derived();
console.log(derived);

5. super 키워드

super 키워드는 함수처럼 호출할 수도 있고 this와 같이 식별자처럼 참조할 수 있는 특수한 키워드임.

🔹 super 호출
super를 호출하면 수퍼클래스의 constructor를 호출.
주의사항:
- 서브클래스에서 constructor를 생략하지 않는 경우 반드시 super를 호출해야 함.
- 서브클래스의 constructor에서 super를 호출하기 전에는 this를 참조할 수 없음.
- super는 반드시 서브클래스의 constructor에서만 호출
```
class Animal {
constructor(name) {
  this.name = name;
}
}
```
class Dog extends Animal { constructor(name, breed) {
```
// 1. 부모 클래스의 constructor(name)를 호출합니다.
// 이 작업이 끝나야만 자식 클래스에서 'this'를 사용할 수 있습니다.
super(name); 

// 2. 자식 클래스만의 고유 속성을 추가합니다.
this.breed = breed;
```
}

bark() {
```
console.log(`${this.name}(${this.breed})가 멍멍 짖습니다!`);
```
} }

const myDog = new Dog("초코", "푸들"); myDog.bark(); // 초코(푸들)가 멍멍 짖습니다! ```

🔹 super 참조

메서드 내에서 super를 참조하면 수퍼클래스의 메서드를 호출할 수 있음.

class Animal {
  constructor(name) {
    this.name = name;
  }

  getName() {
    return this.name;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    // 1. 부모 클래스의 constructor(name)를 호출합니다.
    // 이 작업이 끝나야만 자식 클래스에서 'this'를 사용할 수 있습니다.
    super(name); 

    // 2. 자식 클래스만의 고유 속성을 추가합니다.
    this.breed = breed;
  }

  bark () {
    console.log(`${super.getName()}(${this.breed})가 멍멍 짖습니다.`)
  }
}

const myDog = new Dog("초코", "푸들");
myDog.bark(); // 초코(푸들)가 멍멍 짖습니다!

6. 상속 클래스의 인스턴스 생성 과정

🔹 서브클래스의 super 호출

JS엔진은 클래스를 평가할 때 수퍼클래스와 서브클래스를 구분하기 위해 "base" 또는 "derived"를 값으로 갖는 [[ConstructorKind]] 내부슬롯을 갖음.
다른 클래스를 상속받지 않는 클래스(생성자 함수)는 "base"로 설정, 상속 받는경우 "derived"로 설정됨.
이를 통해 수퍼클래스와 서브클래스는 new 연산자와 함께 호출되었을 때 동작이 구분됨.
서브클래스는 자신이 직접 인스턴스를 생성하지 않고, 수퍼클래스에 인스턴스 생성을 위임. ( 서브클래스의 constructor에서 반드시 super를 호출해야 하는 이유 )

🔹 수퍼클래스의 인스턴스 생성과 this 바인딩
수퍼클래스는 인스턴스를 생성하지만, new 연산자와 함께 호출된 클래스가 서브 클래스 이므로, new.target이 가리키는 서브클래스가 생성한 것으로 처리됨.

🔹 수퍼클래스의 인스턴스 초기화
수퍼클래스의 constructor가 실행되어 this에 바인딩되어 있는 인스턴스를 초기화함.

🔹 서브클래스 constructor로의 복귀와 this 바인딩
super의 호출이 종료되고, 서브클래스의 constructor로 복귀. 이때 super가 반환한 인스턴스가 this에 바인딩 됨. 서브클래스는 별도의 인스턴스를 생성하지 않고 super가 반환한 인스턴스를 this에 바인딩 하여 그대로 사용.
위와 같이 동작하기 때문에 super가 호출되지 않으면 인스턴스가 생성되지 않으며, this 바인딩도 불가하기 때문에, 서브클래스에서 super 호출전 this를 참조할 수 없는 이유임.

🔹 서브클래스의 인스턴스 초기화
super 호출 이후, 서브클래스의 constructor 내부의 인스턴스 초기화가 실행. this에 바인딩 되어있는 인스턴스에 프로퍼티를 추가하고 constructor가 인수로 전달받은 초기값으로 인스턴스 프로퍼티를 초기화한 함.

🔹 인스턴스 반환
클래스의 모든 처리가 끝나면 완성된 인스턴스(바인딩된 this)가 암묵적으로 반환됨.

7. 표준 빌트인 생성자 함수 확장
extends 키워드의 상속의 주체는 클래스뿐만이 아니라 [[Construct]] 내부 메서드를 갖는 함수 객체로 평가될 수 있는 모든 표현식을 사용할 수 있으므로, String, Number, Array와 같은 표준 빌트인 객체도 상속 확장하여 사용이 가능.

[모딥다] 24장.클로저

Thu, 12 Feb 2026 04:18:05 GMT

24장. 클로저

클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합

📁 렉시컬 스코프

JS엔진은 함수를 어디서 호출했는지가 아닌 함수를 어디에 정의했는지에 따라 상위 스코프를 결정.
함수의 상위 스코프를 결정한다는 것은 '실행 컨텍스트' 관점에서 '외부 렉시컬 환경에 대한 참조'에 저장할 값이 '상위 렉시컬 환경에 대한 참조'임.
즉, 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경에 의해 결정됨. 이것이 렉시컬 스코프임.

📁 함수 객체의 내부 슬롯 [[Environment]]

함수는 자신의 '[[Environment]] 내부 슬롯'에 자신이 정의된 환경, 즉 상위 스코프의 참조를 저장함.
또한 자신이 호출되었을때 생성될 함수 렉시컬 환경의 '외부 렉시컬 환경에 대한 참조'에 저장될 참조값임.
그렇기 때문에 함수 객체는 상위 스코프(외부 렉시컬 환경)을 자신이 존재하는 한 기억함.

📁 클로저와 렉시컬 환경

const x = 1;

// (1)
function counter() {
  const x = 10;
  const inner = function () { console.log(x); };  // (2)

  return inner;
}

const innerFunc = outer();  // (3)
innerFunc();  // 10

(3)번에서 outer() 함수가 호출되고 inner 함수를 반환한 후 outer 함수의 실행 컨텍스트는 콜스택에서 제거되지만, 반환된 inner 함수가 innerFunc 변수에 할당 되어 여전히 '내부슬롯 [[Environment]]'에 outer 함수의 렉시컬 환경을 참조하고 있기 때문에 outer 함수의 렉시컬 환경 가비지 컬렉터의 대상이 되지 않기 때문에 소멸하지 않음.
외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명주기가 종료한 외부 함수의 변수를 참조할 수 있음. 이를 클로저라고 함.

📁 클로저의 활용

클로저는 상태를 안전하게 변경하고 유지하기 위해 사용함.

즉, 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용됨.

function createCounter () {
  let num = 0;

  return {
    increase: () => { return ++num; },
    decrease: () => { return num > 0 ? --num : 0 }
  }
}

const counter = createCounter();

counter.increase();  // 1
counter.decrease();  // 0

// 직접접근 X
console.log(counter.num);  // undefined

📁 캡슐화와 정보 은닉

캡슐화: 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것.
- 객체의 특정 프로퍼티나 메서드를 감출 목적으로 사용하기도 하는데 이를 정보 은닉이라 함.

부적절한 접근으로 부터 객체의 상태 변경을 방지하고, 객체간의 결합도를 낮추는 효과가 있음.

const Person = (function() {
  let _age = 0;  // private

  // 생성자 함수
  function Person(name, age) {
    this.name = name;  // public
    _age = age;
  }

  // 프로토타입 메서드
  Person.prototype.sayHi = function () {
    console.log(`Hi! My name is ${this.name}. I am ${_age}.`);
  };

  return Person;
}());

const me = new Person('Lee', 20);
me.sayHi();  // Hi! My name is Lee. I am 20.
console.log(me.name);  // Lee
console.log(me._age);  // undefined

const you = new Person('Kim', 30);
you.sayHi();  // Hi! My name is Kim. I am 30.
console.log(you.name);  // Kim
console.log(you._age);  // undefined

me.sayHi();  // Hi! My name is Lee. I am 30.

위 코드를 보면 여러개의 instance를 생성시 _age 변수의 상태가 유지되지 않는다. 이처럼 정보은닉을 완벽하게 지원하진 않음(단순 정보은닉의 경우 Class의 private을 사용하자)

[모딥다] 23장.실행 컨텍스트

Thu, 12 Feb 2026 02:58:42 GMT

23장. 실행 컨텍스트

📁 소스코드의 타입

소스코드(실행 가능한 코드)를 4가지 타입으로 구분하는 이유는 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르기 때문.

🔹 전역 코드

전역에 존재하는 소스코드 ( 전역에 정의된 함수, 클래스 등의 내부 코드는 포함 X )
전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성해야 함.
var키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수를 전역 객체의 프로퍼티와 메서드로 바인딩하고 참조하기 위해 전역 객체와 연결되어야 함.
전역 코드가 평가되면 전역 실행 컨텍스트가 생성됨.
🔹 함수 코드
함수 내부에 존재하는 소스코드 ( 함수 내부에 중첨된 함수, 클래스 등의 내부코드는 포함 X )
지역 스코프를 생성하고 지역 변수, 매개변수, arguments 객체를 관리해야 함.
생성한 지역 스코프를 전역 스코프에서 시작하는 스코프 체인의 일원으로 연결해야 함.
함수 코드가 평가되면 함수 실행 컨텍스트가 생성됨.
🔹 eval 코드
빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드
strict mode에서 자신만의 독자적인 스코프를 생성.
eval 코드가 평가되면 eval 실행 컨텍스트가 생성됨.
🔹 모듈 코드
모듈 내부에 존재하는 소스코드 (모듈 내부의 함수, 클래스 등의 내부 코드는 포함 X)
모듈별로 독립적인 모듈 스코프를 생성함.
모듈 스코프가 평가되면 모듈 실행 컨텍스트가 생성됨.

📁 소스코드의 평가와 실행

JS엔진은 소스코드를 2개의 과정, "소스코드의 평가"와 "소스코드의 실행" 과정으로 나누어 처리함.

🔹 소스코드의 평가

실행 컨텍스트를 생성 -> 변수, 함수 등의 선언문만 먼저 실행 -> 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록.
🔹 소스코드의 실행
소스코드 평가 과정이 끝나면, 선언문을 제외한 소스코드가 순차적으로 실행(런타임의 시작)
소스코드 실행에 필요한 정보(변수나 함수의 참조)를 실행 컨텍스트가 관리하는 스코프에서 검색해서 취득.
변수 값의 변경 등 소스코드의 실행 결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록됨.

📁 실행 컨텍스트의 역할

소스코드를 실행하는데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역.
식별자(변수, 함수, 클래스 덩의 이름)를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 매커니즘.
모든 코드는 실행 컨텍스트를 통해 실행되고 관리됨.
식별자와 스코프는 렉시컬 환경으로 관리하고 코드 실행 순서는 콜 스택으로 관리
🔹 전역 코드 평가
전역 코드의 변수 선언문과 함수 선언문이 먼저 실행됨.
선언문 실행에 의해 생성된 전역 변수와 전역 함수가 실행 컨텍스트가 관리하는 전역 스코프에 등록됨.
var키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수는 전역 객체의 각각 프로퍼티와 메서드가 됨.
🔹 전역 코드 실행
런타임이 시작되어 전역 코드가 순차적으로 실행됨.
전역 변수에 값이 할당되고 함수가 호출됨.
함수가 호출되면 순차적으로 실행되던 전역 코드의 실행을 일시 중단 하고 코드 실행 순서를 변경하여 함수 내부로 진입함.
🔹 함수 코드 평가
매개변수와 지역 변수 선언문이 먼저 실행됨.
선언문 실행에 의해 생성된 매개변수와 지역 변수가 실행 컨텍스트가 관리하는 지역 스코프에 등록됨.
또한 함수 내부에서 지역 변수처럼 사용할 수 있는 arguments 객체가 생성되어 지역 스코프에 등록되고 this 바인딩도 결정됨.
🔹 함수 코드 실행
런타임이 시작되어 함수 코드가 순차적으로 실행됨.
이때 매개변수와 지역 변수에 값이 할당되고 메서드가 호출됨.
함수 코드 실행 과정이 종료되면 함수 호출 이전으로 되돌아가 이어서 전역 코드 실행을 계속함.

※ 코드가 실행되려면 다음과 같이 스코프, 식별자, 코드 실행 순서 등의 관리가 필요

선언에 의해 생성된 모든 식별자(변수, 함수, 클래스 등)를 스코프를 구분하여 등록하고 상태 변화(식별자에 바인딩된 값의 변화)를 지속적으로 관리할 수 있어야 함.
스코프는 중첩 관계에 의해 스코프 체인을 형성해야 함. 즉, 스코프 체인을 통해 상위 스코프로 이동하여 식별자를 검색할 수 있어야 함.
현재 실행 중인 코드의 실행 순서를 변경(함수 호출에 의한 실행 순서 변경)할 수 있어야 하며 다시 되돌아갈 수도 있어야 함.

📁 실행 컨텍스트 스택

앞서 다뤘던 것 처럼, JS엔진은 소스코드를 평가(전역 코드 평가, 함수 코드 평가 등)하여 실행 컨텍스트를 생성함.
이때, 생성된 실행 컨텍스트들은 스택 자료구조로 관리됨. 이를 실행 컨텍스트 스택(콜 스택)이라고 부름.
콜 스택은 코드의 실행 순서를 관리함.

📁 렉시컬 환경

식별자와 식별자에 바인딩된 값. 그리고 상위 스코프에 대한 참조를 기록하는 자료구조로 실행 컨텍스트를 구성하는 컴포넌트임.
렉시컬 환경은 스코프와 식별자를 관리
렉시컬 환경은 키와 값을 갖는 객체 형태의 스코프(전역, 함수, 블록)를 생성하여 식별자를 키로 등록하고 식별자에 바인딩된 값을 관리.
렉시컬 환경은 스코프를 구분하여 식별자를 등록하고 관리하는 저장소 역할을 하는 렉시컬 스코프의 실체임.

📁 실행 컨텍스트의 생성과 식별자 검색 과정

🔹 전역 객체 생성

전역 객체는 전역 코드가 평가되기 이전에 생성됨.
이때, 전역 객체에는 빌트인 전역 프로퍼티와 빌트인 전역 함수, 그리고 표준 빌트인 객체가 추가되며 동작 환경 또는 특정 환경을 위한 호스트 객체를 포함함.
생성된 전역 객체도 Object.prototype을 상속 받음. 즉, 전역 객체도 프로토타입 체인의 일원임.
🔹 전역 코드 평가
소스코드가 로드되면 JS엔진은 전역 코드를 평가함.
1️⃣ 전역 실행 컨텍스트 생성
- 전역 실행 컨텍스트를 생성하여 콜스택에 푸시함.
2️⃣ 전역 렉시컬 환경 생성
- 전역 렉시컬 환경을 생성하고 전역 실행 컨텍스트에 바인딩함.
- 렉시컬 환경은 '환경 레코드'와 '외부 렉시컬 환경에 대한 참조'로 구성됨.
3️⃣ 전역 환경 레코드 생성
- 전역 변수를 관리하는 전역 스코프, 전역 객체의 빌트인 전역 프로퍼티와 빌트인 전역 함수, 표준 빌트인 객체를 제공함.
  - 전역 코드에서 this는 전역 객체를 가리키므로 전역 객체가 바인딩됨.
- 객체 환경 레코드:
  - 기존 var 키워드로 선언한 전역 변수와 함수 선언문으로 정의한 전역함수, 빌트인 전역 프로퍼티와 빌트인 전역 함수, 표준 빌트인 객체를 관리.
  - 전역 객체의 BindingObject와 연결됨. (이를 통해 전역 코드 평가 과정에서 선언된 전역변수와 전역함수가 전역 객체의 프로퍼티와 메서드가 됨)
- 선언적 환경 레코드:
  - let, const 키워드로 선언한 전역 변수를 관리.
4️⃣ this 바인딩
- '전역 환경 레코드'의 '[[GlobalThisValue]] 내부 슬롯'에 this가 바인딩됨.
5️⃣ 외부 렉시컬 환경에 대한 참조 결정
- 현재 평가 중인 소스코드를 포함하는 외부 소스코드의 렉시컬 환경, 즉 상위 스코프를 가리킴.
- 전역 코드를 포함하는 소스코드는 없으므로 null이 할당됨.
  🔹 전역 코드 실행
이제 전역 코드가 순차적으로 실행됨.
변수 할당문이 있는 경우 변수에 값이 할당됨.
- 식별자 결정을 위해 '실행 중인 실행 컨텍스트'에서 식별자를 검색하기 시작.
- '실행중인 실행 컨텍스트'의 '렉시컬 환경'에서 식별자를 검색할 수 없는 경우, '외부 렉시컬 환경에 대한 참조'가 가리키는 렉시컬 환경, 즉 상위 스코프로 이동하여 식별자를 검색.
  🔹 함수 코드 평가
함수 호출이 되면, JS엔진은 함수 코드의 평가를 시작함.
1️⃣ 함수 실행 컨텍스트 생성
- 함수 실행 컨텍스트를 생성하여 콜스택에 푸시함.
2️⃣ 함수 렉시컬 환경 생성
- 함수 렉시컬 환경을 생성하고 함수 실행 컨텍스트에 바인딩함.
- 함수 환경 레코드 생성:
  - 매개변수, arguments 객체, 함수 내부에서 선언한 지역 변수와 중첩 함수를 등록하고 관리.
- this 바인딩:
  - '함수 환경 레코드'의 [[ThisValue]] 내부 슬롯에 this가 바인딩됨.
  - 이 때에 this는 호출 방식에 따라 결정됨.
- 외부 렉시컬 환경에 대한 참조 결정:
  - 현재 실행중인 실행 컨텍스트의 렉시컬 환경의 참조가 할당됨.
  - 함수 객체의 '내부 슬롯 [[Environment]]'에 현재 실행 중인 실행 컨텍스트의 렉시컬 환경을 저장함.
    🔹 함수 코드 실행
호출된 함수의 소스코드가 순차적으로 실행됨.
매개변수에 인수가 할당되고, 변수 할당문이 실행되어 지역 변수에 값이 할당됨.
🔹 함수 코드 실행 종료
콜스택에서 함수 실행 컨텍스트가 팝되어 제거되고, 전역 실행 컨텍스트가 '실행 중인 실행 컨텍스트'가 됨.
🔹 전역 코드 실행 종료
더는 실행할 전역 코드가 없으면 전역 코드의 실행이 종료되고 전역 실행 컨텍스트도 콜스택에서 팝되어 콜스택은 비어있게 됨.

📁 실행 컨텍스트와 블록 레벨 스코프

let, const 키워드로 선언한 변수는 모든 코드 블록을 지역 스코프로 인정하는 블록 레벨 스코프를 따름.
코드 블록이 실행되면, 다음과 같이 동작하게됨.
- 1️⃣ 블록 렉시컬 환경 생성
  - 선언적 환경 레코드:
    - 블록 레벨 스코프 안의 변수들을 관리.
  - 외부 렉시컬 환경에 대한 참조 결정:
    - 코드블록이 실행되기 이전의 렉시컬 환경을 가리킴.
- 2️⃣ '현재 실행중인 실행 컨텍스트'의 렉시컬 환경을 교체:
  - 코드블록 실행 동안만 생성된 블록 렉시컬 환경으로 바인딩.
- 3️⃣ 코드블록 종료
  - 블록 렉시컬 환경의 '외부 렉시컬 환경에 대한 참조'를 통하여 현재 실행중인 실행 컨텍스트'의 렉시컬 환경을 되돌림.

[모딥다] 22장.this

Mon, 09 Feb 2026 03:52:03 GMT

22장. this

📁 this 키워드

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수임.
this는 JS엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조가 가능. 함수를 호출하게 되면 arguments 객체와 this가 암묵적으로 함수 내부에 전달됨.

this가 가리키는 값(this 바인딩)은 함수 호출 방식에 의해 동적으로 결정됨.

// 생성자 함수
function Circle(radius) {
  // this는 생성자 함수가 생성할 인스턴스를 가리킴
  this.radius = radius;
}

Circle.prototype.getDiameter = function () {
  // this는 생성자 함수가 생성할 인스턴스를 가리킴
  return 2 * this.radius;
}

// 인스턴스 생성
const circle = new Circle(5);
console.log(circle.getDiameter());  // 10

📁 함수 호출 방식과 this 바인딩

// this 바인딩은 함수 호출 방식에 따라 동적으로 결정됨
const foo = function () {
  console.dir(this);
};

// 1. 일반 함수 호출
foo();  // window

// 2. 메서드 호출
const obj = { foo };
obj.foo();  // obj

// 3. 생성자 함수 호출
new foo();  // foo {}

일반 함수 호출

기본적으로 this에는 전역 객체가 바인딩 됨.

function foo() {
  console.log("foo's this: ", this);  // window

  function bar() {
    console.log("bar's this: ", this);  // window
  }
  bar();
}
foo();

strict mode가 적용된 일반 함수 내부의 this에는 undefined가 바인딩됨.

function foo() {
  'use strict';

  console.log("foo's this: ", this);  // undefined

  function bar() {
    console.log("bar's this: ", this);  // undefined
  }
  bar();
}
foo();

일반 함수로 호출된 모든 함수(중첩 함수, 콜백 함수 포함) 내부의 this에는 전역 객체가 바인딩 됨.

var value = 1;

const obj = {
  value: 100,
  foo() {
    console.log("foo's this: ", this);  // {value: 100, foo: ⨍}
    // 콜백 함수 내부의 this에는 전역 객체가 바인딩 됨
    setTimeout(function () {
      console.log("callback's this: ", this);  // window
      console.log("callback's this.value", this.value);  // 1
    }, 100);
  }
};

obj.foo();

화살표 함수 내부의 this는 상위 스코프의 this를 가리킴

var value = 1;

const obj = {
  value: 100,
  foo() {
    // 화살표 함수 내부의 this는 상위 스코프의 this를 가리킴
    setTimeout(() => console.log(this.value), 100);  // 100
  }
};

메서드 호출

메서드 내부의 this는 메서드를 소유한 객체가 아닌 메서드를 호출한 객체에 바인딩 됨.

const person = {
  name: 'Lee',
  getName() {
    // 메서드 내부의 this는 메서드를 호출한 객체에 바인딩됨
    return this.name;
  }
};

// 메서드 getName을 호출한 객체는 person임
console.log(person.getName());  // Lee

const anotherPerson = {
  name: 'Kim'
};

// getName 메서드를 anotherPerson 객체의 메서드로 할당
anotherPerson.getName = person.getName;

// getName 메서드를 호출한 객체는 anotherPerson
console.log(anotherPerson.getName());  // Kim

// getName 메서드를 변수에 할당
const getName = person.getName;

// getName 메서드를 일반 함수로 호출
console.log(getName());  // ''

프로토타입 메서드 내부에서 사용된 this도 일반 메서드와 마찬가지로 해당 메서드를 호출한 객체에 바인딩 됨.

function Person(name) {
  this.name = name;
}

Person.prototype.getName = function () {
  return this.name;
};

const me = new Person('Lee');

// getName 메서드를 호출한 객체는 me
console.log(me.getName());  // Lee

Person.prototype.name = 'Kim';

// getName 메서드를 호출한 객체는 Person.prototype
console.log(Person.prototype.getName());  // Kim

생성자 함수 호출

생성자 함수 내부의 this에는 생성자 함수가 생성할 인스턴스가 바인딩됨.

// 생성자 함수
function Circle(radius) {
  // 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킴
  this.radius = radius;
  this.getDiameter = function () {
    return 2 * this.radius;
  };
}

// 반지름 5인 Circle 객체를 생성
const circle1 = new Circle(5);
// 반지름 10인 Circle 객체를 생성
const circle2 = new Circle(10);

console.log(circle1.getDiameter());  // 10
console.log(circle2.getDiameter());  // 20

Function.prototype.apply/call/bind 메서드에 의한 간접 호출

apply, call, bind 메서드는 Function.prototype의 메서드임.(모든 함수가 상속받아 사용 가능)

const user = { name: "현석" };

function greet(greeting, punctuation) {
  // 원래라면 this는 전역 객체(window)겠지만, call/apply/bind로 user를 가리키게 함
  console.log(`${greeting}, ${this.name}${punctuation}`);
}

// 1. call 사용 (인수를 쉼표로 나열하여 즉시 실행)
greet.call(user, "안녕하세요", "!"); 
// 출력: "안녕하세요, 현석!"

// 2. apply 사용 (인수를 배열로 묶어 전달하며 즉시 실행)
greet.apply(user, ["반갑습니다", "!!"]); 
// 출력: "반갑습니다, 현석!!"

// 3. bind 사용 (this가 바인딩된 '새로운 함수'를 반환, 즉시 실행 X)
const boundGreet = greet.bind(user); 

// 원하는 시점에 호출 (인수는 이때 전달하거나, bind 시 미리 전달 가능)
boundGreet("어서오세요", "..."); 
// 출력: "어서오세요, 현석..."

[모딥다] 21장.빌트인 객체

Mon, 09 Feb 2026 02:20:41 GMT

21장. 빌트인 객체

📁 자바스크립트 객체의 분류

표준 빌트인 객체:
- ECMAScript 사양에 정의된 객체.
- 전역의 공통 기능을 제공.
- ECMAScript 사양에 정의된 객체이므로 JS 실행 환경(브라우저 또는 Node.js 환경)과 관계없이 사용 가능.
- 표준 빌트인 객체는 전역 객체의 프로퍼티로서 제공됨. 따라서 별도의 선언 없이 전역 변수처럼 언제나 참조 가능.
호스트 객체:
- ECMAScript 사양에 정의되어 있지 않지만 JS 실행환경에서 추가로 제공하는 객체.
- 브라우저 환경: DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker와 같은 클라이언트 사이드 Web API를 호스트 객체로 제공.
- Node.js: Node.js 고유의 API를 호스트 객체로 제공.
사용자 정의 객체:
- 사용자가 직접 정의한 객체

📁 표준 빌트인 객체

JS는 Object, String, Number, Boolean, Symbol, Date, Math, RegExp, Array, Map/Set, WeakMap/WeakSet, Function, Promise, Reflect, Proxy, JSON, Error 등 40여 개의 표준 빌트인 객체를 제공.
Math, Reflect, JSON을 제외한 표준 빌트인 객체는 모두 생성자 함수 객체임.
생성자 함수 객체인 표준 빌트인 객체는 프로토타입 메서드와 정적 메서드를 제공.

📁 원시값과 래퍼 객체

야래 코드를 보면 원시값은 객체가 아니므로 프로퍼티나 메서드를 가질 수 없는데, 원시값인 문자열이 마치 객체처럼 동작함.

const str = 'hello';

// 원시 타입인 문자열이 프로퍼티와 메서드를 갖고 있는 객체처럼 동작
console.log(str.length);  // 5
console.log(str.toUpperCase());  // HELLO

원시값에 대해 객체처럼 접근하면 생성되는 임시 객체를 래퍼 객체라 함.
동작원리: 원시값에 대해 마침표 표기법(또는 대괄호 표기법)으로 접근 -> JS엔진이 일시적으로 원시값과 연관된 객체의 인스턴스 생성 -> 생성된 래퍼 객체의 내부 슬롯에 원시값 할당 -> 사용 종료시 내부 슬롯의 원시값으로 되돌림 -> 생성되었던 래퍼 객체는 가비지 컬렉션의 대상이 됨.
위와 같은 동작으로 생성된 래퍼 객체의 인스턴스는 프로토타입 메서드를 상속받아 사용할 수 있게 됨.
null과 undefined는 래퍼 객체를 생성하지 않음.

📁 전역 객체

코드가 실행되기 이전 JS엔진에 의해 어떤 객체보다 먼저 생성되는 특수한 객체. (어떤 객체에도 속하지 않는 최상위 객체)
JS환경에 따라 지칭하는 이름이 제각각
- 브라우저: window, self, this, frames
- Node.js: global

globalThis: ECMAScript2020에서 도입된 전역 객체를 가리키던 다양한 식별자를 통일한 식별자. globalThis는 표준 사양이므로 ECMAScript 표준 사양을 준수하는 모든 환경에서 사용 가능.

전역객체는 표준 빌트인 객체, 호스트 객체, var 키워드로 선언한 전역 변수와 전역함수를 프로퍼티로 갖음.
전역 객체는 계층적 구조상 어떤 객체에도 속하지 않은 모든 빌트인 객체의 최상위 객체(단, 이는 프로토타입 상속 관계상 최상위 객체란 의미와는 다름)
전역 객체는 개발자가 의도적으로 생성할 수 없음. 전역 객체를 생성할 수 있는 생성자 함수는 제공되지 않음.
전역 객체의 프로퍼티를 참조할 때 식별자를 생략할 수 있음.
빌트인 전역 프로퍼티
빌트인 전역 프로퍼티는 전역 객체의 프로퍼티를 의미. 주로 애플리케이션 전역에서 사용하는 값을 제공
Infinity:
- Infinity 프로퍼티는 무한대를 나타내는 숫자값 Infinity를 갖음.
NaN:
- NaN 프로퍼티는 숫자가 아님을 나타내는 숫자값 NaN을 갖음.
undefined:
- undefined 프로퍼티는 원시 타입 undefined를 값으로 갖음.
  빌트인 전역 함수
빌트인 전역 함수는 애플리케이션 전역에서 호출할 수 있는 빌트인 함수로서 전역 객체의 메서드임.
eval:
- eval 함수는 JS 코드를 나타내는 문자열을 인수로 전달 받음.
- 전달받은 문자열 코드가 표현식이라면 런타임에 평가하여 값을 생성하고, 전달받은 인수가 표현식이 아닌 문이라면 문자열 코드를 런타임에 실행함.
- 보안 이슈로 사용 금지.
isFinite:
- 전달받은 인수가 정상적인 유한수인지 검사하여 유한수이면 true, 무한수이면 false를 반환. NaN으로 평가되는 값이면 false를 반환.
isNaN:
- 전달받은 인수가 NaN인지 검사하여 그 결과를 불리언 타입으로 반환. 전달받은 인수가 숫자가 아닌 경우 숫자 타입을 변환 후 검사를 수행.
parseInt:
- 전달받은 문자열 인수를 정수로 해석하여 반환.
- 두 번째 인수로 진법을 나타내는 기수 전달 가능.
- 첫번째 인수가 두 번째 인수인 지수로 변환이 불가능 한 경우 NaN을 반환.
parseFloat:
- 전달받은 문자열 인수를 부동 소수점 숫자, 실수로 해석하여 반환
encodeURI / decodeURI:
- encodeURI 함수는 완전한 URI를 문자열로 전달받아 이스케이프 처리를 위해 인코딩 함.
- decodeURI 함수는 인코딩된 URI를 인수로 전달받아 이스케이프 처리 이전으로 디코딩함.
encodeURIComponent / decodeURIComponent
- encodeURIComponent 함수는 URI 구성 요소를 인수로 전달받아 인코딩 함.
- decodeURIComponent 함수는 매개변수로 전달된 URI 구성 요소를 디코딩함.
  암묵적 전역
JS엔진은 할당문을 만날 시 스코프 체인으로 스코프 어디에서도 변수 선언을 찾을 수 없으면 전역 객체에 프로퍼티를 동적으로 생성함. 이를 암묵적 전역 이라고 함.
이때 생성되는 프로퍼티는 변수가 아니므로 호이스팅이 발생하지 않음.
또한 변수가 아니라 단지 프로퍼티 이므로 delete 연산자로 삭제가 가능 (전역 변수는 프로퍼티이지만 delete 연산자로 삭제가 불가능)

[모딥다] 20장.strict mode

Mon, 09 Feb 2026 01:25:52 GMT

20장. strict mode

📁 strict mode

아래 코드를 보면 전역 스코프에 x변수의 선언이 존재하지 않아 RefferenceError를 발생시킬 것 같지반 JS 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성함. 이러한 현상을 암묵적 전역이라 함.
```
function foo() {
  x = 10;
}
foo();

console.log(x);
```
ES5 부터 JS문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 JS엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킬 수 있는 strict mode(엄격 모드)가 추가됨.
ES6에서 도입된 클래스와 모듈은 기본적으로 strict mode가 적용됨.
strict mode 보단 린트 도구의 사용을 지향.

📁 strict mode의 적용

전역의 선두 또는 함수 몸체의 선두에 'use strict';를 추가.

'use strict';

function foo() {
  x = 10;  // ReferenceError: x is not defined
}
foo();

function foo() {
  'use strict';

  x = 10;  // ReferenceError: x is not defined
}
foo();

📁 전역에 strict mode를 적용하는 것은 피하자

전역에 적용한 strict mode는 스크립트 단위로 적용됨.
strict mode와 non-strict mode 스크립트를 혼용하는 것은 오류를 발생시킬 수 있고, 특히 서드파티 라이브러리를 사용하는 경우 라이브러리가 non-strict mode인 경우도 있기 때문에 전역에 strict mode를 적용하는 것은 바람직 하지 않음. (이러한 경우는 즉시 실행 함수로 스크립트 전체를 감싸서 스코프를 구분하고 즉시 실행 함수의 선두에 strict mode를 적용)
```
(function () {
  'use strict';

  // Do something...
}());
```

📁 함수 단위로 strict mode를 적용하는 것도 피하자

함수 단위로 strict mode를 적용할 수 있으나, 어떤 함수는 적용하고 어떤 함수는 미적용 하는 것은 바람직하지 않으며 모든 함수에 일일이 strict mode를 적용하는 것은 번거로운 일임. 그리고 strict mode가 적용된 함수가 참조할 함수 외부의 컨텍스트에 strict mode를 적용하지 않는다면 이 또한 문제를 발생시킬 수 있음.
strict mode는 즉시 실행 함수로 감싼 스크립트 단위로 적용하는 것이 바람직함.

📁 strict mode가 발생시키는 에러

암묵적 전역

(function () {
  'use strict';

  x = 1;
  console.log(x);  // ReferenceError: x is not defined
}());

변수, 함수, 매개변수의 삭제

delete 연산자로 변수, 함수, 매개변수를 삭제하면 SyntaxError가 발생.

(function () {
  'use strict';

  var x = 1;
  delete x;  // SyntaxError: Delete of an unqualified identifier in strict mode.

  function foo(a) {
    delete a;  // SyntaxError: Delete of an unqualified identifier in strict mode.
  }
  delete foo;  // SyntaxError: Delete of an unqualified identifier in strict mode.
}());

매개변수 이름의 중복

중복된 매개변수 이름을 사용하면 SyntaxError가 발생.

(function () {
  'use strict';

  // SyntaxError: Duplicate parameter name not allowed in this context
  function foo(x, x) {
    return x + x;
  }
  console.log(foo(1, 2));
}());

with 문의 사용

with문을 사용하면 SyntaxError가 발생.
with문은 전달된 객체를 스코프 체인에 추가한다. 동일한 객체의 프로퍼티를 반복해서 사용할 때 객체 이름을 생략할 수 있어서 코드가 간단해지는 효과가 있지만, 성능과 가독성이 나빠지므로 사용하지 않는 것이 좋음.
```
(function () {
  'use clinet';

  // SyntaxError: Strict mode code may not include a with statement
  with({ x: 1 }) {
    console.log(x);     
  }
}());
```

📁 strict mode 적용에 의한 변화

일반 함수의 this

strict mode에서 함수를 일반 함수로서 호출하면 this에 undefined가 바인딩 됨.

생성자 함수가 아닌 일반 함수 내부에서 this를 사용할 필요가 없기 때문. (에러는 발생하지 않음)

(function () {
  'use strict';

  function foo() {
    console.log(this);  // undefined
  }
  foo();

  function Foo() {
    console.log(this);  // Foo
  }
  new Foo();
}());

arguments 객체

strict mode에서는 매개변수에 전달된 인수를 재할당하여 변경해도 arguments 객체에 반영되지 않음.

(function (a) {
  'use strict';
  // 매개변수에 전달된 인수를 재할당하여 변경
  a = 2;

  // 변경된 인수가 arguments 객체에 반영되지 않음
  console.log(arguments);  // { 0: 1, length: 1 }
}(1));

[모딥다] 19장.프로토타입

Mon, 02 Feb 2026 04:05:10 GMT

19장. 프로토타입

📁 객체지향 프로그래밍

실체: 특징이나 성질을 나타내는 속성을 가지고 있고, 이를 통해 실체를 인식하거나 구별 가능.
추상화: 다양한 속성 중에서 프로그램에 필요한 속성만 간추려 내어 표현하는 것.
객체: 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조.
객체지향 프로그래밍: 이러한 독립적인 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임.
- 객체의 상태를 나타내는 데이터와 상태 데이터를 조작할 수 있는 동작을 하나의 논리적 단위로 묶어서 생각함.
- 객체는 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조라 할 수 있음.
- 프로퍼티: 객체의 상태, 메서드: 객체의 동작

📁 상속과 프로토타입

객체지향 프로그래밍의 핵심 개념으로, 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것.

// 생성자 함수
function Circle(radius) {
  this.radius = radius;
  this.getArea = function () {
    return Math.PI * this.radius ** 2;
  }
}

const circle1 = new Cirecle(1);
const circle2 = new Cirecle(2);

// Circle 생성자 함수는 인스턴스를 생성할 때마다 동일한 동작을 하는
// getArea 메서드를 중복 생성하고 모든 인스턴스가 중복 소유함.
// getArea 메서드는 하나만 생성하여 모든 인스턴스가 공유해서 사용하는 것이 바람직함.
console.log(circle1.getArea === circle2.getArea);  // false

JS는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거.

// 생성자 함수
function Circle(radius) {
  this.radius = radius;
}

// Circle 생성자 함수가 생성한 모든 인스턴스가 getArea 메서드를
// 공유해서 사용할 수 있도록 프로토타입에 추가.
// 프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 바인딩 되어있음.
Circle.prototype.getArea = function () {
  return Math.PI * this.radius ** 2;
}

const circle1 = new Cirecle(1);
const circle2 = new Cirecle(2);

console.log(circle1.getArea === circle2.getArea);  // true

📁 프로토타입 객체

객체 간 상속을 구현하기 위해 사용됨.
어떠한 객체의 부모 객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티(메서드 포함)를 제공함.
프로토타입 객체를 상속받은 자식 객체는 부모 객체의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용 가능.
모든 객체는 [[Prototype]]이라는 내부 슬롯을 가지며, 이 내부 슬롯의 값은 프로토타입의 참조임. [[Prototype]]에 저장되는 프로토타입은 객체의 생성 방식에 따라 결정됨.
모든 객체는 하나의 프로토타입을 갖고, 그리고 모든 프로토타입은 생성자 함수와 연결되어 있음.
[[Prototype]] 내부 슬롯에 직접 접근할 수 없지만, __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입에 간접적으로 접근 가능.

프로토타입은 자신의 constructor 프로퍼티를 통해 생성자 함수에 접근할 수 있고, 생성자 함수는 자신의 prototype 프로퍼티를 통해 프로토타입에 접근할 수 있음.

[1. 생성자 함수 (Person)]
      |
      | (prototype 프로퍼티: "내 파트너는 쟤야")
      | ➡️ 참조값 저장
      |
      v
[2. 프로토타입 객체 (Person.prototype)]
      |
      | (constructor 프로퍼티: "나를 만든 건 쟤야")
      | ➡️ 참조값 저장 (역참조)
      |
      ^
      |
      | (__proto__ 접근자: "내 부모님은 쟤야")
      | ➡️ 참조값 매핑 (상속)
      |
[3. 인스턴스 (me)]

헷갈릴수 있는 포인트
- 생성자 함수를 사용하게 되면, 생성된 인스턴스의 [[prototype]] 내부슬롯은 부모 객체.prototype을 참조하게 됨.
- 즉, 인스턴스의 진짜 상속의 대상은 생성자 함수가 아닌, 그 생성자 함수의 prototype 객체임.
  __proto__ 접근자 프로퍼티
내부 슬롯은 프로퍼티가 아니기 때문에, JS는 원칙적으로 내부 슬롯과 내부 메서드에 직접적으로 접근하거나 호출 할 수 없음.
모든 객체는 __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입 객체, 즉 [[Prototype]] 내부 슬롯에 간접적으로 접근할 수 있음.

__proto__ 접근자 프로퍼티다.
접근자 프로퍼티는 자체적으로 값([[Value]] 프로퍼티 어트리뷰트)를 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수, [[Get]], [[Set]] 프로퍼티 어트리뷰트로 구성된 프로퍼티임.
__proto__ 프로퍼티를 통해 프로토타입에 접근하면 내부적으로 [[Get]]이 호출, 새로운 프로토타입을 할당하면, [[Set]]이 호출됨.
```
const obj = {};
const parent = { x: 1 };

obj.__proto__;
obj.__proto__ = parent;

console.log(obj.x);  // 1;
```
__proto__ 접근자 프로퍼티는 상속을 통해 사용됨.
__proto__ 접근자 프로퍼티는 객체가 직접 소유하는 프로퍼티가 아닌 Object.prototype의 프로퍼티임.

모든 객체는 상속을 통해 Object.prototype.__proto__ 프로퍼티를 사용할 수 있음.

const person = { name: 'Lee' };

// person 객체는 직접적으로 __proto__ 프로퍼티를 소유하지 않음.
console.log(person.hasOwnProperty('__proto__'));  // false

// 모든 객체는 Object.prototype의 접근자 프로퍼티 __proto__를 상속 받아 사용.
console.log({}.__proto__ === Object.prototype);  // true
console.log({}.__proto__ === person.__proto__);  // true

`proto` 접근자 프로퍼티를 통해 프로토타입에 접근하는 이유

상호 참조에 의해 프로토타입 체인이 생성되는 것을 방지하기 위해서임.

const parent = {};
const child = {};

child.__proto__ = parent;
parent.__proto__ = child;  // TypeError: Cyclic __proto__ value

위 코드 처럼 서로가 자신의 프로토타입이 되는 비정상적인 프로토타입 체인(순환 참조)이 만들어지기 전 __proto__ 접근자 프로퍼티는 에러를 발생시킴.

__proto__ 접근자 프로퍼티를 코드 내에 직접 사용하는 것은 권장하지 않음.

Object.getPrototypeOf 메서드와 Object.setPrototypeOf 메서드를 사용하는 것을 권장.

// 상속 받는 곳이 없는 순수 객체 생성
const obj = Object.create(null);

console.log(obj.__proto__);  // undefined

const obj = {};
const parent = { x: 1 };

Object.getPrototypeOf(obj);  // obj.__proto
Object.setPrototypeOf(obj, parent)  // obj.__proto__ = parent

console.log(obj);  // 1

함수 객체의 prototype 프로퍼티

함수 객체만이 소유하는 prototype 프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킴.
책이 너무 어렵게 설명하고 있는 거 같음. 어렵게 생각하지말고, 상속될 주체가 prototype이니까 함수에 의해 생성될 인스턴스가 가져갈 프로토타입을 갖는다 생각하자.
proto 접근자 프로퍼티는 모두가 갖고 있음. 왜? 부모 프로토타입에 접근하기 위해.
prototype 프로퍼티는 생성자 함수만 갖음.(화살표 함수를 제외한 함수가 다 갖고 있지만 생성자 함수가 아닌 함수들은 쓸모 없음) 왜? 자식 인스턴스에게 상속해야 되니까.

프로토타입의 constructor 프로퍼티와 생성자 함수

모든 프로토타입 객체는 constructor 프로퍼티를 갖음.

자신을 참조하고 있는 생성자 함수를 가리키려고.

// 생성자 함수
function Person(name) {
  this.name = name;
}

const me = new Person('Kim');

// me 객체의 생성자 함수는 Person
console.log(me.constructor === Person);  // true

const member1 = new Person('철수');

// member1이 뭘로 만들어졌는지 모르겠지만, 
// 걔를 만든 기계(constructor)를 가져와서 영희를 또 찍어내자!
const member2 = new member1.constructor('영희');

console.log(member2.name); // '영희'
console.log(member2 instanceof Person); // true

📁 리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입

책에서 겁나 어렵게 써있는데... JS엔진은 추상 연산을 통해 그에 맞는 생성자 함수와 프로토타입을 지정해 준다로 알고 넘어가면 될듯함.

리터럴 표기법	내부적으로 연결되는 생성자 함수	상속받는 프로토타입
객체 `{}`	Object	Object.prototype
함수 `function() {}`	Function	Function.prototype
배열 `[]`	Array	Array.prototype
정규표현식 `/abc/`	RegExp	RegExp.prototype

리터럴로 생성해도 생성자 함수와 같이 constructor와 __proto__가 연결됨.

// 1. 객체 리터럴
const obj = {};
console.log(obj.constructor === Object); // true
console.log(obj.__proto__ === Object.prototype); // true

// 2. 배열 리터럴
const arr = [1, 2, 3];
console.log(arr.constructor === Array); // true
console.log(arr.__proto__ === Array.prototype); // true

// 3. 함수 리터럴
const func = function() {};
console.log(func.constructor === Function); // true
console.log(func.__proto__ === Function.prototype); // true

프로토타입과 생성자 함수는 단독으로 존재할 수 없고 언제나 쌍으로 존재.

📁 프로토타입의 생성 시점

프로토타입 객체는 생성자 함수가 생성되는 시점에 더불어 생성됨.
생성자 함수는 '빌트인 생성자 함수'와 '사용자 정의 생성자 함수'로 구분.
사용자 정의 생성자 함수와 프로토타입 생성 시점
화살표 함수나, 메서드 축약 표현으로 정의 하지 않은 일반 함수로 정의한 함수 객체는 new 연산자와 함께 생성자 함수로 호출 가능.
생성자 함수로 호출할 수 있는 함수는 함수 정의가 평가되어 함수 객체를 생성하는 시점에, constructor를 프로퍼티로 갖는 프로토타입 객체도 더불어 생성됨.
이때 생성된 프로토타입 객체는 constructor 프로퍼티만을 갖는 객체이며, 생성된 프로토타입의 프로토타입은 Object.prototype임.
빌트인 생성자 함수와 프로토타입 생성 시점
모든 빌트인 생성자 함수는 전역 객체가 생성되는 시점에 생성되며, 각 생성된 프로토타입 객체는 빌트인 생성자 함수의 prototype 프로퍼티에 바인딩되 있음.
이후 생성자 함수 또는 리터럴 표기법으로 객체를 생성하면, 프로토타입은 생성된 객체의 [[Prototype]] 내부 슬롯에 할당됨.

📁 객체 생성 방식과 프로토타입의 결정

모든 객체는 추상 연산 OrdinaryObjectCreate에 의해 생성된다는 공통점이 있음.
이는 자신이 생성할 객체의 프로토타입을 인수로 전달 받고,
- 빈 객체를 먼저 생성.
- 인수로 전달된 프로퍼티 목록을 객체에 추가.
- 인수로 전달된 프로토타입을 생성한 객체의 [[Prototype]] 내부 슬롯에 할당.
- 생성된 객체를 반환.

📁 프로토타입 체인

JS는 객체의 프로퍼티에 접근하려고 할때 해당 객체에 접근하려는 프로퍼티가 없다면 [[Prototype]] 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색.
프로토타입 체인의 최상위에 위치하는 객체는 언제나 Object.prototype 임.

📁 오버라이딩과 프로퍼티 섀도잉

const Person = (function() {
  // 생성자 함수
  function Person(name) {
    this.name = name;
  }

  // 프로토타입 메서드
  Person.prototype.sayHello = function () {
    console.log(`Hi! My name is ${this.name}`)
  };

  // 생성자 함수를 반환
  return Person;
}());

const me = new Person('Kim');

// 인스턴스 메서드
me.sayHello = function () {
  console.log(`Hey! My name is ${this.name}`);
};

// 인스턴스 메서드가 호출됨. 프로토타입 메서드는 인스턴스 메서드에 의해 가려짐.
me.sayHello();  // Hey! My name is Kim

프로토타입 프로퍼티와 같은 이름의 프로퍼티를 인스턴스에 추가하면 프로토타입 체인을 따라 프로토타입 프로퍼티를 검색하여 프로토타입 프로퍼티를 덮어쓰는 것이 아닌 인스턴스 프로퍼티로 추가함.
이때 인스턴스 메서드 sayHello는 프로토타입 메서드 sayHello를 오버라이딩 했고, 프로토타입 메서드 sayHello는 가려지게 됨.

이를 프로퍼티 섀도잉이라고 함.

// 인스턴스 메서드 삭제
delete me.sayHello;

me.sayHello(); // Hi! My name is Kim

- 당연하게 프로토타입 메서드가 아닌 인스턴스 메서드 sayHello가 삭제됨.
```js
// 프로토타입 체인을 통해 프로토타입 메서드는 삭제되지 않음
delete me.sayHello;

me.sayHello();  // Hi! My name is Kim

하위 객체를 통해 프로토타입의 프로퍼티를 변경/삭제는 불가능.

// 프로토타입 메서드 변경
Person.prototype.sayHello = function () {
console.log(`Hey! My name is ${this.name}`);
};
me.sayHello();  // Hey! My name is Lee

// 프로토타입 메서드 삭제 delete Person.prototype.sayHello; me.sayHello(); // TypeError: me.sayHello is not a function

- 프로토타입 프로퍼티를 변경/삭제 하려면 하위 객체를 통해 프로토타입 체인 접근이 아닌 프로토타입에서 직접 접근해야 함.




## 📁 프로토타입의 교체
![](https://velog.velcdn.com/images/van_lan/post/06d0f1d9-ca84-41bd-a5fe-651ba5a02aed/image.png)




## 📁 instanceof 연산자
```js
객체 instanceof 생성자 함수

어렵게 생각하지말고, 우변인 생성자 함수의 prototype 프로퍼티가 가리키는 객체가 좌변인 객체의 프로토타입 체인 상에 존재하는지(__proto__ 접근자로 타고 올라가 접근이 가능한지)를 판별하는 거라고 보면 됨.

📁 직접 상속

Object.create에 의한 직접 상속

첫 번째 인자: 부모가 될 객체 (필수)

두 번째 인자: 태어날 객체의 속성 정의 (선택, 좀 복잡함)

// 부모가 될 객체
const myProto = { x: 10 };

// 1. "myProto를 부모로 삼는 객체 obj를 만들어라!"
// (두 번째 인자는 생략 가능하지만, 쓴다면 이렇게 디스크립터로 써야 함)
const obj = Object.create(myProto, {
  y: { value: 20, writable: true, enumerable: true, configurable: true }
});

console.log(obj.x); // 10
console.log(obj.y); // 20
console.log(Object.getPrototypeOf(obj) === myProto); // true

객체 리터럴 내부에서 proto에 의한 직접 상속

가장 쉽고 직관적인 방법

const myProto = { x: 10 };

// "객체를 만드는데, 내 부모(__proto__)는 myProto로 설정할게."
const obj = {
  y: 20,
  __proto__: myProto // 👈 여기서 바로 상속 지정!
};

console.log(obj.x); // 10 (상속됨)
console.log(Object.getPrototypeOf(obj) === myProto); // true

📁 정적 프로퍼티/메서드

생성자 함수로 인스턴스를 생성하지 않아도 참조/호출할 수 있는 프로퍼티/메서드를 말함.

// 생성자 함수
function Person(name) {
  this.name = name;
}

// 프로토타입 메서드
Person.prototype.sayHello = function () {
  console.log(`Hi! My name is ${this.name}`);
};

// 정적 프로퍼티
Person.staticProps = 'static prop';

// 정적 메서드
Person.staticMethod = function () {
  console.log('staticMethod');
}

const me = new Person('Kim');

// 생성자 함수에 추가한 정적 프로퍼티/메서드는 생성자 함수로 참조/호출
Person.staticMethod();

// 정적 프로퍼티/메서드는 인스턴스로는 참조/호출 불가
me.staticMethod();  // TypeError: me.staticMethod is not a function

생성자 함수가 생성한 인스턴스는 자신의 프로토타입 체인에 속한 객체의 프로퍼티/메서드에는 접근할 수 있지만, 정적 프로퍼티/메서드는 인스턴스의 프로토타입 체인에 속한 객체의 프로퍼티/메서드가 아니기 때문에 접근이 불가함.

📁 프로퍼티 존재 확인

in 연산자

key in object

// in 연산자 대신 Reflect.has 메서드를 사용할 수도 있음
Reflect.has(object, key);

Object.prototype.hasOwnPropery 메서드

인수로 전달받은 프로퍼티 키가 객체의 고유의 프로퍼티 키인 경우에만 true를 반환
상속 받은 프로토타입의 프로퍼티 키인 경우 false를 반환 함.

📁 프로퍼티 열거

for ... in 문

객체의 모든 프로퍼티를 순회하며 열거.
```
const person = {
name: 'Kim',
address: 'Seoul'
};
```

for (const key in person) { console.log(key + ': ' + person[key]); }

- 프로퍼티의 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 `true`인 것들만 순회하며 열거.
- 프로퍼티 키가 심벌인 프로퍼티는 열거하지 않음.
- 상속받은 프로퍼티는 제외하고 객체 자신의 프로퍼티만 열거하려면 `Object.prototype.hasOwnPropery` 메서드를 사용하여 조건부 확인 해야함.
- 프로퍼티를 열거할 때 순서를 보장하지 않음. (모던 브라우저는 순서를 보장)

### Object.keys/values/entries 메서드
```js
const person = {
  name: 'Kim',
  address: 'Seoul',
  __proto__: { age: 20 }
};

console.log(Object.keys(person));  // ["name", "address"]
console.log(Object.values(person));  // ["Kim", "Seoul"]
console.log(Object.entries(person));  // [["name", "Kim"], ["address", "Seoul"]]

[모딥다] 15장.let, const 키워드와 블록 레벨 스코프

Fri, 30 Jan 2026 02:56:07 GMT

📁 `var` 키워드로 선언한 변수의 문제점

변수 중복 선언 허용

var 키워드로 선언한 변수는 중복 선언이 가능.
이는 동일한 이름의 변수가 이미 선언되어 있는 것을 모르고 변수를 중복 선언하면서 값의 할당했다면 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 발생.

함수 레벨 스코프

var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정하게 됨.
고로, 함수 외부에서 var 키워드로 선언한 변수는 코드 블록(조건문, 반복문 등) 내에서 선언해도 모두 전역 변수가 됨.
함수 레벨 스코프는 전역 변수를 남발할 가능성을 높이고, 이로 인해 의도치 않게 전역 변수가 중복 선언되는 경우가 발생할 수 있음.

변수 호이스팅

var 키워드로 변수를 선언하면 호이스팅에 의해 변수 선언문 이전에 변수를 참조할 수 있음.
이는 에러를 발생시키지는 않지만 프로그램의 흐름상 맞지 않을 뿐더러 가독성을 떨어뜨리고 오류 발생의 여지를 남김.

📁 `let` 키워드

변수 중복 선언 금지

let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러가 발생.

var foo = 123;
var foo = 456;

let bar = 123;
let bar = 456;  // SyntaxError: Identifier 'bar' has already declared

블록 레벨 스코프

let 키워드로 선언한 변수는 모든 코드 블록(함수, 조건문, 반복문, try/catch 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따름.
```
let foo = 1;  // 전역 변수
{
  let foo = 2;  // 지역 변수
  let bar = 3;  // 지역 변수
}

console.log(foo);  // 1
console.log(bar);  // ReferenceError: bar is not defined
```
변수 호이스팅
var 키워드와 달리 let 키워드로 선언한 변수는 호이스팅이 발생하지 않는 것처럼 동작함.
let 키워드로 선언한 변수는 "선언단계"와 "초기화 단계"가 분리되어 진행.
"초기화 단계"가 실행되기 이전에 변수에 점근하려고 하면, 참조 에러가 발생.
```
console.log(foo);  // ReferenceError: foo is not defined

let foo;  // 변수 선언문에서 초기화 단계가 실행
console.log(foo);  // undefined

foo = 1;  // 할당문에서 할당 단계가 실행
console.log(foo);  // 1
```
※ 일시적 사각지대(TDZ): let 키워드로 선언한 변수는 "스코프의 시작 지점"부터 "초기화 시작 지점"까지 변수를 참조할 수 없는 구간
위와 같은 이유로 호이스팅은 발생하지만, 호이스팅이 발생하지 않는 것처럼 동작.

전역 객체와 let

var 키워드와 달리 let 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아님.
let 전역 변수는 보이지 않는 개념적인 블록(전역 렉시컬 환경의 선언적 환경 레코드) 내에 존재하게 됨.

📁 `const` 키워드

const 키워드의 특징은 let 키워드와 대부분 동일함.
선언과 초기화
const 키워드로 선언한 변수는 선언과 동시에 반드시 초기화 해줘야 함.
```
const foo;  // SyntaxError: Missing initializer in const declaration
```
재할당 금지

const 키워드로 선언한 변수는 재할당이 금지됨.

const foo = 1;
foo = 2;  // TypeError: Assignment to constant variable.

상수

재할당이 금지된 변수를 말함.
const 키워드로 선언된 변수에 원시 값을 할당한 경우 원시 값은 변경할 수 없는 값이고, const 키워드에 의해 재할당이 금지되므로 할당된 값을 변경할 수 있는 방법은 없음.
일반적으로 상수의 이름은 대문자로 선언해 상수임을 명확이 나타내야 함.

const 키워드와 객체

const 키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있음.
const 키워드는 재할당을 금지할 뿐 "불변"을 의미하지 않음.
```
const person = {
name: 'Lee'
};
```

// 객체는 변경 가능한 값이기 때문에 재할당 없이 변경 가능 person.name = 'Kim';

console.log(person); // {name: "Kim"}

// 재할당이 일어남으로 불가 person = { ...person } // TypeError: Assignment to constant variable.

```

📁 `var` vs `let` vs `const`

ES6를 사용한다면 var 키워드 사용 금지
재할당이 필요한 경우에 한정해 let 키워드 사용. (변수의 스코프는 최대한 좀게)
변경이 발생하지 않고 긿기 전용으로 사용하는 원시 값과 객체는 const 키워드를 사용.

[모딥다] 14장. 전역 변수의 문제점

Fri, 30 Jan 2026 02:14:49 GMT

📁 변수의 생명 주기

지역 변수의 생명 주기

함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸.

지역 변수의 생명 주기는 함수의 생명 주기와 대부분 일치.

function foo() {
  var x = 'local';  // 변수 x 생성/할당
  console.log(x);
  return x;  // 변수 x 소멸
}

foo();
console.log(x);  // ReferenceError: x is not defined

호이스팅은 스코프를 단위로 동작함.

var x = 'global';

function foo() {
  console.log(x);  // undefined
  var x = 'local';
}

foo();
console.log(x);  // global

전역 변수의 생명 주기

var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 됨. (전역 변수의 생명주기가 전역 객체의 생명 주기와 일치)

※ 전역 객체: 코드가 실행되기 이전 단계에 JS엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체. 클라이언트 사이드: window, 서버사이드: global 전역 객체는 표준 빌트인 객체(Object, String, Number, Function, Array, ...)와 환경에 따른 호스트 객체, var 키워드로 선언한 전역 변수와 전역 함수를 프로퍼티로 갖음.

📁 전역 변수의 문제점

암묵적 결합

모든 코드가 전역 변수를 참조하고 변결할 수 있는 암묵적 결합이 허용됨.
변수의 유효 범위가 크면 클 수록 코드의 가독성은 나빠지고 의도치 않게 상태가 변경될 수 있는 위험성도 높아짐.

긴 생명 주기

전역 변수는 생명주기가 길기 때문에, 메모리 리소스도 오랜 기간 소모하게 됨.
생명 주기가 긴 만큼 변수 이름이 중복될 가능성이 있어, 의도치 않은 재할당이 이뤄질 수 있음.

스코프 체인 상에서 종점에 존재

JS엔진이 스코프 체인을 따라 변수를 검색할 때 가장 마지막에 검색됨. (전역 변수의 검색이 가장 느림, 검색 속도의 차이는 그다지 크지 않지만 속도의 차이는 분명하게 있음)

네임스페이스 오염

JS는 파일이 분리되어 있다고 해도, 하나의 전역 스코프를 공유하게 됨.
다른 파일 내에서 동일한 이름으로 명명된 전역 변수나 전역 함수가 같은 스코프 내에 존재할 경우 의도치 않은 결과를 가져올 수 있음.

📁 전역 변수의 사용을 억제하는 방법

전역 변수를 반드시 사용해야할 이유가 없다면, 지역 변수를 사용.
변수의 스코프는 좁을수록 좋음.

즉시 실행 함수

함수 정의와 동시에 호출되는 즉시 실행 함수는 단 한번만 호출됨.

모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 됨.

(function () {
  var foo = 10;  // 즉시 실행 함수의 지역 변수
}());

console.log(foo);  // ReferenceError: foo is not defined

주로 라이브러리에서 사용됨.

네임스페이스 객체
전역에 네임스페이스 역할을 담당할 객체를 생성하고 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가하는 방법.

네임스페이스 객체에 또 다른 네임스페이스 객체를 프로퍼티로 추가해서 계층적으로 구성 가능.

var MYAPP = {};  // 전역 네임스페이스 객체

MYAPP.person = {
  name: 'Lee',
  address: 'Seoul'
}

console.log(MYAPP.person.name);  // Lee

모듈 패턴

JS의 강력한 기능인 클로저를 기반으로 동작함.

모듈 패턴의 특징은 전역 변수의 억제는 물론 캡슐화까지 구현할 수 있다는 것임.

※ 캡슐화: 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것. 객체의 특정 프로퍼티나 메서드를 감출 목적으로 사용하기도 하는데 이를 정보 은닉이라 함.

var Counter = (function () {
  // private 변수
  var num = 0;

  // 외부로 공개할 데이터나 메서드를 프로퍼티로 추가한 객체를 반환
  return {
    increase() {
      return ++num;
    },
    decrease() {
      return --num;
    }
  };
}());

// private 변수는 외부로 노출되지 않음
console.log(Counter.num);  // undefined

console.log(Counter.increase());  // 1
console.log(Counter.decrease());  // 0

ES6 모듈

ES6 모듈은 파일 자체의 독자적인 모듈 스코프를 제공함.
모듈 내에서 var 키워드로 선언한 변수는 더는 전역 변수가 아니며 전역 객체의 프로퍼티도 아님.

📁 의문점

그렇다면, 현대의 Vite와 Webpack들은 모듈과 ES6 모듈을 어떻게 사용하는 걸까?
- 개발 환경 (Vite): "진짜 ES6 모듈을 쓴다"
  - npm run dev시, Vite는 번들링을 하지 않음.
  - Native ESM: ES6 모듈을 그대로 사용(import/export)
  - 동작: 브라우저가

van_lan.log

[모딥다] 38장. 브라우저의 렌더링 과정

38장. 브라우저의 렌더링 과정

📁 브라우저 렌더링 과정

📁 요청과 응답

📁 HTTP/1.1과 HTTP/2.0

📁 HTML 파싱과 DOM 생성

DOM 생성 과정

📁 CSS 파싱과 CSSOM 생성

📁 렌더 트리 생성

📁 자바스크립트 파싱과 실행

JS엔진의 파싱과 실행 과정

🔹토크나이징

🔹파싱

🔹바이트코드 생성과 실행

📁 리플로우와 리페인트

1. 리플로우

2. 리페인트

📁 script 태그의 async/defer 어트리뷰트

1. async 어트리뷰트

2. defer 어트리뷰트

[모딥다] 37장. Set과 Map

37장. Set과 Map

📁 Set

1. Set 객체의 생성

2. 요소 개수 확인

3. 요소 추가

4. 요소 존재 여부 확인

5. 요소 삭제

6. 요소 일괄 삭제

7. 요소 순회

8. 집합 연산

🔹교집합

🔹차집합

🔹부분 집합과 상위 집합

📁 Map

1. Map 객체의 생성

2. 요소 개수 확인

3. 요소 추가

4. 요소 취득

5. 요소 존재 여부 확인

6. 요소 삭제

7. 요소 일괄 삭제

8. 요소 순횐

[모딥다] 36장. 디스트럭처링 할당

36장. 디스트럭처링 할당

📁 배열 디스트럭처링 할당

📁 객체 디스트럭처링 할당

[모딥다] 35장. 스프레드 문법

35장. 스프레드 문법

📁 함수 호출문의 인수목록에서 사용

📁 배열 리터럴 내부에서 사용

1. concat

2. splice

3. 배열 복사

4. 이터러블을 배열로 변환

📁 객체 리터럴 내부에서 사용

[모딥다] 34장. 이터러블

34장. 이터러블

📁 이터레이션 프로토콜

1. 이터러블

2. 이터레이터

📁 빌트인 이터러블

📁 for ...of 문

📁 이터러블과 유사 배열 객체

📁 이터레이션 프로토콜의 필요성

📁 사용자 정의 이터러블

1. 사용자 정의 이터러블 구현

2. 이터러블을 생성하는 함수

3. 이터러블이면서 이터레이터인 객체를 생성하는 함수

4. 무한 이터러블과 지연평가

📁 제너레이터

[모딥다] 33장. Symbol

33장. Symbol

📁 심벌이란?

📁 심벌 값의 생성

1. Symbol 함수

2.Symbol.for / Symbol.keyFor 메서드

2-1. Symbol.for 메서드

2-2. Symbol.keyFor 메서드