From f642afcee568997c9684da855482346b482d21d6 Mon Sep 17 00:00:00 2001
From: zzzzzuuuuu <agu0830@naver.com>
Date: Sun, 9 Mar 2025 18:51:36 +0900
Subject: [PATCH] =?UTF-8?q?docs:=20chapter26=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../\354\225\210\354\247\200\354\234\240.md"  | 319 ++++++++++++++++++
 1 file changed, 319 insertions(+)
 create mode 100644 "26. ES6 \355\225\250\354\210\230\354\235\230 \354\266\224\352\260\200 \352\270\260\353\212\245/\354\225\210\354\247\200\354\234\240.md"

diff --git "a/26. ES6 \355\225\250\354\210\230\354\235\230 \354\266\224\352\260\200 \352\270\260\353\212\245/\354\225\210\354\247\200\354\234\240.md" "b/26. ES6 \355\225\250\354\210\230\354\235\230 \354\266\224\352\260\200 \352\270\260\353\212\245/\354\225\210\354\247\200\354\234\240.md"
new file mode 100644
index 0000000..91e8b00
--- /dev/null
+++ "b/26. ES6 \355\225\250\354\210\230\354\235\230 \354\266\224\352\260\200 \352\270\260\353\212\245/\354\225\210\354\247\200\354\234\240.md"	
@@ -0,0 +1,319 @@
+# 26.1 함수의 구분
+
+- ES6 이전까지의 자바스크립트 함수
+    - 별다른 구분 없이 다양한 목적으로 사용됨
+        - 일반 함수, 생성자 함수, 메서드
+    - 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서도 호출 가능 (callable, constructor)
+    - 메서드(객체에 바인딩된 함수)도 일반 함수로 호출 및 생성자 함수로서 호출 가능
+        - 객체에 바인딩된 함수가 constructor라는 것은 객체에 바인딩된 함수가 prototype 프로퍼티를 가지며, 프로토타입 객체도 생성한다는 것을 의미
+    - 함수에 전달되어 보조 함수의 역할을 수행하는 콜백 함수도 constructor → 불필요한 프로토타입 객체 생성
+
+```jsx
+var foo = function () {
+	return 1;
+};
+
+// 일반적인 함수로서 호출
+foo(); // 1
+
+// 생성자 함수로서 호출
+new foo(); // foo {}
+
+// 메서드로서 호출
+var obj = { foo: foo };
+obj.foo(); // 1
+```
+
+⇒ 호출 방식에 특별한 제약이 없고 생성자 함수로 호출되지 않아도 프로토타입 객체를 생성하는 것은 혼란스러우며 실수를 유발할 가능성을 높이고, 성능에도 좋지 않음
+
+- ES6에서의 함수
+
+
+    | **ES6 함수의 구분** | **constructor** | **prototype** | **super** | **arguments** |
+    | --- | --- | --- | --- | --- |
+    | 일반함수(Normal) | O | O | X | O |
+    | 메서드(Method) | X | X | O | O |
+    | 화살표 함수(Arrow) | X | X | X | X |
+    - 일반 함수는 constructor, ES6 메서드와 화살표 함수는 non-constructor
+
+# 26.2 메서드
+
+- ES6 이전 사양
+    - 메서드에 대한 명확한 정의 X
+    - 일반적으로 객체에 바인딩된 함수를 일컫는 의미로 사용됨
+- ES6 사양
+    - 메서드 축약 표현으로 정의된 함수만을 의미
+    - 인스턴스를 생성할 수 없는 non-constructor
+    - 생성자 함수로서 호출 불가
+    - prototype 프로퍼티 없음, 프로토타입 생성X
+    - 표준 빌트인 객체가 제공하는 프로토타입 메서드와 정적 메서드 모두 non-contructor
+    - 자신을 바인딩한 객체를 가리키는 내부 슬롯 `[[HomeObject]]`를 가짐
+        - `[[HomeObject]]`를 갖는 ES6 메서드는 **super** 키워드 사용 가능
+        - ES6 메서드가 아닌 함수는 내부 슬롯 `[[HomeObject]]`을 갖지 않음
+
+        ```jsx
+        const base = {
+        	name: 'Ahn',
+        	sayHi() {
+        		return `Hi! ${this.name}`;
+        	}
+        };
+        
+        const derived = {
+        	__proto__: base,
+        	// sayHi의 [[HomeObject]]는 sayHi가 바인딩된 객체 derived를 가리킴
+        	// super는 sayHi의 [[HomeObject]]인 프로토타입인 base를 가리킴
+        	sayHi() {
+        		return `${super.sayHi()}. how are you doing?`;
+        	}
+        };
+        
+        console.log(derived.sayHi()); // Hi! Ahn. how are you doing?
+        ```
+
+    - ES6 메서드는 본연의 기능(super)을 추가하고 의미적으로 맞지 않은 기능(constructor)는 제거함
+
+# 26.3 화살표 함수
+
+- `function` 키워드 대신 화살표(⇒, fat arrow)를 사용하여 간략하게 함수 정의 가능
+    - 표현뿐만 아니라 내부 동작도 기존의 함수보다 간략
+- 콜백 함수 내부에서 `this`가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용
+
+## 26.3.1 화살표 함수 정의
+
+### 함수 정의
+
+- 함수 선언문으로 정의 불가, 함수 표현식으로 정의
+- 호출 방식은 기존 함수와 동일
+
+### 매개변수 선언
+
+- 매개변수가 여러 개인 경우 소괄호 () 안에 매개변수 선언
+- 매개변수가 한 개인 경우 소괄호 생략 가능
+- 매개변수가 없는 경우 소괄호 생략 불가
+
+### 함수 몸체 정의
+
+- 함수 몸체가 하나의 문으로 구성된다면 함수 몸체를 감싸는 중괄호 {} 생략 가능
+    - 함수 몸체 내부의 문이 값으로 평가될 수 있는 표현식인 문이라면 암묵적으로 반환됨
+
+```jsx
+const power = x => x ** 2;
+power(2); // 4
+
+// 위 표현이랑 동일
+const power = x => { return x ** 2 };
+```
+
+- 함수 몸체를 감싸는 중괄호를 생략한 경우 함수 몸체 내부의 문이 표현식이 아닌 문이라면 에러 발생 (반환 불가하기 때문)
+- 함수 몸체가 하나의 문으로 구성되더라도 함수 몸체의 문이 표현식이 아닌 문이라면 중괄호 생략 불가
+- 객체 리터럴 반환시 객체 리터럴을 소괄호 ()로 감싸주어야 함
+    - 객체 리터럴을 소괄호로 감싸지 않으면 객체 리터럴의 중괄호를 함수 몸체를 감싸는 중괄호로 잘못 해석하기 때문
+
+```jsx
+const create = (id, content) => ({ id, content });
+create(1, 'JavaScript'); // {id: 1, content: "JavaScript"}
+
+// 위 표현이랑 동일
+const create = (id, content) => { return { id, content }; };
+```
+
+- 함수 몸체가 여러 개의 문으로 구성된다면 함수 몸체를 감싸는 중괄호 생략 불가
+    - 반환값 명시적으로 반환해야 함
+- 화살표 함수도 즉시 실행 함수로 사용 가능
+
+```jsx
+const person = (name => ({
+	sayHi() { return `Hi? My name is ${name}.`; }
+}))('Ahn');
+
+console.log(person.sayHi()); // Hi? My name is Ahn.
+```
+
+- 화살표 함수도 일급 객체이므로 고차 함수에 인수 전달 가능
+    - Array.prototype.map, Array.prototype.filter, Array.prototype.reduce 등
+- 화살표 함수는 콜백 함수로서 정의할 때 유용함
+
+## 26.3.2 화살표 함수와 일반 함수의 차이
+
+> **1️⃣ 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor**
+>
+- 화살표 함수는 인스턴스를 생성할 수 없으므로 prototype 프로퍼티가 없고, 프로토타입도 생성하지 않음
+
+> **2️⃣ 중복된 매개변수 이름 선언 불가**
+>
+- 일반 함수는 중복된 매개변수 이름을 선언해도 에러 발생 X
+    - 단, strict mode에서 중복된 매개변수 이름 선언시 에러 발생
+- 화살표 함수에서는 중복된 매개변수 이름 선언시 에러 발생
+
+> 3️⃣ 화살표 함수는 함수 자체의 `this`, `arguments`, `super`, `new.target` 바인딩을 갖지 않음
+>
+- 화살표 함수 내부에서 `this`, `arguments`, `super`, `new.target` 참조시 스코프 체인을 통해 상위 스코의 `this`, `arguments`, `super`, `new.target` 참조
+
+## 26.3.3 `this`
+
+- 화살표 함수와 일반 함수와 가장 구별되는 가장 큰 특징
+- 화살표 함수는 다른 함수의 인수로 전달되어 콜백 함수로 사용되는 경우가 많음
+
+### 콜백 함수 내부의 `this` 문제
+
+- `this` 바인딩은 함수의 호출 방식, **즉 함수가 어떻게 호출되었는지에 따라 동적으로 결정됨**
+- 일반 함수로서 호출되는 콜백 함수의 경우, 고차 함수의 인수로 전달되어 고차 함수 내부에서 호출되는 콜백 함수도 중첩 함수가 됨
+
+```jsx
+class Prefixer {
+	constructor(prefix) {
+		this.prefix = prefix;
+	}
+	
+	add(arr) {
+	// add 메서드는 인수로 전달된 배열 arr을 순회하며 배열의 모든 요소에 prefix를 추가
+	// (1)
+	return arr.map(function (item) {
+		return this.prefix + item; // (2)
+		// -> TypeError: Cannot read property 'prefix' of undefined
+		});
+	}
+}
+
+const prefixer = new Prefixer('-webkit-');
+console.log(prefixer.add(['transition', 'user-select']));
+```
+
+→ (1)에서 this는 메서드를 호출한 객체(prefixer 객체)를 가리키고, (2)에서 `this`는 undefined를 가리킴.
+
+클래스 내부의 모든 코드에서는 strict mode가 적용되고, strict mode에서 일반 함수로서 호출된 모든 함수 내부의 `this`에는 전역 객체가 아닌 undefined가 바인딩되므로 콜백 함수의 `this`(2)와 외부 함수의 `this`(1)가 서로 다른 값을 가리키고 있기 때문에 TypeError 발생
+
+### ES6 화살표 함수로 해결
+
+```jsx
+class Prefixer {
+	constructor(prefix) {
+		this.prefix = prefix;
+	}
+	
+	add(arr) {
+		return arr.map(item => this.prefix + item);
+	}
+}
+
+const prefixer = new Prefixer('-webkit-');
+console.log(prefixer.add(['transition', 'user-select']));
+// ['-webkit-transition', '-webkit-user-select']
+```
+
+- **lexical this**
+    - 화살표 함수는 함수 자체의 `this` 바인딩을 갖지 않으므로 화살표 함수 내에서 `this`를 참조하면 상위 스코프의 `this`를 그대로 참조
+- 화살표 함수 내부에서 `this`를 참조하면 일반적인 식별자처럼 스코프 체인을 통해 상위 스코프에서 `this`를 탐색
+
+```jsx
+// Function.prototype.bind 를 사용하여 표현
+
+() => this.x;
+
+function () { return this.x; }).bind(this);
+```
+
+- 화살표 함수와 화살표 함수가 중첩되어 있다면 스코프 체인 상에서 가장 가까운 상위 함수 중에서 화살표 함수가 아닌 함수의 `this` 참조
+- 화살표 함수가 전역 함수라면 화살표 함수의 `this`는 전역 객체를 가리킴
+- 프로퍼티에 할당한 삼수도 스코프 체인 상에서 가장 가까운 상위 함수 중에서 화살표 함수가 아닌 함수의 `this` 참조
+- 화살표 함수는 함수 자체의 this 바인딩을 갖지 않기 때문에 Function.prototype.call, Function.prototype.apply, Function.prototype.bind 메서드를 사용해도 화살표 함수 내부의 `this` 교체 불가
+- 메서드를 정의할 때는 화살표 함수가 아닌 ES6 메서드 축약 표현으로 정의한 ES6 메서드 사용
+- 프로토타입 객체의 프로퍼티를 동적 추가할 때는 일반 함수를 할당
+    - ES6 메서드를 동적 추가하고 싶다면 객체 리터럴 바인딩 후 프로토타입의 constructor 프로퍼티와 생성자 함수 간의 연결 재설정
+
+    ```jsx
+    function Person(name) {
+    	this.name = name;
+    }
+    
+    Person.prototype = {
+    	// constructor 프로퍼티와 생성자 함수 간의 연결 재설정
+    	constructor: Person,
+    	sayHi() { console.log(`Hi ${this.name}`); }
+    };
+    
+    const person = new Person('Ahn');
+    person.sayHi(); // Hi Ahn
+    ```
+
+- 클래스 필드 정의 제안을 사용하여 클래스 필드에 화살표 함수 할당이 가능하나, 클래스 필드에 할당한 화살표 함수는 프로토타입 메서드가 아닌 인스턴스 메서드가 되므로 메서드를 정의할 때는 ES6 메서드 축약 표현으로 정의된 메서드 사용을 권장
+
+## 26.3.4 `super`
+
+- 화살표 함수는 함수 자체의 `super` 바인딩을 갖지 않음
+- 함수 내부에서 `super`를 참조하면 `this`와 마찬가지로 상위 스코프의 `super`를 참조
+- 내부 슬롯 `[[HomeObject]]`를 갖는 ES6 메서드 내에서만 사용할 수 있는 키워드
+
+## 26.3.5 `arguments`
+
+- 화살표 함수는 함수 자체의 `arguments` 바인딩을 갖지 않음
+- 함수 내부에서 `arguments` 참조시 `this`와 마찬가지로 상위 스코프의 `arguments` 참조
+- 화살표 함수에서 상위 스코프의 `arguments` 객체 참조는 가능하나, 화살표 함수 내부에서 `arguments` 객체 사용 불가하기 때문에 자신에게 전달된 인수 목록 확인 불가
+- 화살표 함수로 가변 인자 함수를 구현시 Rest 파라미터 사용
+
+# 26.4 `Rest` 파라미터
+
+## 26.4.1 기본 문법
+
+- 매개변수 이름 앞에 세개의 점 `…`을 붙여서 정의한 매개변수를 의미
+- Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받음
+    - 일반 매개변수와 함께 사용 가능
+    - 함수에 전달된 인수들은 매개변수와 Rest 파라미터에 순차적으로 할당됨
+
+```jsx
+function foo(...rest) {
+	// 매개변수 rest는 인수들의 목록을 배열로 전달받는 Rest 파라미터
+	console.log(rest); // [ 1, 2, 3, 4, 5 ]
+}
+
+foo(1, 2, 3, 4, 5);
+```
+
+```jsx
+function foo(param, ...rest) {
+	console.log(param); // 1
+	console.log(rest); // [ 2, 3, 4, 5 ]
+}
+
+foo(1, 2, 3, 4, 5);
+```
+
+- 먼저 선언된 매개변수에 할당된 인수를 제외한 나머지 인수들로 구성된 배열이 할당되므로 Rest 파라미터는 반드시 마지막 파라미터이어야 함
+- 단 하나만 선언 가능
+- 함수 정의 시 선언한 매개변수 개수를 나타내는 함수 객체의 `length`에 영향을 주지 않음
+
+## 26.4.2 Rest 파라미터와 arguments 객체
+
+- ES5에서는 함수를 정의할 때 매개변수의 개수를 확정할 수 없는 가변 인자 함수의 경우 `arguments` 객체를 활용하여 인수를 전달받고, `arguments` 객체는 배열이 아닌 유사 배열 객체이므로 Function.prototype.call이나 Functionprototype.apply 메서드를 사용해 `arguments` 객체를 배열로 변환해야 하는 번거로움 존재
+- ES6에서는 Rest 파라미터를 사용하여 가변 인자 함수의 인수 목록을 배열로 직접 전달받을 수 있음 ⇒ 유사 배열 객체인 `arguments` 객체를 배열로 변환하는 번거로움 해결
+
+```jsx
+function sum(...args) {
+	// Rest 파라미터 args에는 배열 [1, 2, 3, 4, 5]가 할당됨
+	return args.reduce((pre, cur) => pre + cur, 0);
+}
+
+console.log(sum(1, 2, 3, 4, 5)); // 15
+```
+
+- 함수와 ES6 메서드는 Rest 파라미터와 arguments 객체 모두 사용 가능
+    - 화살표 함수는 함수 자체의 `arguments`를 갖지 않으므로 가변 인자 함수 구현시 반드시 Rest 파라미터 사용
+
+# 26.5 매개변수 기본값
+
+- 자바스크립트 엔진은 매개변수의 개수와 인수의 개수를 체크하지 않음.
+    - 인수가 전달되지 않은 매개변수의 값은 undefined
+- 매개변수에 인수가 전달되었는지 확인하여 인수가 전달되지 않은 경우 매개변수에 기본 값 할당 필요 (방어 코드)
+- ES6에서 도입된 매개변수 기본값 사용시 함수 내에서 수행하던 인수 체크 및 초기화 간소화 가능
+    - Rest 파라미터에는 기본값 지정 불가
+- 매개변수 기본값은 함수 정의 시 선언한 매개변수 개수를 나타내는 함수 객체의 `length` 프로퍼티와 `arguments` 객체에 아무런 영향을 주지 않음
+
+```jsx
+function sum(x = 0, y = 0) {
+	return x + y;
+}
+
+console.log(sum(1, 2)); // 3
+console.log(sum(1)); // 1
+```
\ No newline at end of file