[Javascript] var, let, const의 차이점(feat. var의 문제점)

🪴 변수와 let

변수(variable)란 데이터를 저장할 때 사용하는 '이름이 붙은 저장소'입니다. 변수로 선언된 값은 언제든지 변화할 수 있습니다.
자바스크립트에서는 'let'이라는 키워드를 사용하여 변수를 선언합니다. 

- 출처 사이트

자바스크립트에서 변수를 선언할 때 지켜야 할 몇 가지 제약사항이 존재합니다.

• 변수명에는 [문자 | 숫자 | 기호 $, _]만 들어갈 수 있습니다.
• 변수명의 첫 글자에는 숫자가 올 수 없습니다.
• 자바스크립트에서 이미 사용 중인 예약어(reserved word)는 변수명으로 사용할 수 없습니다.

 

아래는 실제 프로젝트에서 변수를 사용했던 예시입니다.

선택된 옵션값(selectedOption)에 따라 정렬 방식(orderBy)이 정해집니다.

let orderBy = '';

if (selectedOption === '최신순') {
  orderBy = 'recent'
} else if (selectedOption === '인기순') {
  orderBy = 'like'
}

 

let의 특징은 다음과 같습니다.

• 호이스팅이 발생하지만, 선언 이전에 사용 시 참조 오류가 발생합니다.(undefined로 초기화되지 않음)
• 블록 스코프를 가집니다.
• 재할당이 가능합니다 = 값을 업데이트할 수 있습니다.
• 재선언이 불가능합니다 = 같은 이름의 변수를 다시 선언할 수 없습니다.

 

---

🪴 상수와 const

상수(constant)란 변수 중에서도 그 값이 변화하지 않는 변수입니다. 따라서 값을 재할당할 수 없으므로 상수를 변경하려고 하면 에러가 발생합니다.
자바스크립트에서는 'const'라는 키워드를 사용하여 상수를 선언합니다.

- 출처 사이트

선언할 값이 변하지 않을 값이라는 것이 확실하면 그 값은 변수가 아닌 상수로 선언하는 것이 바람직합니다.

또한, 해당 값이 상수라는 것을 알아보기 쉽게 하기 위해 관용적으로 상수는 모두 대문자로 작성합니다.

 

아래는 실제 프로젝트에서 상수를 사용했던 예시입니다.

const INPUT_MAX_LENGTH = 10;
const TEXTAREA_MAX_LENGTH = 300;

 

const의 특징은 다음과 같습니다.

• let과 마찬가지로 호이스팅이 발생하지만, 선언 이전에 사용 시 참조 오류가 발생합니다.(undefined로 초기화되지 않음)
• 블록 스코프를 가집니다.
• 재할당이 불가능합니다 = 한 번 초기화한 값은 다른 값으로 업데이트할 수 없습니다.
• 재선언이 불가능합니다.

 

---

🪴 var의 문제점

ES6에서 let과 const가 나오기 전까지 변수 선언 키워드로 var가 사용되었습니다.

 

var의 특징은 다음과 같습니다.

• 함수 또는 전역 스코프를 가집니다.

function 키워드와 { 블록 }으로 감싸진 경우에 함수 스코프를 가집니다. function 키워드가 없으면 블록으로 감싸진 경우에도 전역 스코프를 가집니다.

• 같은 이름의 변수를 재할당뿐만 아니라 재선언도 가능합니다.

같은 스코프 안에 위치한 변수는 재할당이 가능합니다.

var welcome = "Hi!";
welcome = "Hello!";

같은 스코프 안에 위치한 변수는 재선언 또한 가능합니다.

var welcome = "Hi!";
var welcome = "Hello!";

• 호이스팅이 적용됩니다.

아래와 같은 코드가 있을 때,

console.log(welcome);
var welcome = "Hi!";

let이나 const로 선언한 변수라면 선언되지 않은 변수에 접근한다는 등의 에러가 발생하지만,

var로 선언한 변수에 접근하는 경우 undefined로 초기화되며 에러가 발생하지 않습니다.

var welcome;			// 호이스팅 된 상황
console.log(welcome);	// undefined
welcome = "Hi!";

호이스팅이 일어나도 할당된 값은 사용할 수 없고, 변수명만 접근이 가능하기 때문에 "undefined"가 출력됩니다.

 

---

 

위의 특징으로 인해 생기는 var의 가장 큰 문제점은 다음과 같습니다.

• 함수 스코프이기 때문에 function 키워드가 없다면 블록으로 감싸도 전역 스코프로 접근이 가능합니다.(if, for 등의 키워드가 사용된 코드 블록은 무시됨)
• 재선언이 가능하여 변수의 중복된 선언을 야기합니다.(가장 나중에 할당된 값으로 초기화됨)
• 선언하기 전에 변수에 접근이 가능하다는 이유로 에러가 발생하지 않아 잘못된 값을 참조할 수 있습니다.

 

---

스코프에 대한 더 자세한 내용은 이전 글을 참고해주세요.

[Javascript] 블록 스코프와 함수 스코프

[Javascript] 블록 스코프와 함수 스코프

[Javascript] 렉시컬(Lexical) 스코프

[Javascript] 렉시컬(Lexical) 스코프

 

---

읽어주셔서 감사합니다:)