[모던자바스크립트 딥다이브] 13장 스코프

스코프란

• scope, 유효범위
• 식별자(변수 이름, 함수 이름, 클래스 이름 등)가 유효한 범위
• 식별자 결정 (Identifier resolution) - 자바스크립트 엔진이 코드문맥에 따라 스코프를 참고하여 식별자의 범위를 파악하는 것
• 스코프란 개념이 없다면? → 식별자 이름은 전체 프로그램에서 유일무이하게 하나만 사용해야 한다.
• OS 에서 파일명 → 식별자 / 디렉토리명 → 스코프 (동일한 이름의 test.txt 파일을 생성할 때 myDocs/test.txt 파일과 Desktop/test.txt 파일은 이름은 같지만 다른 파일이다.)

스코프의 종류

1. 전역 스코프

전역(global) - 코드의 가장 바깥 영역

전역은 전역 스코프를 만든다.
전역 스코프는 어디서든 유효하며, 참조 가능하다.

2. 지역 스코프

지역(local) - 함수 몸체 내부

지역은 지역 스코프를 만든다.
지역 스코프는 자신의 지역 스코프와 하위 스코프에서 유효하다.

스코프 체인

함수의 중첩 : 함수는 전역에서 정의도 가능하며 함수 몸체에서도 정의 가능
함수가 중첩될 수 있음 → 함수의 지역 스코프도 중첩 가능 → 즉, 스코프는 함수의 중첩에 의해 계층적 구조를 가질 수 있다.
스코프 체인 : 스코프가 계층적으로 연결되어 있는 것
자바스크립트 엔진은 스코프 체인을 따라 식별자를 검색한다.

function foo() {
    console.log('전역 똥')
}

function bar() {
    console.log('전역 작대기')
    function foo() {
      console.log('지역 똥')
  }
    foo() //지역 똥
}

bar()
foo() //전역 똥

// 호이스팅 되는 함수의 경우도 호이스팅 되어서 함수 객체가 생성된 다음
// 함수 이름과 동일한 식별자에 할당하므로 스코프 체인을 따른다.

함수 레벨 스코프

• 자바스크립트는 함수 레벨 스코프를 가지므로, if, while 문 등 코드 블록은 지역 스코프를 생성하지 않는다.
• 즉, 코드 블록이 아닌 함수에 의해서만 지역 스코프가 생긴다.
• ES6 부터 추가된 변수 선언 키워드인 let, const는 블록 레벨 스코프를 가진다.

렉시컬 스코프

• 렉시컬 스코프 ( = 정적 스코프) : 코드 평가 단계에서 스코프를 정하는 것
  • 함수를 어디서 호출하였는지에 따라 상위 스코프를 정한다 → 동적 스코프
• 자바스크립트는 랙시컬 스코프를 따른다.

var x = 1
function foo() {
  var x = 10;
  bar();
}
function bar(){
  console.log(x)
}

foo() // 1
bar() // 1
// 자바스크립트는 상위 스코프를 평가시점에 정하므로 bar 함수가 정의된 곳에서 상위스코프를 가진다.
// 따라서 bar()함수의 상위 스코프는 전역이 되고, console.log(x)를 수행하기 위해 x 값을
// 전역 스코프에서 찾게 되고 x를 출력한다.