Section 12. 스코프와 바인딩

1. 렉시컬과 클로저

I. 렉시컬(정적) 스코프

• 변수나 상수가 코드상 어디에 지정되었는가에 따라 그 사용 범위를 결정
• 함수가 코드상 어디에서 정의되었는가에 따라 그 상위 스코프를 결정
• 정의된 블록을 기준으로 상위 스코프의 값이 사용됨

II. 렉시컬 환경

• 전체 문서, 함수, 블록을 실행하기 전 만들어지는 내부 객체
  구성요소
• 환경 레코드 - 해당 스코프의 데이터들
• 외부 렉시컬 환경에 대한 참조

III. 클로저

• 내부 함수에서 외부 함수의 값에 접근할 수 있다는 개념 함수 중첩시
• 상수에 함수를 저장했을 때 단지 값을 복사해서 갖는 것이 아니라, 해당 값이 저장되는 외부 환경 자체가 유지됨

2. this의 동적 바인딩

I. this

함수의 호출 방식에 따라 가리키는 바가 달라짐 - 자바스크립트 특성
객체에 속하지 않은 함수에서는 this사용 의미 없음

• 객체 안에서의 this (화살표 함수 제외)
  a. 객체 리터럴- 해당 객체를 가르킴
  b. 생성자 함수 - 생성될 인스턴스를 가리킴
  c. 클래스 선언 - 생성될 인스턴스를 가리킴

II. 동적 바인딩

자바스크립트의 독특한 동작방식
this가 가리키는 대상이 함수의 호출 주체 또는 그 방식에 따라 달라짐

해결하기 위해서

• call, apply을 사용한 함수 호출
• bind를 사용한 this대상 고정

// ⭐ this가 바인딩된 새 함수를 만듦
italian.makeRightStew = korean.makeStew.bind(korean); 

console.log(
  italian.makeRightStew(false, 2)
);

등등 더 어려운 내용이 있는데.. PASS!!!

3. this의 정적 바인딩

function 선언 함수, 메서드, 화살표 함수 중 function 선언 함수만 생성자로 활용 가능

// obj에 function 선언 함수가 있다는 가정
const func1 = new obj.func1();

화살표 함수와 메서드는this를 정적으로 바인딩함

1. 객체 리터

const obj = {
  x: 1,
  y: 2,

  func1: function () {
    console.log('1.', this);
  },
  func2 () {
    console.log('2.', this);
  },
  func3: () => {
    console.log('3.', this);
  }
}
// this가 해당 객체를 가리킴
obj.func1();
obj.func2();

// 💡 this가 상위 스코프를 가리킴
obj.func3(); 

강의를 들을 때는 '으음.. 그렇군!'이라고 생각이 들었다.
하지만, 막상 정리를 해보려니 코드의 변화 바인딩적용한 거 뭐 어쩌구 저쩌구 헷갈린다. 그래서 이번 강의 내용 정리는 PASS!

출처
[제대로 파는 자바스크립트(JavaScript) - by 얄코], [강의링크]