변수 선언 키워드 let, const, var의 차이

• let과 const는 ES6가 나오면서 새롭게 추가된 기능으로 그 이전에는 변수를 선언할 때 var 키워드를 사용했다.
• 그렇다면 변수를 선언할 때, let, const, var를 사용하는 것에 어떤 차이가 있을까?

var

var을 사용할 때 발생하는 문제들이 있었기에, 새로운 방법으로 변수를 선언하는 방식이 등장한 것이다.
이를 이해하기 위해서 우선, var에 대해 알아보자.

1. 함수 외부에서 선언되면, 그 변수의 범위는 전역적이다. (globally scoped)

이 변수는 전체 window에서 접근하고 사용할 수 있다.

var greeting = 'Hello!'
console.log(greeting); // 'Hello!'

2. 함수 내부에서 선언되면, 그 변수의 범위는 함수 scope 내이다. (function scoped)

이 변수는 선언된 function내에서만 접근하고 사용할 수 있다.

function newFunction() {
    var greeting = 'Hello!';
}
console.log(greeting); // ❗️Uncaught ReferenceError: hello is not defined

scope : 변수를 사용할 수 있는 범위를 뜻한다.

3. 값이 재할당(update)될 수 있고, 재선언(re-decalred)될 수도 있다.

• var로 선언된 변수의 값은 scope 내에서 재할당될 수 있다.

var greeting = 'Hello!';
greeting = 'Hi, instead.';
console.log(greeting); // 'Hi, instead.'

• var로 선언된 변수는 scope 내에서 재선언될 수도 있다.

var greeting = 'Hello!';
var greeting = 'Hi, instead.';
console.log(greeting); // 'Hi, instead.'

var의 문제

같은 이름의 변수가 이미 선언되어 있는지 모르고, 다시 변수를 선언하게 되면 예상치 못한 결과가 나올 수 있다.

---

let

1. 선언된 블록{ } 안에서만 사용할 수 있다. (block scoped)

if(true) {
	let greeting = 'Hello!';
  	console.log(greeting); // 'Hello!'
}

if(true) {
	let greeting = 'Hello!';
}
console.log(greeting); // ❗️Uncaught ReferenceError: hello is not defined

2. 값이 재할당(update)될 수는 있지만 재선언(re-declared)될 수는 없다.

• let으로 선언된 변수의 값은 scope 내에서 재할당될 수 있다.

let greeting = 'Hello!';
greeting = 'Hi, instead';
console.log(greeting); // 'Hi, instead.'

• let으로 선언된 변수는 scope 내에서 재선언될 수 없다.

let greeting = 'Hello!';
let greeting = 'Hi, instead.'; 
// ❗️Uncaught SyntaxError: Identifier 'greeting' has already been declared

하지만, 같은 이름의 변수들이 다른 scope에서 선언된다면, 에러가 발생하지 않는다.

let greeting = 'Hello!';
if(true) {
    let greeting = 'Hi, instead.';
    console.log(greeting); // 'Hi, instead.'
}
console.log(greeting); // 'Hello!'

➡️ 왜냐하면 이들은 서로 다른 scope에 있으므로 다른 변수로 취급되기 때문이다.
let으로 선언한 변수는 해당 scope 내에만 존재하므로, 이전에 같은 이름의 변수를 사용했더라도 상관이 없다.

---

const

1. 선언된 블록{ } 안에서만 사용할 수 있다. (block scoped)

let과 마찬가지로, const로 선언된 변수는 선언된 scope내에서만 접근하고 사용할 수 있다.

2. 값이 재할당(update)될 수 없고, 재선언(re-declared)될 수도 없다.

• const로 선언된 변수는 상수값(constant values)을 갖으며, scope 내에서 재할당될 수 없다.

const GREETING = 'Hello!';
GREETING = 'Hi, instead.'; 
// ❗️Uncaught TypeError: Assignment to constant variable.

• const로 선언된 변수는 scope 내에서 재선언될 수 없다.

const GREETING = 'Hello!';
const GREETING = 'Hi, instead.'; 
// ❗️Uncaught SyntaxError: Identifier 'GREETING' has already been declared

---

정리

	var	let	const
유효 범위	함수 스코프	블록 스코프 & 함수 스코프	블록 스코프 & 함수 스코프
값 재할당	O	O	X
재선언	O	X	X

---

변수 선언 규칙

1. 변수명은 camel case로 작성한다.

let userName = 'wlwl99';  // O

let user_name = 'wlwl99'; // X 

2. 변수명은 _, $, 문자로만 시작한다.

let day12 = '월요일';  // O
let _day12 = '월요일'; // O
let $day12 = '월요일'; // O

let 12day = '월요일';  // X - 숫자로 시작할 수 없다.
let @12day = '월요일'; // X - 언더바, 달러 외의 특수문자로 시작할 수 없다.

3. 상수나 축약어는 대문자와 snake case로 작성한다.

const HTML = 'Hyper Text Markup Language';
const MAX_LEVEL = '99';

4. JavaScript에서 이미 사용하고 있는 예약어는 사용할 수 없다.

var, let, const, typeof 등...

const var = 10; // X - var는 변수 선언 키워드이므로 변수명으로 사용할 수 없다.

---

❔ 학습 후 궁금한 점

• let, const, var의 초기화, 선언, 할당이 어떻게 이루어지는지?
• 호이스팅은 무엇이고, let, const, var의 호이스팅이 어떻게 이루어지는지?

이 글은 아래 링크를 참고하여 작성한 글입니다.
https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/
https://youtu.be/ifhnOyoMX3U