var let const의 차이

date

Oct 9, 2021

thumbnail

slug

var, let, const의 차이

author

status

Published

변수 선언 방식의 차이

var의 단점을 먼저 살펴보자.

var apple = "apple"
console.log(apple)
var apple = "banana"
console.log(apple)

을 출력해보면 각자 다른 값이 출력된다.

서로 각자 다른 변수를 선언했음에도 불구하고 값이 바뀔 우려가 있다.

ES6 이후 추가된 변수 선언 방식이 let과 const이다.

위 예시에서 변수 선언 방식만 변경해보자.

let apple = "apple"
console.log(apple)

let apple = "banana"
console.log(apple)
```js
// Uncaught SyntaxError: Identifier 'apple' has already been declared

let과 const 모두 변수 재선언이 되지 않는다.

1.1. 이 둘의 차이를 알아보자.

let은 변수에 재할당이 가능하다.

let apple = 'apple'
console.log(apple)// bathingapelet apple =  'banana'
console.log(apple)
// Uncaught SyntaxError: Identifier 'apple' has already been declared

apple = 'react'
console.log(apple)

그러나 const는 재선언, 재할당이 불가능하다.

let apple =  'apple'
console.log(apple)// bathingapelet apple =  'banana'
console.log(apple)
// Uncaught SyntaxError: Identifier 'apple' has already been declared

apple =  'react'
console.log(apple)
//Uncaught TypeError: Assignment to constant variable.

2. 2. 호이스팅

호이스팅은 변수 선언문을 최상단에 위치시킨 것처럼 동작하게 하는 특성이다.

JS는 모든 선언을 호이스팅하는데 let으로 선언된 변수를 선언문 이전에 불러오게 되면 오류가 발생한다.

console.log(apple);// undefinedvar apple;

console.log(banana);// Error: Uncaught ReferenceError: banana is not definedlet banana;

이는 let으로 선언된 변수는 일시적 사각지대에 빠지기 때문이다.

변수는 선언 - 초기화 - 할당 의 단계를 거쳐 생성되는데

var로 선언된 변수는 선언과 초기화가 한번에 이루어진다.

console.log(apple);// undefinedvar foo;
console.log(apple);// undefined

foo = 1;// 할당문에서 할당 단계가 실행된다.console.log(apple);// 1

하지만 let으로 선언된 변수는 선언과 초기화가 분리되어 진행된다.

console.log(apple);// ReferenceError: apple is not definedlet foo;//변수 선언문에서 초기화 단계가 실행된다.console.log(apple);// undefined

foo =  1;// 할당문에서 할당 단계가 실행된다.console.log(apple);// 1

3. 결론

변수 선언에는 기본적으로 const를 선언하고 재할당이 필요한 경우만 let을 사용해야한다.

재할당을 하는 경우 생각보다 많지 않기 때문에 const로 의도치 않은 대할당을 방지할 수도 있다.