🔭 스코프 규칙
- var는 함수 스코프(Function Scope)를 갖는다.
- let과 const는 블록 스코프(Block Scope)를 갖는다.
function run() {
var foo = "Foo";
let bar = "Bar";
console.log(foo, bar);
{
// var foz = "Foz"
let baz = "Baz";
console.log(baz);
}
// console.log(foz); // "Foz"
console.log(baz); // ReferenceError: baz is not defined
}따라서, 위 코드를 실행했을 때, 블록 안에 let으로 선언한 baz를 출력하면 ReferenceError가 발생하고, 반대로 var으로 선언함 foz를 출력하면 그대로 출력하는 것을 볼 수 있다.
호이스팅
- var는 함수 스코프의 최상단으로 호이스팅 되고, 선언과 동시에 undefined로 초기화 된다.
- let과 const는 블록 스코프의 최상단으로 호이스팅 되고, 선언만 되고 값이 할당되기 전까지 어떤 값으로도 초기화되지 않는다.
function run() {
console.log(foo); // undefined
var foo = "Foo";
console.log(foo); // Foo
}
run();따라서, var의 경우 var foo가 함수 스코프의 최상단으로 호이스팅이 되서, 선언 전에 출력하면 undefined가 출력이 된다.
function run() {
console.log(foo); // ReferenceError: Cannot access 'foo' before initialization
let foo = "Foo";
console.log(foo);
}
run()반면에, let의 경우에는 let foo가 선언 전에 호이스팅 되긴 하지만, 어떤 값도 가지지 않기 때문에 ReferenceError가 발생한다. 이런 현상을 TDZ(Temporal Dead Zone)이라고 한다. 즉, 선언은 되었지만, 참조는 할 수 없는 사각지대를 갖는다는 것이다.
글로벌 객체로의 바인딩
'strict mode'가 아닐 때,
- var는 글로벌 스코프(Global Scope)에서 선언되었을 경우 글로벌 객체(Global Object)에 바인딩된다.
- let과 const는 글로벌 스코프에서 선언되었을 경우 글로벌 객체에 바인딩되지 않는다.
// 'use strict';
var foo = "Foo"; // globally scoped
let bar = "Bar"; // globally scoped
console.log(window.foo); // Foo
console.log(window.bar); // undefined브라우저 환경에서 글로벌 객체는 window인데, var의 경우 바인딩이 되었고, let의 경우에는 바인딩이 되지 않았다는 것을 볼 수 있다.
바인딩(Binding): 함수 호출과 실제 함수를 연결하는 방법이다. 즉 함수를 호출하는 부분에 함수가 위치한 메모리 번지를 연결시켜 주는 것이다. 자바스크립트에서 함수를 호출 할 때는 암묵적으로 arguments 객체 및 this 변수가 함수 내부로 전달된다. 이에 따라 this에 할당되는 값이 달라지게 되어 많은 개발자들이 혼돈을 겪게 된다.
재선언(Redeclaration)
- var는 재선언이 가능하다.
- let과 const는 재선언이 불가능하다.
var foo = "foo1";
var foo = "foo2"; // 문제 없이 재선언 가능
let bar = "bar1";
let bar = "bar2"; // SyntaxError: Identifier 'bar' has already been declaredlet vs const
- var와 let은 재할당(reassignment)이 가능하다.
- const는 선언과 초기화가 반드시 동시에 일어나야 하고, 재할당이 불가능하다. 즉, 상수와 같은 고정값을 선언할 때 사용하는 키워드이다.
참고
👨🏻💻☕️ 🎹🎵 🐰🎶 🛫📷