13.1 스코프

식별자 자신이 선언된 위치에 의해 다른 코드가 자신을 참조할 수 있는 유효 범위

즉 식별자가 유효한 범위

var var1 = 1; // 코드의 가장 바깥 영역에서 선언한 변수

if (true) {
  var var2 = 2; // 코드 블록 내에서 선언한 변수
  if (true) {
    var var3 = 3; // 중첩된 코드 블록 내에서 선언한 변수
  }
}

function foo() {
  var var4 = 4; // 함수 내에서 선언한 변수

  function bar() {
    var var5 = 5; // 중첩된 함수 내에서 선언한 변수
  }
}

console.log(var1); // 1
console.log(var2); // 2
console.log(var3); // 3
console.log(var4); // ReferenceError: var4 is not defined
console.log(var5); // ReferenceError: var5 is not defined

var x = 'global';

function foo() {
  var x = 'local';
  console.log(x); // local
}

foo();

console.log(x); // global

전역에 선언된 var x = 'global';과foo함수 내에 선언된var x = 'local';은 식별자 이름은 같지만 스코프는 다르다.

자바스크립트 엔진은 식별자를 결정할 때 “식별자를 검색할 때 사용하는 규칙”이 있다. 이것이 스코프다.

이때 코드의 문맥과 환경을 고려한다.

렉시컬환경: 코드가 어디서 실행되며 어떤 코드가 있는지. 실행컨텍스트: 렉시컬 환경을 구현한 것이 실행컨텍스트, 모든 코드는 실행컨텍스트에서 평가되고 실행된다.

unction foo() {
  var x = 1;
  // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다.
  // 아래 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다.
  var x = 2;
  console.log(x); // 2
}
foo();

var키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 허용된다.

function bar() {
  let x = 1;
  // let이나 const 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용하지 않는다.
  let x = 2; // SyntaxError: Identifier 'x' has already been declared
}
bar();  

하지만  let이나 const 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용하지 않는다.

13.2 스코프의 종류