Scope

스코프는 참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙이다. 자바스크립트는 이 규칙대로 식별자를 찾는다.

구분

전역 스코프 (Global scope)

어디서든 참조 가능

지역 스코프 (Local scope or Function-level scope)

함수, 블록({})내에서만 참조 가능,
함수, 블록 내부에서 선언한 변수는 지역 변수, 외부는 전역 변수

var global = 'global';

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

console.log(global);
console.log(local); // ReferenceError: local is not defined

변수는 선언 위치(전역 또는 지역)에 의해 스코프를 가지게 된다.
즉, 전역에서 선언된 변수는 전역 스코프를 갖는 전역 변수이고,
지역에서 선언된 변수는 지역 스코프를 갖는 지역 변수가 된다.

ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다.
근데 var의 특징들이 있는데

1. 함수 레벨 스코프(Function-level scope)

function wow(){
	var foo = 1; // 지역 변수
}
console.log(foo); // ReferenceError: foo is not defined

• 함수의 코드 블록만을 스코프로 인정
  따라서 전역 함수 외부에서 생성한 변수는 모두 전역 변수
  이는 전역 변수를 남발할 가능성을 높인다.
• for 문의 변수 선언문에서 선언한 변수를 for 문의 코드 블록 외부에서 참조할 수 있다.

2. var 키워드 생략 허용

• 암묵적 전역 변수를 양산할 가능성이 크다.

3. 변수 중복 선언 허용

• 의도하지 않은 변수값의 변경이 일어날 가능성이 크다.

4. 변수 호이스팅

• 변수를 선언하기 이전에 참조할 수 있다.

for(var i = 0; i < 3; i++){
}
console.log(i); // 전역 변수, 3

var foo = 123; // 전역 변수

console.log(foo); // 123

{
  var foo = 456; // 전역 변수
}
foo = "이게 뭐람"; // 전역 변수
console.log(foo); // "이게 뭐람"

ES6는 이러한 var 키워드의 단점을 보완하기 위해 let과 const 키워드를 도입
let이랑 const는 블록 레벨 스코프를 따른다.

블록 레벨 스코프(Block-level scope)

모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다.

let foo = 123; // 전역 변수

{
  let foo = 456; // 지역 변수
  let bar = 456; // 지역 변수
}

console.log(foo); // 123
console.log(bar); // ReferenceError: bar is not defined