자바스크립트 스코프 - 전역, 로컬

스코프는 변수, 함수의 참조 유효범위이다. 쉽게 말하자면, 어느 위치에서 참조할 수 있는지다.

• 스코프의 종류
  • 전역 스코프
  • 로컬 스코프
• 스코프의 레벨
  • 함수 스코프 (var)
  • 코드 블록 스코프 (let, const)

앱이 실행되면 전역 컨택스트가 가장 먼저 생성된다.
함수가 실행되면 메모리 상의 실행 컨텍스트가 생성된다.

모든 변수, 함수의 저장되어 환경 레코드에 저장된다.
현재 환경 레코드에 찾는 값이 없으면 외부 렉시컬 환경 참조를 이용해서, 상위 스코프의 환경 레코드에서 찾는다. 전역 스코프까지 값을 갔는데 못 찾는다면 Reference Error가 발생한다. 이를 스코프 체인이라 한다.

• Memory
  • A함수 실행 컨텍스트
    • 환경 레코드
    • 외부 렉시컬 환경 참고
  • B함수 실행 컨텍스트
    • 환경 레코드
    • 외부 렉시컬 환경 참고
  • C함수 실행 컨텍스트
    • 환경 레코드
    • 외부 렉시컬 환경 참고

문제를 풀어보자!

let apple = "apple";

function fruit(eat) {
  let apple = "banana";
  eat();
}

function eat() {
  console.log(apple);
}

fruit(eat); // ?
eat();      // ?

정답은?!

apple
apple

해설해보겠다.

핵심은 "eat()의 상위 스코프는 무엇인가?"이다.

후보는
1) 함수가 호출된 위치 -> 동적 스코프
2) 함수가 만들어진 위치 -> 정적 스코프 = 렉시컬 스코프

• 전역 컨텍스트
  • apple: "apple"
• fruit 컨텍스트
  • apple: "banana"
• eat 컨텍스트

1) banana, apple
2) aaple, apple

대다수 언어는 정적 스코프(렉시컬 스코프)를 따른다.
자바스크립트도 그렇다. 그래서 정답이 2번이다.