var, let, const 차이점

var 의 문제점

var 는 선언방식에서 큰 단점을 가지고 있다.

var name = 'seon geon'
console.log(name) // seon geon

var name = 'hong gil dong'
console.log(name) // hong gil dong

변수를 한 번, 그 이상 여러번 선언을 해도 에러가 나지 않고 적용이 된다.

 

코드량이 많아지면 복잡해져서 어디서 어덯게 쓰였는지 파악하기가 힘들고 원치 않게 값이 바껴버릴 수가 있다.

 

이 문제를 보완하기 위해 ES6 이후에 나온 선언방식이 let 과 const 다

 

 

위에 코드를 선언방식만 바꿔서 실행하면

let name = 'seon geon'
console.log(name) // seon geon

let name = 'hong gil dong'
// Uncaught SyntaxError: Identifier 'name' has already been declared

let 과 const 는 변수 재선언이 되지 않기 떄문에 이미 선언되었다고 에러메세지가 뜬다.

 

 

let 과 const 의 차이점

let 은 변수 재할당이 되지만, const는 변수 재선언과 재할당 둘 다 불가능하다.

const name = 'seon geon'
console.log(name) // seon geon

const name = 'hong gil dong'
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'woo jae'
console.log(name) 
//Uncaught TypeError: Assignment to constant variable.

 

호이스팅

호이스팅(Hoisting)이란

var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다.

자바스크립트의 모든 선언에는 호이스팅이 일어난다.

호이스팅 관련 참조 링크

https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/

 

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

하지만, var 로 선언된 변수와는 달리 let 로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생한다.

// 스코프의 선두에서 선언 단계와 초기화 단계가 실행된다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 있다.

console.log(foo); // undefined

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

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

 

 

let 으로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.

// 스코프의 선두에서 선언 단계가 실행된다.
// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 없다.

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

let foo; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(foo); // undefined

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

 

요약 정리

고로 var 선언 방식의 사용을 추천하지 않는다.

 

기본적으로 const를 사용하며, 재할당이 필요한 경우에만 한정해서 let 선연 방식을 사용한다.

const 를 사용함으로써 의도치않은 재할당을 막아줘서 안전하다.

변수의 스코픈 최대한 좁게 만든다.