Merge branch 'ahnlab-220:main' into main

Author: wooy0ng

book/공희재/chapter_21.md

@@ -5,6 +5,7 @@
 1. Standard built-in objects 또는 Native objects 또는 Global objects (표준 빌트인 객체)
 2. Host objects (호스트 객체)
 3. User-defined objects (사용자 정의 객체)
+
 차례대로 살펴 보자.
 
 ## 2. Standard built-in objects: 표준 빌트인 객체

book/이용우/chapter_12.md

@@ -461,7 +461,7 @@ documnet.getElementById('myButton').addEventListener('click', function () {
 
 // 콜백 함수를 사용한 비동기 처리
 setTimeout(function () {
-    console,log('1초 경과');
+    console.log('1초 경과');
 }, 1000);
 ```
 

book/이용우/chapter_19.md

@@ -86,7 +86,7 @@ const circle2 = new Circle(2);
 // Circle 생성자 함수는 인스턴스를 생성할 때마다 동일한 동작을 하는 
 // getArea 메소드를 중복 생성하고 모든 인스턴스가 중복 소유합니다.
 // getArea 메소드는 하나만 생성하여 모든 인스턴스가 공유해서 사용하는 것이 바람직합니다.
-console.log(circle.getArea === circle2.getArea);    // false
+console.log(circle1.getArea === circle2.getArea);    // false
 
 console.log(circle1.getArea());
 console.log(circle2.getArea());
@@ -106,7 +106,7 @@ console.log(circle2.getArea());
 
 이처럼 동일한 생성자 함수에 의해 생성된 모든 인스턴스가 동일한 메소드를 중복 소유하는 것은 메모리를 불필요하게 낭비합니다.  
 또한 인스턴스를 생성할 때마다 메소드를 생성하므로 퍼포먼스에도 악영향을 줍니다.  
-만약 10개의 인스턴스를 생성하면 내용이 동일한 메소드로 10개 성상됩니다.  
+만약 10개의 인스턴스를 생성하면 내용이 동일한 메소드로 10개 생성됩니다.  
 
 <br>
 
@@ -120,7 +120,7 @@ function Circle(radius) {
 }
 
 // Circle 생성자 함수가 생성한 모든 인스턴스가 getArea 메소드를
-// 공유해서 사용할 수 있도록 프로토토압에 추가합니다.
+// 공유해서 사용할 수 있도록 프로토타입에 추가합니다.
 // 프로토타입은 Circle 생성자 함수의 prototype 프로토타입에 바인딩되어 있습니다.
 Circle.prototype.getArea = function() {
     return Math.PI * this.radius ** 2;
@@ -135,7 +135,7 @@ const circle2 = new Circle(2);
 // Circle 생성자 함수는 인스턴스를 생성할 때마다 동일한 동작을 하는 
 // getArea 메소드를 중복 생성하고 모든 인스턴스가 중복 소유합니다.
 // getArea 메소드는 하나만 생성하여 모든 인스턴스가 공유해서 사용하는 것이 바람직합니다.
-console.log(circle.getArea === circle2.getArea);    // false
+console.log(circle1.getArea === circle2.getArea);    // true
 
 console.log(circle1.getArea());
 console.log(circle2.getArea());
@@ -153,7 +153,7 @@ console.log(circle2.getArea());
 
 즉, 자신의 상태를 나타내는 `radius` 프로퍼티만 개별적으로 소유하고 내용이 동일한 메소드는 상속을 통해 공유하여 사용하는 것입니다.   
 상속은 코드의 재사용이란 관점에서 매우 유용합니다.  
-<font color='orange'>메소드를 프로토타입에 미리 구현해두면 모든 인스턴스는 별도의 구현 없이 상위(부모) 객체인 프로토토압의 자산을 공유하여 사용할 수 있습니다. </font>
+<font color='orange'>메소드를 프로토타입에 미리 구현해두면 모든 인스턴스는 별도의 구현 없이 상위(부모) 객체인 프로토타입의 자산을 공유하여 사용할 수 있습니다. </font>
 
 <br><br>
 
@@ -185,7 +185,7 @@ console.log(circle2.getArea());
 
 ##### __proto__ 접근자 프로퍼티
 모든 객체는 `__proto__` 접근자 프로퍼티를 통해 자신의 프로토타입,  
-즉 [[Prototype]] 내부 슬롯에 **간접적으로 접근할 수 있습니다.**
+즉 [[Prototype]] 내부 슬롯이 가리키는 프로토타입에 **간접적으로 접근할 수 있습니다.**
 
 <img width="300" alt="image" src="https://github.com/user-attachments/assets/bb50a2ca-1454-4d59-bb06-ef967dcad068" />
 
@@ -252,7 +252,7 @@ console.log({}.__proto__ === Object.prototype);     // true
 > 자바스크립트 엔진은 객체의 프로퍼티(메서드 포함)에 접근하려고 할 때  
 > 해당 객체에 접근하려는 프로퍼티가 없다면 `__proto__` 접근자 프로퍼티가 가리키는 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색한다. 
 > 
-> 프로토타입 체인의 종점, 즉 프로토타입 체인의 최상위 객체는 `0bject.prototype`이며,  
+> 프로토타입 체인의 종점, 즉 프로토타입 체인의 최상위 객체는 `Object.prototype`이며,  
 > 이 객체의 프로퍼티와 메서드는 모든 객체에 상속된다. 
 
 <br><br>
@@ -277,7 +277,7 @@ parent.__proto__ = child;       // TypeError: Cyclic __proto__ value
 위 예제에서는 `parent` 객체를 `child` 객체의 프로토타입으로 설정한 후,  
 `child` 객체를 `parent` 객체의 프로토타입으로 설정했습니다.
 
-이러한 코드가 에러 업싱 정상적으로 처리되면  
+이러한 코드가 에러 없이 정상적으로 처리되면  
 서로가 자신의 프로토타입이 되는 비정상적인 프로토타입 체인이 만들어지기 때문에  
 `__proto__` 접근자 프로퍼티는 에러를 발생시킵니다.
 
@@ -314,7 +314,7 @@ console.log(Object.getPrototypeOf(obj));        // null
 ```
 
 따라서 프로토타입의 참조를 얻고 싶은 경우에는, `Obejct.getPrototypeOf` 메소드를 사용하고,  
-프로토타입을 교체하고 싶은 경우에는 `Object.setPrototypeO ㅈf` 메소드를 사용할 것을 권장합니다.
+프로토타입을 교체하고 싶은 경우에는 `Object.setPrototypeOf` 메소드를 사용할 것을 권장합니다.
 
 ``` js
 const obj = {};
@@ -350,17 +350,14 @@ console.log(obj.x);     // 1
 `prototype` 프로퍼티를 소유하지 않으며 프로토타입도 생성하지 않습니다.
 
 ``` js
-// 화살표 함수는 non-constructor 이다.
+// 화살표 함수는 non-constructor 입니다.
 const Person = name => {
     this.name = name;
 };
 
 // non-constructor는 prototype 프로퍼티를 소유하지 않는다.
 console.log(Person.hasOwnProperty('prototype'));    // false
 
-// non-constructor는 프로토타입을 생성하지 않는다.
-console.log(Person.prototype);  // undefined
-
 // ES6의 메소드 축약 표현으로 정의한 메소드는 non-constructor다.
 const obj = {
     foo() {}
@@ -377,7 +374,6 @@ console.log(obj.foo.prototype);     // undefined
 
 모든 객체가 가지고 있는 `__proto__` 접근자 프로퍼티와  
 함수 객체만이 가지고 있는 `prototype` 프로퍼티는 결국 동일한 프로토타입을 가리킵니다.  
-하지만 이들 프로퍼티를 사용하는 주체가 다릅니다.
 
 |구분|소유|값|사용 주체|사용 목적|
 |--|--|--|--|--|
@@ -618,7 +614,7 @@ console.log(person.setName.prototype);      // undefined
 <br><br>
 
 이처럼 다양한 방식으로 생성된 모든 객체는 각 방식마다 세부적인 객체 생성 방식의 차이는 있으나  
-추상 연산 `ordinaryobjectCreate`에 의해 생성된다는 공통점이 있습니다.
+추상 연산 `ordinaryObjectCreate`에 의해 생성된다는 공통점이 있습니다.
 
 이는 즉, 프로토타입은 추상 연산 `OrdinaryObjectCreate`에 전달되는 인수에 의해 결정됩니다.  
 이 인수는 객체가 생성되는 시점에 객체 생성 방식에 의해 결정됩니다.  
@@ -910,7 +906,7 @@ console.log(Object.getPrototypeOf(obj) === Person.prototype);   // true
 ```
 
 위와 같이 `Object.create` 메소드는 첫 번째 매개변수에 전달한 객체의 프로토타입 체인에 속하는 객체를 생성합니다.  
-즉, 객체를 생서앟면서 직접적으로 상속을 구현하는 것입니다.
+즉, 객체를 생성하면서 직접적으로 상속을 구현하는 것입니다.
 
 장점은 아래와 같습니다.
 - `new` 연산자 없이도 객체 생성이 가능합니다.
@@ -1018,12 +1014,12 @@ console.log('toString' in person);  // true
 `in` 연산자 대신 ES6에서 도입된 `Reflict.has` 메소드를 사용할 수 있습니다.
 
 ``` js
-const perosn = {
+const person = {
     name: 'Lee'
 };
 
 console.log(Reflict.has(person, 'name'));   // true
-console.log(Reflict.has(person, 'toString'));   // true
+console.log(Reflict.has(person, 'toString'));   // false
 ```
 
 <br><br>

book/이용우/chapter_20.md

@@ -0,0 +1,238 @@
+### Chapter 20 - strict mode
+#### strict mode란?
+``` js
+function foo() {
+    x = 10;
+}
+
+foo();
+
+console.log(x);     // ?
+```
+
+foo 함수 내에서 선언하지 않은 x 변수에 값 10을 할당했습니다.  
+이때 x 변수를 찾아야 x에 값을 할당할 수 있기 때문에 자바스크립트 엔진은 x 변수가 어디서 선언되었는지 스코프 체인을 통해 검색하게 됩니다.
+
+자바스크립트 엔진은 아래의 순서로 겁색을 시도할 것입니다.
+1. `foo` 함수의 스코프에서 `x` 변수의 선언을 검색한다. (`foo` 함수의 스코프에는 `x` 변수의 선언이 없으므로 검색에 실패한다.)
+2. `foo` 함수 컨텍스트의 상위 스코프(예제의 경우에는 전역 스코프)에서 `x` 변수의 선언을 검색한다.
+
+전역 스코프에도 `x` 변수의 선언이 존재하지 않기 때문에 `ReferenceError`를 발생시킬 것 같지만  
+자바스크립트 엔진은 <font color='orange'>암묵적으로 전역 객체에 `x` 프로퍼티를 생성합니다.</font>
+> 마치 전역 변수처럼 `x` 변수를 사용할 수 있게 된다.
+
+**위와 같은 현상을 암묵적 전역(implict global)이라 합니다.**
+
+<br>
+
+개발자 의도와는 상관없이 발생한 암묵적 전역은 오류를 발생시키는 원인이 될 가능성이 큽니다.  
+따라서 반드시 `var`, `let`, `const` 키워드를 사용하여 변수를 선언한 다음 사용해야 합니다.
+
+<br>
+
+다만 휴먼 에러로 실수는 언제나 존재할 수 있습니다.  
+따라서 오류를 줄여 안정적인 코드를 생성하기 위해 잠재적으로 오류를 발생시키기 어려운 개발 환경을 만들고,  
+그 환경에서 개발할 수 있도록 해결 방안을 모색하기 시작했습니다.
+
+<br>
+
+이를 위해 ES5 부터는 `strict mode(엄격 모드)`가 추가되었습니다.  
+이 모드는 <font color='orange'>자바스크립트 언어의 문법을 조금 더 엄격하게 적용하여</font> 오류를 발생시킬 가능성이 높거나  
+<font color='orange'>자바스크립트 엔진의 최적화 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시키도록 해줍니다.</font>
+
+<br>
+
+`ESLint`와 같은 린트 도구를 사용해도 strict mode와 유사한 효과를 얻을 수 있습니다.  
+> 린트 도구는 `정적 분석` 기능을 통해 소스코드를 실행하기 전에 문법적 오류 뿐만 아니라 잠재거인 오류까지 찾아내주는 도구이다.
+
+<br><br>
+
+
+### strict mode의 적용
+
+
+자바스크립트에서 strict mode는 더 엄격한 문법과 오류 처리를 적용하여 잠재적인 오류를 방지하고 안전한 코드를 작성할 수 있도록 도와줍니다. 
+strict mode를 사용하면 다음과 같은 이점이 있습니다:
+
+- 암묵적 전역 변수 생성을 방지합니다.
+- 읽기 전용 속성에 값을 할당하는 등의 실수를 방지합니다.
+- `this`가 `undefined`로 설정되는 것을 방지합니다.
+
+strict mode를 활성화하려면 파일 또는 함수의 맨 위에 `"use strict";` 지시어를 추가합니다.  
+<font color='orange'>다만, strict mode이 적용될 블록 스코프를 직접 정할 수 있습니다.</font>
+
+``` js
+'use strict';
+
+function foo() {
+    x = 10; // ReferenceError: x is not defined
+}
+
+foo();
+
+console.log(x);
+```
+위 코드는 전역 스코프에 대해 strict mode가 적용되도록 할 수 있습니다.
+
+<br><br>
+
+``` js
+
+
+function foo() {
+    'use strict';
+    x = 10; // ReferenceError: x is not defined
+}
+
+foo();
+
+console.log(x);
+```
+
+함수 스코프에 추가하면 해당 함수 및 중첩 함수에 strict mode가 적용됩니다.
+
+
+<br><br>
+
+### 전역에 strict mode를 적용하는 것은 피하자
+
+<font color='orange'>전역에 적용한 strict mode는 스크립트 단위로 적용됩니다.</font>
+
+``` html
+<!DOCTYPE html>
+<html>
+<body>
+    <script>
+        'use scrict';
+    </script>
+    <script>
+        x = 1;  // 에러가 발생하지 않는다.
+        console.log(x);     // 1
+    </script>
+    <script>
+        'use strict';
+
+        y = 1;  // ReferenceError: y is not defined
+        console.log(y);
+    </script>
+</body>
+</html>
+```
+
+
+위 예제와 같이 스크립트 단위로 적용된 strict mode는 다른 스크립트에 영향을 주지 않습니다.  
+하지만 `strict mode` 스크립트와 `non-strict mode` 스크립트를 혼용하는 것은 오류를 발생시킬 수 있습니다.  
+> 외부 서드파티 라이브러리를 사용하는 경우 라이브러리가 `non-strict mode`인 경우가 있기 때문에 전역에 strict mode를 적용하는 것은 바람직하지 않다.
+
+<br><br>
+
+### 함수 단위로 strict mode를 적용하는 것을 피하자
+함수 단위로 strict mode를 적용할 수도 있지만  
+어떤 함수는 strict mode를 적용하고 어떤 함수는 strict mode를 적용하지 않는 것은 바람직하지 않으며  
+모든 함수에 일일이 strict mode를 적용하는 것은 번거롭습니다.  
+
+그리고 strict mode가 적용된 함수가 참조할 함수 외부의 컨텍스트에 strict mode를 적용하지 않는다면  
+이 또한 문제가 발생할 수 있습니다.
+
+
+``` js
+(function () {
+    // non-strict mode
+    var let = 10;       // 에러가 발생하지 않음
+
+    function foo() {
+        'use strict';
+
+        let = 20;   // SyntaxError: Unexpected strict mode reserved word
+    }
+    foo();
+})
+```
+
+따라서 strict mode는 즉시 실행 함수로 감싼 스크립트 단위로 적용하는 것이 바람직합니다.
+
+``` js
+// 즉시 실행 함수의 선두에 strict mode 적용
+(function () {
+    'use strict';
+    // Do something...
+}());
+
+```
+
+
+<br><br>
+
+
+### strict mode가 발생시키는 에러
+아래는 strict mode를 적용시켰을 때 에러가 발생하는 대표적 사례입니다.
+
+<br><br>
+
+#### 암묵적 전역
+선언하지 않은 변수를 참조하면 `ReferenceError`가 발생합니다.
+
+``` js
+(function () {
+    'use strict';
+
+    x = 1;
+    console.log(x);     // ReferenceError: x is not defined
+}());
+```
+
+<br><br>
+
+#### 변수, 함수, 매개변수의 삭제
+`delete` 연산자로 변수, 함수, 매개변수를 삭제하면 SyntaxError가 발생합니다.
+
+``` js
+(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.
+}());
+```
+
+<br><br>
+
+#### 매개변수 이름의 중복
+중복된 매개변수 이름을 사용하면 `SyntaxError`가 발생합니다.
+
+``` js
+(function () {
+    'use strict';
+
+    // SyntaxError: Duplicate parameter name not allowed in this context
+    function foo(x, x) {
+        return x + x;
+    }
+    console.log(foo(1, 2))
+}());
+```
+
+<br><br>
+
+#### with 문의 사용
+`with` 문을 사용하면 `SyntaxError`가 발생합니다.  
+`with` 문은 전달된 객체를 스코프 체인에 추가합니다.  
+
+`with` 문은 동일한 객체의 프로퍼티를 반복해서 사용할 때 까지 객체 이름을 생략할 수 있어서 코드가 간단해질 수 있지만  
+성능과 가독성이 나빠지는 문제가 있습니다.  따라서 `with` 문은 사용하지 않는 것이 좋습니다.
+
+``` js
+(function() {
+    'use strict';
+
+    // SyntaxError: Strict mode code may not include a with statement
+    with({ x: 1}){
+        console.log(x);
+    }
+}());
+```