변수 선언

1. 변수

• 변수는 데이터를 저장하는 컨테이너다.
• JavaScript에서는 변수를 사용하여 값을 저장하고, 나중에 해당 값을 읽거나 수정할 수 있다.

---

2. 변수 선언 방법

JavaScript에서는 변수를 선언하기 위해 var, let, const 키워드를 사용한다. 각 키워드는 서로 다른 특성과 사용 목적을 가지고 있다.

2.1. var

• 특징:
  • ES5 이전의 변수 선언 방식.
  • Function Scope: 함수 내부에서만 접근 가능.
  • Hoisting: 선언이 코드 상단으로 끌어올려진다.
  • 값을 재할당할 수 있다.
  • 블록 스코프를 지원하지 않아 의도하지 않은 동작이 발생할 수 있다.
• 예제:

  function testVar() {
    if (true) {
      var x = 10;
    }
    console.log(x); // 10 (블록 스코프가 없음)
  }
  testVar();

• 문제점: var는 블록 스코프를 지원하지 않으므로, 코드를 예측하기 어렵게 만들 수 있다. 이를 해결하기 위해 ES6부터는 let과 const가 도입되었다.

2.2. let

• 특징:
  • ES6에서 도입된 변수 선언 방식.
  • Block Scope: 변수는 선언된 블록 내에서만 접근 가능.
  • 값을 재할당할 수 있다.
  • Hoisting은 발생하지만 초기화되지 않은 상태로 유지됨.
• 예제:

  function testLet() {
    if (true) {
      let y = 20;
      console.log(y); // 20
    }
    // console.log(y); // ReferenceError: y is not defined (블록 스코프)
  }
  testLet();

• 주요 장점:
  • 블록 스코프를 사용하여 코드 예측 가능.
  • 재할당이 필요하지만 스코프를 제한해야 하는 변수에 적합.

2.3. const

• 특징:
  • ES6에서 도입된 상수 선언 방식.
  • Block Scope: 변수는 선언된 블록 내에서만 접근 가능.
  • 초기화 시 값을 반드시 할당해야 하며, 이후 값을 변경할 수 없다.
  • 값 변경 불가능: 원시 데이터 타입(예: 숫자, 문자열 등)의 경우 값 자체를 변경할 수 없다.
  • 참조 변경 불가능: 객체(배열, 함수 등)의 경우 참조를 변경할 수 없지만, 객체의 속성은 수정 가능.
• 예제:

  const z = 30;
  console.log(z); // 30
  // z = 40; // TypeError: Assignment to constant variable.
  
  const arr = [1, 2, 3];
  arr.push(4); // 가능: 배열의 내용 수정
  console.log(arr); // [1, 2, 3, 4]

• 주요 장점: 변경되지 않는 값을 정의할 때 사용.

---

3. Hoisting

• Hoisting은 JavaScript에서 변수와 함수 선언이 코드의 최상단으로 끌어올려지는 메커니즘을 의미한다.
• var는 선언과 초기화가 모두 끌어올려지지만, let과 const는 선언만 끌어올려지고 초기화는 끌어올려지지 않는다.
• 예제:

console.log(a); // undefined (var의 선언이 끌어올려짐)
var a = 10;

// console.log(b); // ReferenceError (let은 초기화되지 않은 상태)
let b = 20;

---

4. 변수 선언 시 주의할 점

4.1. 선언하지 않고 변수 사용

• JavaScript에서는 var, let, const 없이 변수를 선언하면 전역 객체(window 또는 global)에 속하게 된다.
• 이렇게 하면 의도치 않은 전역 변수가 생성되어 버그가 발생할 가능성이 높아진다.
• 해결 방법: 항상 let 또는 const를 사용하여 변수를 명시적으로 선언한다.

---

5. 변수 스코프 (Scope)

스코프는 변수가 접근할 수 있는 범위를 정의한다. JavaScript에는 크게 세 가지 스코프가 존재한다.

5.1. Global Scope

• 코드 어디에서나 접근 가능한 변수 스코프.
• 전역 스코프의 변수는 전역 객체(window 또는 global)의 속성이다.

var globalVar = "I'm global";
console.log(window.globalVar); // "I'm global"

5.2. Function Scope

• 함수 내부에서만 접근할 수 있는 변수 스코프.
• var는 함수 스코프를 가진다.

function myFunction() {
  var functionScoped = 'Hello';
  console.log(functionScoped); // 'Hello'
}
// console.log(functionScoped); // ReferenceError

5.3. Block Scope

• 블록({}) 내부에서만 접근할 수 있는 변수 스코프.
• let과 const는 블록 스코프를 가진다.

if (true) {
  let blockScoped = 'Hi';
  console.log(blockScoped); // 'Hi'
}
// console.log(blockScoped); // ReferenceError

---

6. 팁

6.1. 항상 const를 기본으로 사용

• 변수의 값을 변경할 필요가 없다면 const를 기본으로 사용.
• 필요할 때만 let 사용.

6.2. var 사용 지양

• var는 블록 스코프를 지원하지 않고, 의도하지 않은 동작을 초래할 수 있으므로 사용하지 않음.

6.3. 명확한 변수 이름 사용

• 변수 이름은 변수의 목적을 한 눈에 알 수 있도록 지정할 것.

6.4. 불필요한 전역 변수 생성 금지

• 전역 변수를 최소화하여 코드의 의존성을 줄이고 유지보수성을 높일 것.

---

7. 변수 선언과 초기화의 차이

• 선언: 변수를 정의하는 단계.
• 초기화: 변수에 값을 할당하는 단계.

---

8. 변수와 메모리

JavaScript에서 변수가 선언되면 메모리에 저장된다.

• Primitive 타입: 값 자체가 저장.
• Reference 타입: 참조 주소가 저장.

let a = 10; // Primitive 타입
let obj = { key: 'value' }; // Reference 타입