[Javascript] var let const 차이점

es6이후로 let과 const과 나왔는데요. 예전에 var만으로 변수 선언을 했지만 왜 let 과 const가 나왔고 무슨 차이점이 있는지 알아 보겠습니다.

 

변수 선언

---

1. var

var의 경우를 먼저 보겠습니다.

var a = 10;
console.log(a); // 10

var a = 100;

console.log(a); // 100

var는 변수를 중복으로 선언이 가능합니다.  물론 지금은 예측이 가능하지만 나중에 되면 global 변수 a와 function 안에 변수 a가 중복되어 선언이 될 수도 있고 프로젝트가 커지다 보면 같은 변수 이름 사용해서 예상치 못한 에러가 나올 수 있습니다. 

 

2. let 

 

let은 중복 선언은 불가능 하지만 재할당은 가능합니다.

let a = 10;

console.log(a); // 10

let a = 100;

console.log(a); // Uncaught SyntaxError: Identifier 'a' has already been declared

a = 100;

console.log(a); // 100

 

3. const 

const 는 재할당 하지않은 상수(constant)이다. 즉 중복선언, 재할당이 불가능하다.

const a = 0;

const a = 10; 
console.log(a); //Uncaught SyntaxError: Identifier 'a' has already been declared

a = 100; // Uncaught TypeError: Assignment to constant variable.

 

하지만, 상수는 변하지 않는다고 배웠지만 javascript코드를 보다 보면 const obj = {}; , const array = []; 와같이 배열과 객체를 const로 정의하고 안에 값을 변경한다. 불변하다고 배웠는데 값이 변경될 수 있다고 생각한다. 그 이유는, "const는 할당된 값은 절대로 변하지 않는다"이다. object, array는 변수를 할당될 때 주소가 할당이 된다. 그러므로 그안에 값이 넣어줘도 object와 array는 그 주소가 변경되는게 아닌 추가가 되는 것이기 때문에 에러가 나지 않는다.

 

const arr = [];

arr.push(1); // [1]

arr.push(2);  // [1, 2]

arr.push(3); // [1, 2, 3]

const obj = {};

obj[a] = 1; // { a: 1 }

//주소를 할당 받기때문에 서로 다른 빈 배열을 비교해도 같지 않다는 것을 알 수 있다.

const a = [];
const b= [];

console.log(a === b); // false;

호이스팅 할때

---

javascrpt는 코드를 실행하기전에 변수, 상수, function(*), class등을 먼저 힙메모리에 저장해 놓습니다. 이 과정에서 var과 let, const는 차이점이 있습니다.

 

1. var

var같은 경우는 var을 선언해 놓을때 undefined을 선언해 놓습니다.

console.log(a); // undefined
var a = 10;
console.log(a); // 10

 

당연한 얘기지만 a변수를 선언하기전에 a를 사용하는 것부터 잘못된 코드입니다. 코드를 돌렸을때 error메세지 말고 undefined가 찍힌다면 코드를 작성하는 사람이 잘못을 인지하지 못하고 계속 작성하다 나중에 저 undefined때문에 큰 문제가 생길 수 있습니다. 

이를 방지 하기 위해 es6부터는 let, const가 나오게 되었습니다.

 

2. let, const

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

let a = 10;

console.log(a); // 10;

let과 const가 선언되기전에 선언되지않은 변수 를 사용하면 reference에러가 찍혀서 좀더 예상치 못한 에러를 빠르게 발견 할 수 있습니다.

 

스코프(scope)

---

1. var

var은 함수내부에 선언된 변수만 지역변수로 간주하여 나머지는 전역변수로 간주합니다.

function a() {
	var b = 10;
    console.log(b) // 10
}

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

 

2. let, const 

let과 const는 함수 뿐만 아니라 for문 , if문에서도 지역변수로 간주하여 전역에서 변수를 찾을 수 없습니다.

for (let i = 0; i < 3; i += 1) {
	const a = 10;
    
 	console.log(a) // 10;
}

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

//반면 var에서는

if (true) {
	var a = 10;
    
    console.log(a) // 10;
}

console.log(a) // 10