From 7fa087c627105b410c0748cd3531999ebfffddeb Mon Sep 17 00:00:00 2001 From: heejaykong Date: Sat, 26 Oct 2024 19:19:08 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20chapter=5F06,=20chapter=5F07=20?= =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- book/docs/chapter_06.md | 106 ++++++++++++++++++++++++++++++++ book/docs/chapter_07.md | 133 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 239 insertions(+) create mode 100644 book/docs/chapter_06.md create mode 100644 book/docs/chapter_07.md diff --git a/book/docs/chapter_06.md b/book/docs/chapter_06.md new file mode 100644 index 0000000..6d974a1 --- /dev/null +++ b/book/docs/chapter_06.md @@ -0,0 +1,106 @@ +# Chapter 06 - 데이터 타입 + +## 0. 데이터 타입은 왜 필요한가? +```javascript +var score = 100; +score = 'Hello'; +score = true; +score = null; +... +``` +1. 메모리 공간을 확보하고 참조하기 위해 + * 변수에 할당하고자 하는 값의 데이터 타입을 알아야, 값을 저장할 때 **확보해야 하는 메모리 공간의 크기를 결정**할 수 있다. + * 또한, 변수에 기 할당한 값을 참조할 땐 **한 번에 읽어 들어야 할 메모리 공간의 크기를 결정**할 수 있다. +2. 값을 해석하기 위해 + * 변수에 기 할당한 값을 참조할 때 메모리에서 읽어 들인 **2진수를 어떻게 해석할지** 결정할 수 있다. + + +## 1. Dynamic Typing: 동적 타이핑 +자바스크립트의 변수는 다른 정적 타입 언어(e.i. C언어, Java 등)와는 달리 + +* 선언이 아닌 **할당에 의해 타입이 결정**된다.(="type inference(타입 추론)된다") +* 그리고 **재할당**에 의해 변수가 참조하는 값의 타입은 언제든지 동적으로 **변할 수 있다**. + +데이터 타입을 위와 같이 다루는 언어의 특징을 우리는 "dynamic typing(동적 타이핑)"이라고 부른다 + + +동적 타이핑을 하는 언어, 즉 동적 타입 언어는 개발자가 데이터 타입을 매번 신경 쓰지 않아도 돼 편리한 만큼, +
+변수 값을 추적하거나 예측하기 어렵게 만든다는 구조적인 단점 또한 존재한다. + + +따라서 자바스크립트 변수를 사용할 땐 다음과 같은 **주의사항**을 숙지하자. +1. **변수는 제한적으로 사용한다.** 변수의 개수를 남발할수록 오류가 발생할 확률도 높아진다. 필요한 만큼만 최소한으로 유지한다. +2. **변수의 Scope(유효범위)는 최대한 좁게 만든다.** 변수의 유효 범위가 넓으면 넓을수록 변수를 추적하고 예측하기 어려워 오류가 발생할 확률이 높아진다. +3. **전역 변수는 절대 지양한다.** 전역 변수도 마찬가지로 추적과 예측을 어렵게 하므로 사용을 억제한다. +4. **변수보다는 상수를 사용한다.** +5. **변수명(뿐만 아니라 모든 식별자)는 명확하게 지어 가독성을 높인다.** + + +## 2. Data Types: 자바스크립트의 테이터 타입 +![image](https://github.com/user-attachments/assets/b36ca1be-f49b-4e87-8095-eae1ab68df69) +
+자바스크립트(ES6)는 위처럼 primitive type(원시 타입)과 object/reference type(객체 타입)으로 나뉘는 7개의 데이터 타입을 제공한다. +
+(ES11부터는 새로운 원시값 BigInt까지 합해서 총 8개의 데이터 타입을 제공한다.) + +8개 데이터 타입을 차례대로 살펴보자. +### 1. Number Type: 숫자 타입 +자바스크립트는 하나의 숫자 타입만 존재한다. 자바스크립트에서 숫자 타입의 값은 배정밀도 64비트 부동소수점 형식을 따른다. +
+**즉, 자바스크립트는 모든 수를 실수로 처리한다.** +```javascript +var integer = 10; // 10(정수) +var double = 10.12; // 10.12(실수) +var negative = -20; // -20(음의 정수) +var binary = 0b01000001; // 65(2진수로 표현했으나 참조 시 10진수로 해석됨) +var octal = 0o101; // 65(8진수로 표현했으나 참조 시 10진수로 해석됨) +var hex = 0x41; // 65(16진수로 표현했으나 참조 시 10진수로 해석됨) +``` +숫자 타입은 아래처럼 특별한 값도 표현할 수 있다. +```javascript +console.log(10 / 0); // Infinity(양의 무한대) +console.log(10 / -0); // -Infinity(음의 무한대) +console.log(1 * 'meow'); // NaN(산술 연산 불가(Not-a-Number)) +``` + +### 2. String Type: 문자열 타입 +자바스크립트의 문자열은, 배열이나 객체로 표현되는 다른 언어들의 문자열과는 달리 +
+**primitive(원시) 타입**이며, **immutable value(변경 불가능한 값)** 이다. + +### 3. Boolean Type: 불리언 타입 +자바스크립트는 논리적 참, 거짓을 나타내는 true, false를 데이터 타입으로 제공한다. 조건문에서 자주 사용한다. + +### 4. Undefined Type: undefined 타입 +var 키워드로 선언한 변수는 undefined로 암묵적 초기화된다. +
+이처럼 undefined는 개발자가 의도적으로 할당하기 위한 데이터라기보다는, **자바스크립트 엔진이 변수를 초기화할 때 사용하는 값**이므로, +
+개발자가 굳이 undefined를 할당하는 행동은 하지 않는 게 좋다. (undefined의 본래 취지를 지키며, 혼동을 방지하기 위해) + +그렇다면 변수에 값이 없다는 것을 명시하고 싶을 때, 개발자는 무엇을 할당할 수 있는가? 바로 null 값이다. + +### 5. Null Type: null 타입 +프로그래밍 언어에서 null은 변수에 **값이 없다는 것을 의도적으로 명시**(="intentional absence(의도적 부재)"할 때 사용한다. +
+변수에 null을 할당하는 것은, 변수가 이전에 할당되어 있던 값에 대한 **참조를 명시적으로 제거**하겠다고 선언하는 것이다. + +### 6. Sympol Type: 심벌 타입 +Symbol() 함수를 호출해 생성하는, 다른 값과 절대 중복되지 않는 유일무이한 값. 33장 "7번째 타입 Symbol"에서 자세히 볼 예정. + +### 7. BigInt Type: BigInt 타입(책에는 없는 절) +숫자 값을 안정적으로 나타낼 수 있는 최대치인 253 - 1보다 큰 정수를 표현할 수 있는, 새로운 원시값이다. +
+정수 리터럴의 뒤에 n을 붙이거나, BigInt() 함수를 호출해 생성할 수 있다. +```javascript +var bigInt1 = 10n; +var bigInt2 = BigInt(10); +``` + +### 8. Objects: 객체 타입 +자바스크립트의 객체 타입은 11장 "원시 값과 객체의 비교"에서 자세히 볼 예정. +
+중요한 것은 자바스크립트는 객체 기반의 언어이며, **자바스크립트를 이루는 거의 모든 것이 객체**라는 사실이다. + +끝. diff --git a/book/docs/chapter_07.md b/book/docs/chapter_07.md new file mode 100644 index 0000000..6bdb16e --- /dev/null +++ b/book/docs/chapter_07.md @@ -0,0 +1,133 @@ +# Chapter 07 - 연산자 + +## 0. 용어 정리 +![image](https://github.com/user-attachments/assets/aaac2239-2051-4470-9d05-1bb0804344f8) _이미지 출처: https://www.techtarget.com/whatis/definition/operand_ +* JS **Operator(연산자):** 하나 이상의 표현식에 산술/할당/비교/논라/타입/지수 연산 등을 수행해 하나의 값을 만드는 기호. +* JS **Operand(피연산자):** 연산의 대상이 되는 표현식. +* **Side effect(부수 효과):** 표현식을 연산할 때, 연산자가 피연산자의 값을 변경해버리는 효과.(e.g., `score++`, `--score` 등) + +## 1. Arithmetic Operators: 산술 연산자 +피연산자로 수학적 계산을 수행해 새로운 숫자 값을 만드는 연산자. +
+산술 연산이 불가능한 경우, `NaN`을 반환한다. +1. **이항 산술 연산자** + * `+`(덧셈), `-`(뻴셈), `*`(곱셈), `/`(나눗셈), `%`(나머지) +2. **단항 산술 연산자** + * +3. **문자열 연결 연산자** + * 연산자 `+`는, 피연산자 중 **하나라도 문자열이면** 문자열 연결 연산자로 동작한다. + * ```javascript + '1' + 2; // -> '12' + 1 + '2'; // -> '12' + ``` + +## 2. Assignment Operators: 할당 연산자 +우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당하는 연산자. +
+좌항에 값을 할당하므로 변수 값이 변하는 부수 효과가 있다. +
+![image](https://github.com/user-attachments/assets/93dd51eb-e9b9-48dd-ace3-1a265cf3b048) + +## 3. Comparison Operators: 비교 연산자 +좌항과 우항의 피연산자를 비교 후 결과를 boolean 값으로 반환하는 연산자. +1. **동등/일치 비교 연산자** + * + * **동등 비교**(`==`) 연산자는 좌항과 우항을 비교 시 **암묵적 타입 변환을 통해 타입을 일치시킨 후** 같은 값인지 비교한다. 이는 코드를 예측하기 어렵게 만든다. + * 따라서 동등 비교 연산자는 되도록 지양하고, 일치 비교(`===`) 연산자를 사용하자. + * **일치 비교**(`===`) 연산자는 좌항과 우항을 비교 시 **타입도 같고 값도 같아야지만 true를 반환**한다. + * 주의사항: `NaN`은 자신과 일치하지 않는 유일한 값이다. + * ```javascript + NaN === NaN; // -> false + + // 어떤 값이 NaN인지 보고 싶으면 빌트인 함수 Number.isNaN을 사용하자. + Number.isNaN(NaN); // -> true + ``` +2. **대소 관계 비교 연산자** + * + +## 4. Conditional/Ternary Operator: 삼항 조건 연산자 +조건식의 평과 결과에 따라 반환할 값을 결정하는 연산자. 부수 효과는 없다. +
+ + +## 5. Logical Operators: 논리 연산자 +우항과 좌항의 피연산자를 논리 연산하는 연산자. +
+![image](https://github.com/user-attachments/assets/8685a12c-6484-45fc-89cd-cc11bd73a4aa) +
+단, **부정 논리 연산자**(`!`)의 경우엔 우항의 피연산자를 연산하며, 언제나 boolean 값을 반환한다. + +부정 논리 연산자의 피연산자는 반드시 boolean 값일 필요는 없다. +
+boolean 값이 아닌 경우엔 알아서 boolean 타입으로 **암묵적 타입 변환**을 해 주기 때문이다. +```javascript +!0; // -> true +!'Hello'; // -> false +``` + +## 6. Comma Operator: 쉼표 연산자 +왼쪽 피연산자부터 차례대로 피연산자를 평가하고, 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환하는 연산자. +```javascript +var x, y, z; +x = 1, y = 2, z = 3; // -> 3 +``` + +## 7. Grouping Operator: 그룹 연산자 +피연산자를 소괄호(`()`)로 묶어 표현식 평가 순서를 정하는 연산자. 연산자 우선순위가 가장 높다. +```javascript +10 * 2 + 3; // -> 23 +10 * (2 + 3); // -> 50 +``` + +## 8. Unary Operators - typeof: typeof 연산자 +피연산자의 데이터 타입을 문자열로 반환하는 연산자. +
+ + +**주의사항:** `typeof null`은 `null`이 아닌 `object`를 반환하는 자바스크립트 언어 버그가 존재하므로, +
+값이 `null` 타입인지 확인하고자 할 땐 `typeof`가 아닌 **일치 비교 연산자**(`===`)를 쓰도록 하자. +```javascript +var foo = null; + +typeof foo === null; // -> false +foo === null; // -> true +``` + +## 9. Arithmetic Operators - exponentiation operator: 지수 연산자 +좌항을 base(밑)으로, 우항을 exponent(지수)로 거듭 제곱해 숫자 값을 반환하는 연산자. ES7에 도입됐다. +```javascript +2 ** 2; // -> 4 +2 ** 2.5; // -> 5.65685425 +2 ** 0; // -> 1 +2 ** -2; // -> 0.25 + +// 지수 연산자가 도입되기 전까진 Math.pow 메서드를 사용했었음. +Math.pow(2, 2); // -> 4 +Math.pow(2, 2.5); // -> 5.65685425 +Math.pow(2, 0); // -> 1 +Math.pow(2, -2); // -> 0.25 +``` + +## 10. 그 외의 연산자(각 장에서 살펴볼 예정) +![image](https://github.com/user-attachments/assets/25244c27-57e0-42a6-8177-5b5504901106) + +## 11. Side Effects: 연산자의 부수 효과 +대부분은 그렇지 않지만, 아래처럼 일부 연산자는 다른 코드에 영향을 주는 '부수 효과'가 있다. +* 할당 연산자(`=`) +* 증가/감소 연산자(`++`/`--`) +* delete 연산자 + +## 12. Operator Precedence: 연산자 우선순위 +연산자 간에도 연산자가 실행되는 순위가 다르다. +
+ + +**그러나,** 이 모든 걸 기억할 수도 없을 뿐더러 기억하더라도 실수하기 쉽다. +
+따라서 우선순위를 암기하기보다는, **그룹 연산자**(`()`)**를 활용**해 우선순위를 명시적으로 조절하도록 하자. + +## 13. Associativity: 연산자 결합 순서 +![image](https://github.com/user-attachments/assets/6510ec39-112f-4da4-8154-ee4bb25c6e20) + +끝. \ No newline at end of file From 608f452de37f38ef60c0697b1fa691b1ab2611f8 Mon Sep 17 00:00:00 2001 From: heejaykong Date: Sat, 26 Oct 2024 19:20:04 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=5Ftoc.yml=EC=97=90=20chapter=5F06,?= =?UTF-8?q?=20chapter=5F07=20=EC=84=B9=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- book/_toc.yml | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/book/_toc.yml b/book/_toc.yml index 411e30c..9188008 100644 --- a/book/_toc.yml +++ b/book/_toc.yml @@ -8,11 +8,17 @@ parts: - caption: Chapters chapters: - file: docs/chapter_04 + - file: docs/chapter_05 + - file: docs/chapter_06 + - file: docs/chapter_07 - caption: 개인 공간 chapters: - file: 공희재/main sections: - file: 공희재/chapter_04 + - file: 공희재/chapter_05 + - file: 공희재/chapter_06 + - file: 공희재/chapter_07 - file: 김현우/main sections: - file: 김현우/chapter_04 From 2255a9478d8edcd1050e81605b36421130006ded Mon Sep 17 00:00:00 2001 From: heejaykong Date: Sun, 15 Dec 2024 23:29:28 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=5Ftoc.yml=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=EC=97=90=20=EC=B1=95=ED=84=B0,=20=EC=84=B9=EC=85=98=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- book/_toc.yml | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/book/_toc.yml b/book/_toc.yml index 9188008..6d09025 100644 --- a/book/_toc.yml +++ b/book/_toc.yml @@ -11,6 +11,16 @@ parts: - file: docs/chapter_05 - file: docs/chapter_06 - file: docs/chapter_07 + - file: docs/chapter_08 + - file: docs/chapter_09 + - file: docs/chapter_10 + - file: docs/chapter_11 + - file: docs/chapter_12 + - file: docs/chapter_13 + - file: docs/chapter_14 + - file: docs/chapter_15 + - file: docs/chapter_16 + - file: docs/chapter_17 - caption: 개인 공간 chapters: - file: 공희재/main @@ -19,6 +29,14 @@ parts: - file: 공희재/chapter_05 - file: 공희재/chapter_06 - file: 공희재/chapter_07 + - file: 공희재/chapter_08 + - file: 공희재/chapter_09 + - file: 공희재/chapter_10 + - file: 공희재/chapter_11 + - file: 공희재/chapter_12 + - file: 공희재/chapter_14 + - file: 공희재/chapter_15 + - file: 공희재/chapter_17 - file: 김현우/main sections: - file: 김현우/chapter_04 From 044ea9f43aab64c7fd0656a27ee8671a38b85d73 Mon Sep 17 00:00:00 2001 From: heejaykong Date: Sun, 15 Dec 2024 23:30:01 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20chapter=5F17=20=EC=97=85=EB=A1=9C?= =?UTF-8?q?=EB=93=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- book/docs/chapter_17.md | 101 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 book/docs/chapter_17.md diff --git a/book/docs/chapter_17.md b/book/docs/chapter_17.md new file mode 100644 index 0000000..6c53a46 --- /dev/null +++ b/book/docs/chapter_17.md @@ -0,0 +1,101 @@ +# Chapter 17 - 생성자 함수에 의한 객체 생성 + +이번 장에서는 다양한 객체 생성 방식 중에서 **Constructor(생성자 함수)를 사용해 객체를 생성하는 방식**을 살펴보자. + +## 1. Object 생성자 함수 +다음과 같이 `new` 연산자와 함께 `Object` 생성자 함수를 호출하면 빈 객체를 생성해 반환할 수 있다.
+빈 객체를 생성 후 프로퍼티 또는 메서드를 추가해 객체를 완성하면 된다. + +![image](https://github.com/user-attachments/assets/dd61cb9b-b2e0-41a8-96b5-bfc121b48ea1) + +**용어 정리:** +* Constructor(생성자 함수): `new` 연산자와 함께 호출해 객체(인스턴스)를 생성하는 함수를 말한다. +* Instance(인스턴스): Constructor에 의해 생성된 객체를 말한다. + +그러나! Object 생성자 함수를 사용해 객체를 생성하는 방식은,
+특별한 이유가 없다면 그다지 유용하진 않다. (그냥 객체 리터럴을 쓰는 게 낫다.) + +그럼 이제 생성자 함수를 배워보자. + + +## 2. Constructor: 생성자 함수 +### 2-1. 객체 리터럴로 객체를 만들 때 문제점 +객체 리터럴로 객체를 생성하는 방식은 직관적이고 간편하다는 장점이 있지만,
+동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우에는 비효율적이라는 단점이 있다. + +### 2-2. 생성자 함수로 객체를 만들 때 문제점 +그에 비해 생성자 함수로 객체를 생성하는 방식은, 마치 다른 언어의 클래스처럼
+프로퍼티 구조가 동일한 객체 여러 개를 아래처럼 간편하게 생성할 수 있다. + +![{1016F6F5-0E1E-4595-A20C-F9C88F2345D7}](https://github.com/user-attachments/assets/248d26a5-531f-428b-9c35-6a22b282d4ef) + +이처럼 생성자 함수는 객체(인스턴스)를 생성하는 함수다.
+**하지만!** 다른 클래스 기반 언어의 생성자와는 달리, 자바스크립트의 생성자 함수는 **형식이 정해져 있지 않다**.
+**일반 함수**와 동일한 방법으로 생성자 함수를 정의하고 **`new` 연산자와 함께 호출하면 그 함수는 생성자 함수**가 된다. + +### 2-3. 생성자 함수의 인스턴스 생성 과정 +생성자 함수의 역할은 1. **인스턴스를 생성하는 것**과
+2. 생성한 인스턴스의 프로퍼티를 추가하고, 초기값을 할당하는 **초기화를 하는 것**이다.
+자바스크립트 엔진은 `new` 연산자와 함께 생성자 함수를 호출하면,
+다음과 같이 세 단계에 걸쳐 암묵적으로 인스턴스를 생성, 초기화, 그리고 반환한다. + +![{31654410-9A7A-4418-9BD8-1661F8E4BBB5}](https://github.com/user-attachments/assets/90354fbc-7691-4679-9f13-8bd54ecfc040) + +위 예제를 차례대로 살펴보자. + +#### 1) 인스턴스 생성과 `this` 바인딩 +`new` 연산자와 함께 생성자 함수를 호출하면 자바스크립트 엔진은 **암묵적으로 빈 객체를 생성**하고,
+이 객체(인스턴스)를 **`this`에 바인딩**한다. 이 과정은 함수 몸체의 코드를 한 줄씩 실행하는 **런타임 이전에 처리**된다. +#### 2) 인스턴스 초기화 +`this`에 바인딩한 인스턴스를 초기화한다. 이 처리는 개발자가 기술한다. +#### 3) 인스턴스 반환 +초기화를 끝낸 인스턴스를 바인딩한, `this`를 암묵적으로 반환한다.
+**그러나!** 다음과 같은 예외가 있다: +* 만약 `this`가 아닌 다른 객체를 명시적으로 반환하면, `this`가 아닌 return 문에 명시한 그 객체를 반환한다. +* 만약 `this`가 아닌 어떤 원시 값을 명시적으로 반환하면, 원시 값 반환은 무시하고 암묵적으로 `this`를 반환한다. + +**따라서, 이렇게 생성자 함수의 기본 동작을 훼손하지 않으려면, 생성자 함수 내부에서 return 문을 반드시 생략해야 한다.** + +### 2-4. 내부 메서드 [[Call]]과 [[Construct]] +함수는 객체이므로 **ordinary object(일반 객체)가 지닌 내부 슬롯과 내부 메서드를 똑같이** 지닌다.
+뿐만 아니라, 함수로서 동작하기 위해 **함수 객체만을 위한 내부 슬롯과 내부 메소드**도 추가로 가지고 있다. + +그 중 이번 절에서 살펴볼 내부 메서드는 [[**Call**]]과 [[**Construct**]]이다.
+[[Call]]은 함수가 **일반 함수로서** 호출될 때 쓰이는 내부 메서드이고,
+[[Construct]]는 `new` 연산자와 함께 **생성자 함수로서** 호출될 때 쓰이는 내부 메서드이다. + +[[Call]]을 갖는 함수 객체를 우리는 **callable**이라고 부르고,
+[[Construct]]를 갖는 함수 객체를 우리는 **constructor**라고 부른다. (갖지 않는 함수 객체는 **non-constructor**라고 부른다.) + +중요한 사실은, 모든 함수 객체는 호출할 수 있지만, 생성자 함수로서 호출할 수 있지는 않다는 것이다.
+**즉, 함수 객체는 무조건 callable이지만, 경우에 따라 constructor일 수도 있고, non-constructor일 수도 있다.** + +그렇다면 어떤 함수 객체가 constructor인지 non-constructor인지 어떻게 구분할까? + + +### 2-5. constructor와 non-constructor의 구분 +자바스크립트 엔진은 다음과 같이 **함수 정의** 방식에 따라 constructor와 non-constructor를 구분한다. +* constructor: 함수 선언문, 함수 표현식, 클래스(클래스도 함수임) +* non-constructor: ECMAScript 사양에서 인정하는 메서드(=ES6 메서드 축약 표현), 화살표 함수 + + +### 2-6. `new` 연산자 +`new` 연산자와 함께 함수를 호출하면, 그 함수는 이제 생성자 함수가 된다.
+다시 말해, 내부 메서드 [[Call]]이 호출되는 것이 아니라, 이제 [[Construct]]가 호출되는 것이다. + +반대로, `new` 연산자 없이 생성자 함수를 호출하면 그 함수는 일반 함수다.
+다시 말해, 내부 메서드 [[Construct]]이 호출되는 것이 아니라, 이제 [[Call]]가 호출되는 것이다. + +생성자 함수로서 호출되는지, 일반 함수로서 호출되는지에 따라 함수 내부의 `this`가 바인딩되는 대상이 달라진다.
+`new` 연산자와 함께 생성자 함수로서 호출하면 `this`는 생성자 함수가 만든 인스턴스를 가리키고,
+일반 함수로서 호출하면 `this`는 전역 객체 `window`를 가리키게 된다. + +생성자 함수와 일반 생성자 함수는 형식적 차이가 없으므로,
+**생성자 함수의 이름**을 지을 땐 일반적으로 **PascalCase**로 명명해 일반 함수와 구분해야 한다. + + +### 2-7. `new.target` +앞서 이야기한 PascalCase를 쓴다고 하더라도 위험성이 여전히 존재하므로,
+ES6부터는 함수 내부에서 본인이 생성자 함수로서 호출되었는지 확인하게 해주는 new.target라는 메타 프로퍼티를 지원한다. + +끝.