[Javascript] var, let, const는 어떤 차이점이 있을까?

TaeHyeon·2020년 1월 31일
0
post-thumbnail

var

var는 함수 스코프를 가지고 있는 변수 선언문이고 선언되면 프로그램이 실행 될 때 가장위로 끌려올려지고(hoisting) undefined 로 초기화 된다.

console.log(a);//undefined
var a = 1;

또한 var를 사용하면 변수를 선언 할 때 값이 유동적으로 바뀐다는 단점이있다.

var a = 1;
console.log(a); // 1
var a = 2
console.log(a); // 2

같은 이름의 변수를 중복해서 선언했는데고 오류가 나지 않는다. 이러한 문제 때문에 es2015에서 let, const 가 추가 되었다.

let, const

let과 const는 블록 스코프(block-scoped)를 가지고 있고 var 와 달리 변수의 재선언이 불가능하다. let 과 const의 유일한 차이점은 let은 변수를 재할당 할 수 있지만 const는 재할당 재선언이 불가능하다.

let a = 1;
let a = 2
console.log(a); // Uncaught SyntaxError: Identifier 'a' has already been declared

const b = 1;
b = 2
console.log(b);// Uncaught TypeError: Assignment to constant variable.

또한 블록스코프를 가지고 있기 때문에 변수가 중괄호를 기준으로 갇히게 된다.

for(let i = 0; i < 10; i++) {
  console.log(i);
}
console.log(i); // Uncaught ReferenceError: i is not defined

블록 밖에서는 let과 const로 선언된 변수에 접근 할 수 없다.

let, const hoisting

let과 const 는 블록을 기준으로 호이스팅이 된다.

console.log(a);// Uncaught ReferenceError: Cannot access 'a' before initialization
let a = 1

let은 호이스팅이 되긴 하지만 var 처럼 초기화가 되지 않는다. 이때 TDZ(Temporal Dead Zone) 구간에 들어가게 되는데 여기에 있는 변수는 선언은 되었지만 초기화가 되지 않아 메모리가 할당되지 않은 상태를가 된다.

let은 변수만 선언하고 나중에 할당해도 되지만 const 는 변수를 선언함과 동시에 변수를 할당해야한다.

let a;
a = 1;

const b; //Uncaught SyntaxError: Missing initializer in const declaration

var, let, const 어떤걸 써야할까?

재할당 하지 않는 변수는 const, 재할당을 해야하는 경우는 let을 사용하면된다. 대부분의 변수는 const를 이용해 선언하게 된다. 일반적으로 객체(객체, 배열, 함수)는 const를 사용한다.

const를 사용해 선언한 객체의 속성을 바꾸는 것이 가능하다.

const obj = {};
obj.a = 1;
console.log(obj) // {a: 1}

var는 의도하지 않은 버그를 발생시킬 수 있기 때문에 사용하지 않는 것이 좋다.

0개의 댓글