Merge branch 'main' of https://github.com/learning-with/learning-js

1회독/week05/채영.md

@@ -592,13 +592,18 @@ foo();
 전역에 적용한 strict mode는 스크립트 단위로 적용된다.
 
 - strict mode 와 non-strict mode를 혼용해서 사용하면 오류를 발생시킬 수 있다. 특히 외부 서드파티 라이브러리를 사용하는 경우 라이브러리가 non-strict mode인 경우도 있기 때문에 전역에 strict mode를 적용하는 것은 바람직하지 않다.
-- 즉시 실행 함수의 선두에 strict mode를 적용한다.
+- 대신 즉시 실행 함수의 선두에 strict mode를 적용할 것.
 
-## 20.4 함수 단위로 strict mode를 적용하는 것도 피하자
+```javascript
+(function () {
+  "use strict";
+});
+```
 
-- 함수 단위로 strict mode를 적용하게되면 모든 함수마다 일일이 strict mode를 적용해야 하는데 이는 매우 번거로운 일이다.
+## 20.4 함수 단위로 strict mode를 적용하는 것도 피하자
 
-그리고 strict mode가 적용된 함수가 참조할 함수 외부의 컨텍스트에 strict mode를 적용하지 않는다면 문제가 발생할 수 있다.
+- 함수 단위로 strict mode를 적용하게되면 모든 함수마다 일일이 적용하게 돼서 번거롭다. strict mode가 적용된 함수가 참조할 함수 외부의 컨텍스트에 strict mode를 적용하지 않는다면 문제가 발생할 수 있다. strict mode와 non-strict mode 혼용 금지.
+- 즉시 실행 함수로 감싼 스크립트 단위로 strict mode를 사용하자.
 
 ```javascript
 (function () {
@@ -616,32 +621,16 @@ foo();
 
 ## 20.5 strict mode가 발생시키는 에러
 
-- 암묵적 전역
-- 변수, 함수, 매개변수의 삭제(delete)
-- 매개변수 이름의 중복
-- with문의 사용
-
-### 20.5.1 암묵적 전역
-
-선언하지 않은 변수 참조하면 ReferenceError 발생
-
-### 20.5.2 변수, 함수, 매개변수의 삭제
-
-delete연산자로 변수, 함수, 매개변수를 삭제하면 SyntaxError가 발생
-
-### 20.5.3 매개변수 이름의 중복
-
-중복된 매개변수 이름 사용 시 SyntaxError 발생
-
-### 20.5.4 with문의 사용
-
-with문을 사용하면 SyntaxError가 발생
+1. 암묵적 전역 : `ReferneceError` 발생
+2. 변수, 함수, 매개변수의 삭제(delete)시 `SyntaxError` 발생
+3. 매개변수 이름의 중복 시 `SyntaxError`발생
+4. with문의 사용 시 `SyntaxError` 발생 ( with문은 코드는 간단해 지지만 성능과 가독성이 나빠짐. with문 사용하지말자 )
 
 ## 20.6 strict mode 적용에 의한 변화
 
 ### 20.6.1 일반 함수의 this
 
-strict mode에서 함수를 일반함수로 호출하면 this에 undefined가 바인딩된다.
+strict mode에서 함수를 일반함수로 호출하면 this에 undefined가 바인딩된다. 일반함수에서는 생성자 함수가 아닌 일반함수에서는 this를 사용할 필요없다.
 만약 strict mode가 아닌 경우 window전역 객체가 바인딩된다.
 
 ```javascript

2회독/week14/채영.md

@@ -0,0 +1,92 @@
+# 22 this
+
+객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조.
+이때 동작을 나타내는 메서드는 자신이 속한 객체의 상태(= 프로퍼티)를 참조하고 변경할 수 있어야함.
+
+```javascript
+const circle = {
+  radius: 5,
+  getDiameter() {
+    return 2 * circle.radius;
+  },
+};
+
+console.log(circle.getDiameter()); // 10
+```
+
+생성자 함수를 정의하는 시점에서 아직 인스턴스를 생성하기 이전이므로 생성자 함수가 생성할 인스턴스를 가리키는 식별자를 알 수 없음. 따라서 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 특수한 식별자가 필요해서 등장한 this. this는 어디에서든 참조 가능하고, 암묵적으로 자바스크립트 엔진에서 생성됨. 기본적으로 this는 전역 객체가 바인딩됨. 호출방식에 따라 this 바인딩이 다르게 결정됨.
+
+## 함수 호출 방식에 따라 달라지는 this
+
+new 연산자를 씀에 의해서 새로 생성한 인스턴스 객체가 this가 되어서 this가 인스턴스 자신이됨.
+
+### 1. 일반함수 호출 - 전역객체 window를 뜻함
+
+```javascript
+const foo = function () {
+  console.dir(this);
+};
+
+foo(); // window
+```
+
+### 2. 메서드 호출 - 메서드를 호출하는 object 객체
+
+```javascript
+const obj = { foo };
+obj.foo(); // obj
+```
+
+### 3. 생성자 함수 호출 - 생성자 함수가 생성한 인스턴스 자신
+
+```javascript
+new foo(); // foo { }
+```
+
+### 4. Function.prototype.apply/call/bind 메서드에 의한 간접 호출 - 인수에 의해 결정
+
+```javascript
+const bar = { name: "bar" };
+
+foo.call(bar); // bar
+foo.apply(bar); // bar
+foo.bind(bar)(); // bar
+```
+
+### 단, 일반 함수일 경우 use strict를 쓰면 undefined 출력됨.
+
+## 일반 함수로 호출된 모든 함수(중첩 함수, 콜백 함수 포함) 내부의 this에는 전역 객체가 바인딩된다.
+
+- 모두는 아님. 349p
+- 콜백 함수의 경우 원칙은 전역 객체를 바인딩하지만 그렇지 않은 경우도 있다.
+
+```javascript
+[1, 2, 3].forEach(
+  function () {
+    console.log(this);
+  },
+  [10, 20, 30]
+);
+```
+
+# 23 실행 컨텍스트
+
+실행 컨텐스트는 코드를 실행하는데 필요한 환경을 제공하는 객체. 식별자 결정을 더욱 효율적으로 하기 위한 수단.
+자바스크립트 엔진이 코드를 스캔하며 변수와 함수를 블록별로 렉시컬 실행 컨텍스트 안에 저장함.
+
+- [[Environment]] 내부 슬롯에 함수의 상위 스코프를 저장함.
+
+## 선언방법에 따른 실행 방법 기억해두기
+
+- 함수 표현식 function expression VS 함수 선언문 function declaration
+- var `{study : undefinde}`, let/const `{study:    }`, `{study : f{}}`
+
+### 생성 단계
+
+- 실행 컨텐스트 생성
+- 선언문만 실행해서 Enviroment Record에 기록
+
+### 실행 단계
+
+- 선언문 외 나머지 코드 순차적 실행
+- Environment Record 참조하거나 업데이트