[JS] var? let? const?

📌 JavaScript의 변수 선언

❓변수 선언 방식 var, let, const의 정확한 차이점이 궁금해져 알아보는 시간을 가졌다.

📝 변수

: 값을 저장할 수 있는 메모리 공간.

🚩 var : 중복 선언 가능

var name = 'javascript';
console.log(name); // javascript

var name = 'react';
console.log(name); // react

✔️ var로 선언한 변수는 동일한 이름으로 여러번 중복해서 선언이 가능하다.

✔️ 변수를 한 번 더 선언했음에도 불구하고 에러가 나지 않고 각기 다른 값이 출력되는 것을 볼 수 있다.

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

✅ 이를 보완하기 위해 ES6부터 추가된 변수 선언 방식이 let, const 이다.

---

🚩 let : 중복 선언 불가, 재할당 가능

let name = 'javascript';
console.log(name); // javascript

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

name = 'vue';
console.log(name); // vue

✔️ var 과 다르게 let은 해당 변수가 이미 선언되었다는 에러 메세지가 출력된다. 따라서 중복 선언이 불가능 하다.

✔️ name=’vue’ 와 같이 변수선언 및 초기화 이후 다른 값을 재할당 할 수는 있다.

---

🚩 const : 중복 선언 불가, 재할당 불가

const name = 'javascript';
console.log(name); // javascript

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

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

✔️ let은 변수에 다른 값을 재할당할 수 있지만, const는 재할당 시 에러 메세지가 출력된다.

✔️ 한번만 선언이 가능하고, 바꿀 수 없다.

---

💫 변수 스코프

: 스코프란, 유효한 참조 범위를 뜻하고, var로 선언한 변수와 let,const로 선언한 변수의 스코프는 다르다.

// 블록 레벨 스코프
function func() {
	if (true) {
    	let a = 5;
        console.log(a); // 5
    }
    console.log(a); // ReferenceError: a is not defined
}

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

💫 변수 호이스팅

: 함수 내부에 있는 선언들을 모두 끌어올려 해당 함수 유효 범위의 최상단에 선언하는 것을 뜻한다.

: 즉, 나중에 선언된 변수를 먼저 사용할 수 있다.

: 변수를 사용, 혹은 참조한 후에 선언 및 초기화 하더라도 undefined를 반환한다.

📝 var , 함수 선언문 : 호이스팅 발생

console.log(x === undefined); // true
var x = 3;

var myvar = "my value";

(function() {
  console.log(myvar); // undefined
  var myvar = "local value";
})();

📝 let, const, 함수 표현식 : 호이스팅이 발생은하지만, 다른 방식으로 작동됨.

/* 변수 호이스팅 */
console.log(a); // ReferenceError: a is not defined

let a = 5;
console.log(a); // 5

/* 함수 호이스팅 */
foo(); // error

var foo = function() {
	console.log("foo");
}

✔️ var과 달리 let으로 선언된 변수를 선언문 이전에 참조하면 참조에러가 발생한다.

✔️ 이는 let으로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(TDZ)에 빠지기 때문이다.