[Javascript] 변수 선언 var, let, const 차이점과 호이스팅

원래 자바스크립트의 변수 선언이 가능한 키워드는 var 밖에 없었습니다.

 

var의 각종 문제점들이 대두되고, ES6부터 변수 선언 키워드로 let과 const가 추가되어 사용되고 있습니다.

 

그럼 변수 선언 방식에 대한 var, let, const의 차이점을 알아보겠습니다.

 

 

javascript 변수 선언

---

중복 선언

• var  : 중복 선언 가능

var str = "var입니다" // 선언 O, 초기화 O
console.log(str) 
// var입니다

var str = "다시 선언했습니다" // 선언 O, 초기화 O
console.log(str) 
// 다시 선언했습니다

var str // 선언 O, 초기화 X
console.log(str) 
// 다시 선언했습니다

var은 변수를 다시 선언할 수 있다는 치명적인 단점을 지니고 있습니다.

 

기존 다른 언어는 이름이 같은 변수를 선언할 경우 오류가 발생하기 마련인데 자바스크립트는 오류조차 뜨지 않습니다.

 

이러한 var의 특징은 큰 프로젝트에서 미리 선언한 변수명을 잊고 있다가 재할당할 수도 있는 상황을 야기시키기도 합니다.

 

• let, const : 중복 선언 불가능

let str1 = "let 선언" 
let str1 = "재선언"; 
// SyntaxError: Identifier 'str1' has already been declared 

const str2 = "const 선언"
const str2 = "재선언"
// SyntaxError: Identifier 'str2' has already been declared

let과 const로 다시금 선언을 하면 SyntaxError 에러 메세지가 뜨는 것을 볼 수 있습니다.

 

 

재할당

• var: 가능
• let : 가능
• const : 불가능

var varStr = "var 선언"
varStr = "var 재할당"
console.log(varStr)
// var 재할당

let letStr = "let 선언"
letStr = "let 재할당"
console.log(letStr)
// let 재할당

const constStr = "const 선언"
constStr = "const 재할당"
// TypeError: Assignment to constant variable.

const constStr2; // const 값 할당 없이 선언 시 에러
// SyntaxError: Missing initializer in const declaration

var과 let은 정상적으로 재할당이 가능한 모습을 보이지만

const 같은 경우는 재할당 시 에러가 발생합니다.

 

const는 변수 재할당이 막혀있지만

객체를 생성 후 프로퍼티를 수정하는 것은 가능합니다.

 

아래 코드를 참고해주세요.

const camera = { brand : "canon" } // 객체 생성

camera.brand = "sony" // 프로퍼티 수정 가능
camera.lens = "24-70" // 프로퍼티 생성 가능
delete.lens // 프로퍼티 삭제 가능

// 객체 자체 변경은 에러
camera = 0 // Uncaught TypeError: Assignment to constant variable.

 

 

호이스팅(Hoisting)

---

호이스팅은 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위 최상단에 선언하는 것을 뜻합니다.

 

쉽게 말해 자바스크립트가 실행되기 전에 변수와 함수에 대한 전체적인 정보를 미리 메모리에 담아주는 과정입니다.

 

호이스팅 시 변수 저장

호이스팅 시 변수에 할당된 값들까지 저장되는 것이 아니라

var은 undefined,

let은 초기화 되지 않은 채로 저장이 이루어집니다.

 

호이스팅 시 에러

console.log(varStr) // undefined
var varStr = "varStr"

console.log(letStr); // Error: Uncaught ReferenceError: letStr is not defined
let letStr = "letStr

 

즉 변수의 사용보다 변수의 선언이 아랫줄에 이루어진다면

var은 definded의 값으로 사용되고

let은 값이 없기 때문에 에러 메세지를 띄우게 됩니다.

 

호이스팅에 의한 에러를 방지하기 위해서는 변수를 사용하는 실행문보다 윗줄에 변수의 값을 할당 해주면 됩니다.

 

---

let, const의 등장 이후로 var은 작동은 하지만 거의 사장되었으며

구글의 공식 문서에서도 var은 절대 사용하지 말고 let, const의 사용을 적극 권장했습니다.

 

버그 발생과 메모리 누수의 위험이 있는 var의 사용은 지양하고

재할당할 변수는 let,

재할당이 필요 없는 상수와 객체에는 const를 사용을 지향합니다.

 

 

javascript var let const 호이스팅, 자바스크립트 var let const 호이스팅