백엔드개발자지만 JS는 기본 소양이기도 하고 꼭 필요하므로 다시 공부해봅니다.

• JavaScript 에서 변수 선언 방식인 var,let,const 의 차이점에 대해 공부해봅니다.

1. 변수 선언 방식

• 우선 var는 예전에는 많이 써왔지만 변수 선언 방식에 있어서 큰 단점을 가지고 있습니다.

var name = "codej"
console.log(name)	// codej

var name = "jaeyeal"
console.log(name)	// jaeyeal

• 이런식으로 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각각 다른 값이 출력되는 것을 볼 수 있습니다.

• 이는 유연한 변수 선언으로 간단한 테스트에는 편리 할 수 있겠지만 코드량이 많아 진다면 어디에서 어떻게 사용 될지 파악하기 힘들뿐만 아니라 값이 바뀔 우려가 있습니다.

• 그래서 ES6 이후, 이를 보완하기 위해 추가된 변수 선언 방식이let,const입니다.

• 위의 코드에서 변수 선언 방식만 바꿔서 보자면

let name = "codej"
console.log(name)	// codej

let name = "jaeyeal"
console.log(name)	// Uncaught SyntaxError: Identifier 'name' has already been declared

• 에러를 보면 name 이 선언 되었다는 에러 메시지가 나옵니다.(const도 마찬가지 입니다.)
• 한마디로 변수 재선언이 되지 않습니다.
• 그렇다면 let 과 const의 차이점은 무엇일까?
• 이 둘의 차이점은 immutable 여부입니다.
• let은 아래와 같이 선언문을 제외하고 변수에 재할당이 가능합니다.

let name = "codej"
console.log(name)	// codej

let name = "jaeyeal"
console.log(name)	// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'java'
console.log(name)	//java

• 하지만 const은 변수 재선언,변수 재할당이 모두 불가능합니다.

let name = "codej"
console.log(name)	// codej

let name = "jaeyeal"
console.log(name)	// Uncaught SyntaxError: Identifier 'name' has already been declared

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

2. 호이스팅

• 호이스팅(Hoisting)이란, var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말합니다.

• 자바스크립트는 ES6에서 도입된 let,const를 포함하여 모든 선언(var,let,const,function,function*,class)를 호이스팅합니다.

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

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

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

• 이는 let으로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone,TDZ)에 빠지기 떄문이빈다.
• 참고로 변수는 선언 단계>초기화 단계>할당 단계 에 걸쳐서 생성되는데 var로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어집니다.

// 스코프의 선두에서 선언단계와 초기화 단계가 실행됩니다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 없습니다.
console.log(foo)	// undefined

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

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

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

// 스코프의 선두에서 선던언단계가 실행됩니다.
// 아직 변수가 초기화 되지 않았습니다.
// 따라서 변수 선언문 이전에 변수를 참조할 수  없습니다.

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

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

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

3. 정리

• 그렇다면 어떤 상황에 어떤 변수 선언 방식을 써야할까 고민이 됩니다.
• 변수 선언에는 기본적으로 const를 사용하고, 재할당이 필요한 경우에는 let을 사용하는 것이 좋습니다.
• 그리고 객체를 재할당하는 경우는 생각보다 흔치 않습니다.
• const를 사용하면 의도치 않은 재할당을 방지해 주기 때문에 보다 안전합니다.

4. 결론

1. 재할당이 필요한 경우에 한정에 let을 사용합니다. 이때 변수의 스코프는 최대한 좁게 만듭니다.
2. 재할당이 필요 없는 상수와 객체는 const를 사용합니다.