var, let, const 제대로 알기

var는 함수 레벨 스코프(Function-level scope)

함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.

 

let과  const는 블록 레벨 스코프(Block-level scope)

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

 

1. var

• 아래와 같이 블록 내에 선언해도 foo는 전역변수여서 값이 재할당된다.

var foo = 123; // 전역 변수

console.log(foo); // 123

{
  var foo = 456; // 전역 변수
}

console.log(foo); // 456

 

2. let

• 코드 블록 내에 선언된 변수 foo는 블록 레벨 스코프를 갖는 지역 변수여서 참조가 불가능하다.

let foo = 123; // 전역 변수

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

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

• 중복 선언이 불가하다.

let bar = 123;
let bar = 456;  // Uncaught SyntaxError: Identifier 'bar' has already been declared

자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, function*, class)을 호이스팅한다. 호이스팅(Hoisting)이란, var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다.

• var 키워드로 선언된 변수는 선언단계와 동시에 undefined으로 초기화 되기때문에 참조가 가능하나, let는 그렇지않다.

console.log(foo); // undefined
var foo;

console.log(bar); // Error: Uncaught ReferenceError: bar is not defined
let bar;

 

3. const

• 선언와 동시에 할당이 이루어져야한다.

const FOO; // SyntaxError: Missing initializer in const declaration

• let과 마찬가지로 블록 레벨 스코프를 갖는다.

{
  const FOO = 10;
  console.log(FOO); //10
}
console.log(FOO); // ReferenceError: FOO is not defined​

• const의 재할당은 금지되지만, 객체 타입의 변수일 경우 객체의 내용은 변경이 가능하다.(객체 타입 변수에 할당된 주소값은 변경되지 않기때문에) 그래서 객체 타입의 변수 선언에는 const 를 사용하는 것이 좋다.

const user = { name: 'Lee' };

// const 변수는 재할당이 금지된다.
// user = {}; // TypeError: Assignment to constant variable.

// 객체의 내용은 변경할 수 있다.
user.name = 'Kim';

console.log(user); // { name: 'Kim' }​

 

참고 : https://poiemaweb.com/es6-block-scope