블록 스코프와 매개변수

분석

const x = true;
let y = false;
function a() {
  let a = 4;
  y = true;
  if (x) {
    let a = 3;
    for (let i = 0; i < a; i++) {
      console.log(i);
    }
    if (!y) {
      kkk();
    }
  }
  z(); //에러
}

a();
const z = (a, b) => {
  return a + b;
};
z(3, 5);

-a()까지 호출된 호출 스택과 선언 지도

• 호출 스택
  1. 우선 anonymous(this=window)가 호출 스택에 들어감
  2. a(this=window)가 호출 스택에 들어감
• 선언 지도
  1. 우선 a(fn)가 호이스팅 되어서 들어가고, 그다음으로 x(true), y(false) 선언
  2. a(fn) 안에 a(4)가 선언, 이게 가능한 이유는 서로 다른 스코프 블록에 a가 있기 때문
  3. a(fn) 안에 y = true가 있어서 anonymous에 선언된 y가 true로 변경, a(fn) -> anonymous -> y이기 때문
  4. a(fn), if {} 블록 안에 a(3) 선언, 마찬가지로 서로 다른 스크프 블록에 a가 있기 때문
  5. a(fn), if {}, for 블록은 for문이 3번 돌기에 3개 선언되고, 각각 i가 다른 값을 가짐
  6. !y는 false라서 if (!y) 문은 무시, kkk()도 선언된 것이 없기에 무시
  7. z는 호이스팅은 되었지만 TDZ라서 에러가 발생
     • 만약 에러를 발생시키지 않으려면 z를 화살표 함수가 아니라 function으로 선언해야 함

-a()가 끝나고 z가 호출된 호출 스택과 선언지도

a()와 관련된 호출 스택과 선언 지도에 선언된 변수들이 다 수행되고 사라짐

• 호출 스택
  1. z(this=window)가 호출 스택에 들어감
• 선언 지도
  1. anonymous에 z(fn)이 선언
  2. z에 있는 매개 변수도 변수기에 a(3), b(5)가 선언

-출처

https://www.youtube.com/watch?v=QME8w1zV82g&list=PLcqDmjxt30Rt9wmSlw1u6sBYr-aZmpNB3&index=10