[JavaScript] var const let 차이점

---

자바스크립트를 이용하면 변수라는것을 선언해주는데, 종류는 var, let, const가 있다. 이것들을 사용은 하고 있는데, 각각 무슨 차이점이 있는지 잘 모르는거 같아서 정리가 필요할것 같았다.

 

1. 변수 선언 방식

let, const의 경우는 2015부터 나왔던거 같고, 그전까지는 쭈욱 var를 사용했던것 같다. 우선 var는 변수 선언 방식에 단점을 가지고 있다.

var test = 'java'
console.log(test) // java

var test = 'javascript'
console.log(test) // javascript

변수를 재선언했음에도 불구하고, 에러가 나오지 않고 각각 다른값들이 출력되는것을 확인 할 수 있다.

테스트 삼아서 console.log를 통해 보는건 괜찮을 수 있겠다만 코드의 양이 많아진다면 어디서 어떻게 사용 될지 파악하기도 힘들고, 값이 바뀔 우려가 있다.

그래서 이를 보완하기 위해 ES6 이후 let과 const가 추가 되었다고한다.

 

let test = 'java'
console.log(test) // java

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

let이나 const로 선은을 했다면 이미 선언되었다는 에러메세지가 나온다. 즉, 변수가 재선언되지 않는다는 말씀.

 

let과 const의 차이점은 immutable(불변) 여부이다.

let의 경우 변수 재할당은 가능하지만, const의 경우에는 재선언, 변수 재할당이 모두 불가능하다.

 

 let test = 'java'
 console.log(test) // java

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

 test = 'react'
 console.log(test) //react

const test = 'java'
console.log(test) // java

const name = 'javascript'
console.log(test) 
// Uncaught SyntaxError: Identifier 'name' has already been declared

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

호이스팅(Hoising) 부분에서도 차이가 있다고한다. 먼저 호이스팅이란 var 선언문 function 선언문 등을 해당 스코프의 선두로 옮긴것처럼 동작하는 특성을 말한다.

 

※ 스코프(Scope)란?

: 변수에 접근 할 수 있는 범위. global(전역)과 local(지역) 이렇게 2가지 타입이 있음.

전역 스코프: 전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근 할 수 있다는 의미

지역 스코프: 해당 지역에서만 접근 할 수 있어 지역을 벗어난 곳에서 접근 할 수 없다는 의미

 

자바스크립트는 ES6에서 도입된 let, const를 포함하여 var, 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로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어지지만 let로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행.

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

console.log(foo); // undefined

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

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


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

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

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

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

그럼 변수를 어떤 방식으로 써야하나?

변수 선언에는 기본적으로 const를 사용하고, 재할당이 필요한 경우에 한정에 let을 사용하는것이 좋다. 객체를 재할당하는 경우는 흔하지 않기 때문에 const를 사용하면 의도치 않은 재할당을 방지해주기때문에 생각보다 안전하다.

- 재할당이 필요한 경우에 한정하여 let을 사용. 이때, 변수의 스코프는 최대한 좁게 만든다.

- 재할당이 필요 없는 상수와 객체에는 const를 사용.

 

후..지금껏 대부분 var로만 선언했는데, const로 선언하는것을 좀 연습해둬야겠다.

 

--참고--

1. https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d