자바스크립트 - var, let, const 차이

🔅 Javascript - var, let, const 차이

---

자바스크립트 변수 선언: var, let, const 쉽게 이해하기

자바스크립트에서는 변수를 선언할 때 var, let, const 세 가지 방법을 사용합니다. 각각의 차이점과 특징, 장점과 단점을 자세히 알아보겠습니다.

1. var - 오래된 방식

var는 가장 오래된 변수 선언 방법입니다. 자바스크립트의 초기 버전부터 사용되었습니다.

특징

• 함수 스코프(Function Scope): var로 선언한 변수는 함수 안에서만 유효합니다. 함수 밖에서 선언하면 전역 변수가 됩니다.
• 호이스팅(Hoisting): var로 선언한 변수는 선언된 위치와 상관없이 코드의 최상단으로 끌어올려집니다. 그래서 변수를 선언하기 전에 사용할 수 있습니다.

var의 장점과 단점

장점	단점
단순함: 모든 변수 선언이 동일한 방식으로 처리됩니다.	예기치 않은 행동: 호이스팅으로 인해 변수가 예상치 않게 undefined로 초기화될 수 있습니다.
오래된 코드와의 호환성이 좋습니다.	전역 변수 오염: 함수 밖에서 선언한 var 변수는 전역 변수가 되어, 다른 코드와 충돌할 위험이 있습니다.
	블록 스코프 부족: var는 블록 스코프를 지원하지 않아, 중괄호 {} 안에서 선언해도 블록 밖에서 접근이 가능합니다.

예제

function example() {
  console.log(x); // undefined
  var x = 5;
  console.log(x); // 5
}
example();

• 위 코드에서 x는 선언되기 전에 사용되지만 에러가 나지 않고, 대신 undefined로 초기화됩니다.
  이와 같이 var는 호이스팅으로 인해 선언 위치와 상관없이 코드의 최상단에서 변수가 정의됩니다.

2. let - 새로운 방식

let은 ES6(2015년)에서 도입된 새로운 변수 선언 방법입니다. var의 단점을 보완합니다.

특징

• 블록 스코프(Block Scope): let으로 선언한 변수는 중괄호 {}로 감싸진 블록 내에서만 유효합니다.
• 호이스팅(Hoisting): let으로 선언한 변수도 호이스팅되지만, 변수를 선언하기 전까지 사용할 수 없습니다. 이를 “일시적 사각지대(TDZ)”라고 합니다.

let의 장점과 단점

장점	단점
블록 스코프: 블록 스코프를 지원하여, 변수의 유효 범위를 더 세밀하게 관리할 수 있습니다.	재선언 불가: 같은 블록 내에서 동일한 이름의 변수를 다시 선언할 수 없습니다.
일시적 사각지대(TDZ): 변수 선언 전에 사용하려는 시도를 방지하여, 에러를 더 쉽게 잡을 수 있습니다.	가독성: 변수 선언 방식이 다양해지면서 코드 가독성이 떨어질 수 있습니다.

예제

function example() {
  console.log(x); // ReferenceError: x is not defined
  let x = 5;
  console.log(x); // 5
}
example();

2. const - 상수 선언

const는 ES6에서 도입된 상수 선언 방법입니다. 한 번 값을 할당하면 변경할 수 없습니다.

특징

• 블록 스코프(Block Scope): const로 선언한 변수도 중괄호 {}로 감싸진 블록 내에서만 유효합니다.
• 호이스팅(Hoisting): const로 선언한 변수도 호이스팅되지만, 변수를 선언하기 전까지 사용할 수 없습니다.
• 불변성(Immutability): const로 선언한 변수는 재할당할 수 없습니다. 하지만 객체의 속성은 변경할 수 있습니다.
  

const의 장점과 단점

장점	단점
상수 유지: 변하지 않는 값을 사용할 때 유용합니다. 값이 변경되지 않도록 보장합니다.	초기화 필수: 선언과 동시에 초기화를 해야 합니다.
블록 스코프: 블록 스코프를 지원하여, 변수의 유효 범위를 더 세밀하게 관리할 수 있습니다.	객체의 불변성 부족: const로 선언한 객체는 참조를 변경할 수 없지만, 객체의 속성은 변경할 수 있어 불변성이 완전하지 않습니다.
명확성: 변수의 의도를 명확히 나타낼 수 있습니다. 이 변수는 절대로 변경되지 않는다는 것을 나타냅니다.

예제

function example() {
  console.log(x); // ReferenceError: x is not defined
  let x = 5;
  console.log(x); // 5
}
example();

요약

1. 스코프
   • var : 함수 스코프
   • let 과 const : 블록 스코프
2. 호이스팅
   • var: 선언과 초기화가 함께 호이스팅
   • let과 const: 선언만 호이스팅, 초기화 전에는 사용할 수 없음(TDZ)
3. 재할당
   • var와 let 재할당 가능
   • const: 재할당 불가능
4. 장점과 단점:
   • var: 단순하지만 예기치 않은 행동과 전역 변수 오염의 단점이 있음
   • let: 블록 스코프와 TDZ로 안전하지만, 재선언 불가와 가독성 저하의 단점이 있음
   • const: 상수 유지와 명확성 제공하지만, 초기화 필수와 객체 불변성 부족의 단점이 있음