[JavaScript] var / let / const

변수란?

변수(variable)는 값(value)을 저장할 수 있는 "메모리 공간"이다.
간단하게는 단일 자료형부터 표현식 그리고 함수까지, 변수에 넣을 수 있는 값은 다양하다.

변수를 선언하는 방법은 3가지가 있다.

🌼 var : 재선언과 재할당 모두 가능하다.
🌼 let : 재선언은 불가능하지만, 재할당은 가능하다.
🌼 const : 재선언과 재할당 모두 불가능하다.

1. Scope Level

"var은 함수 레벨 스코프를, let과 const는 블록 레벨 스코프를 따른다."

🌼 함수 레벨 스코프(Function-level-scope) : 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 "지역 변수"이며 함수 외부에서 선언한 변수는 모두 "전역 변수"이다.

🌼 블록 레벨 스코프(Block-level-scope) : 모든 코드 블록(함수, if문, for문, while문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 "지역 변수"이다.

//--- var ---//
var foo = 123; // 전역 변수

if (true) {
  var foo = 456; // 전역 변수
};

function func() {
  var foo = 789; // 지역 변수
}

console.log(foo); // 456

func();
console.log(foo); // 456

//--- let ---//
let foo = 123; // 전역 변수

if (true) {
  let foo = 456; // 지역 변수
  let bar = 456; // 지역 변수
}

console.log(foo); // 123
console.log(bar); // Uncaught ReferenceError: bar is not defined

2. const와 상수

// 10의 의미를 알기 어렵기 때문에 가독성이 좋지 않다.
if (rows > 10) { 
  ... 
}

// 값의 의미를 명확히 기술하여 가독성이 향상되었다.
const MAXROWS = 10;
if (rows > MAXROWS) {
  ... 
}

👉 const는 가독성과 유지보수의 편의를 위해 상수를 적절히 네이밍하는데 사용된다.
👉 이때 모든 단어는 "대문자"로 표기한다!

3. const와 객체

const fruits = ["apple", "banana", "strawberry"];

// (1) 재할당은 불가능!
fruits = ["pineapple","peach","pear"];
// Uncaught TypeError: Assignment to constant variable.

// (2) 객체의 프로퍼티는 보호받지 않는다.
fruits[1] = "peach";
console.log(fruits); // ["apple", "peach", "strawberry"]

fruits.push("pear");
console.log(fruits); // ["apple", "peach", "strawberry", "pear"]

fruits.length = 0;
console.log(fruits); // []

👉 const로 선언된 변수에 재선언과 재할당은 불가능하지만, 변수 타입이 "객체"인 경우 할당된 객체의 내용은 변경할 수 있다.

4. const와 for문

const productPrice = {
  apple: 2000,
  banana: 1500,
  strawberry: 3000
};

const productNewPrice = {};

for (const item in productPrice) {
  const price = productPrice[item];
  const newPrice = price * 2;
  productNewPrice[item] = newPrice;
}

console.log(productNewPrice); 
// {apple: 4000, banana: 3000, strawberry: 6000}

👉 const로 선언된 변수는 { }로 구성되어 있는 코드 블록 내에서만 사용 가능하며, 두 번째 반복문부터 price와 newPrice는 다시 값이 할당되지 않은 undefined 상태가 된다.
👉 반복문이 돌면서 재할당 되는 것이 아니라 초기화되는 것!

✅ const 키워드는 재할당을 금지하므로 var, let보다 안전하다.
✅ 기본적으로 const를 사용하고, let은 재할당이 필요한 경우에 한정해 사용하는 것이 좋다.
✅ let을 사용할 때 변수의 scope는 최대한 좁게 만든다.