[JavaScript] 변수

자바스크립트에서의 변수에 대하여 알아보자.

나는 이전에 전역 변수와 지역 변수를 스코프에 따라 나뉘는 것으로 이해했었는데, 모든 스코프(?)에서 사용할 수 있으면 전역 변수이고, 함수 안에서와 같은 특정한 스코프에서만 사용할 수 있으면 지역 변수라고 이해했었다. 어떻게 보면 이것은 정확한 설명이라고 볼 순 없을 것 같아서 변수에 대해서 간략하게 알아보고 가야 될 것 같다.

1) 변수

변수는 데이터를 저장하고 재사용하기 위해 이름을 붙인 메모리 공간이다.

1-1) 변수의 생애주기

변수의 생애주기는 다음과 같다. 즉, 우리가 변수를 사용하기 위해서는 다음과 같은 과정을 거친다.

1. 변수의 '선언'
   변수를 생성하고, 특정 스코프에 등록한다.
2. 변수의 '초기화'
   변수에 초기 값을 할당한다.
3. 변수의 '사용'
   변수의 값을 참조하거나 변경한다.
4. 변수의 '소멸'
   스코프를 벗어나면 변수는 메모리에서 제거된다.

let x;          // 변수의 선언
let y = 10;     // 변수의 초기화
y = 20;         // 변수의 사용 - 변수의 값을 변경함
console.log(y); // 변수의 사용 - 변수를 참조함

// 전역 변수는 프로그램의 실행이 종료될 때 까지 메모리에 유지됨

여기서 변수의 초기화와 선언, 할당이 헷갈려서 좀 더 찾아보았다.

💡 변수의 초기화와 선언
변수의 생명주기에서 변수의 초기화는 선언된 변수에 최초의 값을 할당하는 과정을 의미한다.

하지만 초기화는 선언과 할당이 동시에 이루어질 수도 있고, 나중에 할당될 수도 있다. 이 두 가지를 구분하는 것이 중요하다.

초기화(Initialization):

• 초기값을 변수에 할당하는 것을 의미한다.
• 초기값을 할당하지 않으면 변수는 선언된 상태에서 기본값(undefined)을 갖게 된다.

선언과 초기화의 관계:

• 동시에 초기화: 선언과 값 할당이 한 줄에서 이루어질 때.

  let x = 10; // 선언과 동시에 초기화

• 나중에 초기화: 선언 후 값이 나중에 할당될 때.

  let x; // 선언 (x는 undefined)
  x = 10; // 초기화

1-2) 변수 선언 키워드

자바스크립트에서 변수를 선언할 때는 다음 세 가지의 키워드를 사용할 수 있다.

• var
• let
• const

이 중에서 var의 사용은 지양되어야 된다고 들어왔었는데, 이제는 그 이유에 대해서도 자세히 알아야 한다.

하나 하나 자세히 살펴보자.

var

• 함수 스코프를 가진다.
• 중복 선언이 가능하다.
• 선언 전에 사용할 수 있지만, 그 때 값은 undefined로 초기화된다. (호이스팅 됨)

💡 호이스팅이란?
변수 선언이 코드의 최상단으로 끌어올려지는 동작이다.
변수의 초기화는 끌어올려지지 않는다.

• var의 호이스팅

  console.log(x); // undefined (선언은 호이스팅됨, 초기화는 아님)
  var x = 10;
  console.log(x); // 10

• let과 const의 호이스팅

  console.log(y); // ReferenceError: Cannot access 'y' before initialization
  let y = 20;

호이스팅과 관련된 개념은 나중에 더 자세히 알아보자

• 블록 스코프를 지원하지 않아 의도치 않은 변수 덮어쓰기가 발생할 수 있다.

마지막이 var 사용이 지양되어야 하는 주된 이유이다.
중복 선언이 가능하여 변수가 덮어씌워질 수 있기 때문에 의도치 않은 결과를 나타낼 수 있다.

function example() {
  var x = 10;
  if (true) {
    var x = 20; // 같은 함수 스코프
    console.log(x); // 20
  }
  console.log(x); // 20 (덮어쓰기 발생)
}
example();

let

• 블록 스코프를 가진다
• 중복 선언이 불가능하다
• 선언 전에 사용할 수 없으며(Temporal Dead Zone), 참조하면 오류가 생긴다.
  TDZ(Temporal Dead Zone)에 대해서는 나중에 더 알아보자

if (true) {
  let x = 10; // 블록 스코프
  console.log(x); // 10
}
console.log(x); // ReferenceError: x is not defined

const

• 블록 스코프를 가진다
• 상수를 선언할 때 사용되며, 선언과 동시에 초기화되어야 한다.
  이는 즉, const x;와 같이 선언만 하고 나중에 할당하는 것은 불가는하다는 말이다.
• 값의 재할당이 불가능하다 (단, 객체나 배열의 속성은 변경 가능하다)

const x = 10;
// x = 20; // TypeError: Assignment to constant variable

const obj = { key: "value" };
obj.key = "new value"; // 가능 (객체 속성 변경)
console.log(obj.key); // "new value"

1-3) 변수 선언 시 주의사항

먼저, 앞서 말했듯 var는 함수 스코프와 호이스팅 문제로 인해 예측하기 어려운 동작이 발생할 수 있다. let과 const를 사용하는 것이 권장된다.

둘째, 변하지 않는 값(상수)을 표현할 때 const를 사용하면 코드의 안정성과 가독성이 높아진다.

셋째, 변수를 선언하면서 동시에 초기화하여 가독성을 높인다.

let count = 0; // 명확한 선언과 초기화

따라서 다음과 같이 전역 변수를 최소화하여 충돌을 방지하고 필요한 경우 const로 선언하여 재할당을 방지하는 것이 중요하다.

const MAX_USERS = 100; // 상수
let currentUsers = 0; // 변경 가능한 값
currentUsers += 1;