본문 바로가기
Frontend

var, let, const 차이

by 신인프로그래머 2024. 3. 4.

 

var, let, const 차이

 

 

JavaScript에서 변수를 선언하는 방법으로 var, let, const 세 가지 키워드가 있다

각 키워드는 변수의 유효 범위(scope), 재선언(redeclaration), 재할당(reassignment) 측면에서 서로 다른 특징을 가지고 있다

이들의 차이점을 이해하는 것은 안정적이고 예측 가능한 코드를 작성하는 데 중요하다

 

1. var

  • 유효 범위
    • 함수 레벨 스코프(function-level scope)
    • var로 선언된 변수는 선언된 함수의 전체에서 유효하다
    • 함수 외부에서 선언된 경우 전역 변수가 된다
  • 재선언 가능
    • 같은 스코프 내에서 var를 사용하여 변수를 여러 번 선언할 수 있다
  • 재할당 가능
    • 선언된 변수에 새로운 값을 할당할 수 있다

예시:

var greeting = "Hello, world!";
console.log(greeting); // 출력: Hello, world!
greeting = "Hello, JavaScript!";
console.log(greeting); // 출력: Hello, JavaScript!

var greeting = "Hello, again!";
console.log(greeting); // 출력: Hello, again!

 

2. let

  • 유효 범위
    • 블록 레벨 스코프(block-level scope)
    • let으로 선언된 변수는 선언된 블록(중괄호 {}로 둘러싸인 영역) 내에서만 유효하다
  • 재선언 불가능
    • 같은 스코프 내에서 let을 사용하여 변수를 재선언할 수 없다
    • 하지만 다른 스코프에서는 같은 이름의 변수를 선언할 수 있다
  • 재할당 가능
    • 선언된 변수에 새로운 값을 할당할 수 있다

예시:

let message = "Hello, world!";
console.log(message); // 출력: Hello, world!
message = "Hello, JavaScript!";
console.log(message); // 출력: Hello, JavaScript!

// 아래 코드는 에러를 발생시킵니다.
// let message = "Hello, again!";

 

3. const

  • 유효 범위
    • 블록 레벨 스코프(block-level scope)
    • const로 선언된 변수도 let과 마찬가지로 선언된 블록 내에서만 유효하다
  • 재선언 불가능
    • let과 같다
  • 재할당 불가능
    • 한 번 할당된 값을 변경할 수 없다
    • 즉, 상수(constant)를 선언하는 데 사용된다
    • 단, 객체나 배열의 내용은 변경할 수 있다

예시:

const greeting = "Hello, world!";
console.log(greeting); // 출력: Hello, world!

// 아래 코드는 에러를 발생시킵니다.
// greeting = "Hello, JavaScript!";

// 객체의 내용은 변경할 수 있습니다.
const obj = { message: "Hello" };
obj.message = "Hello, JavaScript!";
console.log(obj.message); // 출력: Hello, JavaScript!

 

 

결론

  • var는 함수 레벨 스코프를 가지며 재선언 및 재할당이 가능하다
  • 하지만 현대적인 JavaScript 개발에서는 가급적 사용을 피하는 것이 좋다
  • let은 블록 레벨 스코프를 가지며 재할당은 가능하지만 재선언은 불가능하다
  • 변수의 값이 변경될 수 있는 경우에 사용한다
  • const도 블록 레벨 스코프를 가지며 재선언 및 재할당이 불가능하다
  • 값이 변경되지 않는 상수를 선언할 때 사용

'Frontend' 카테고리의 다른 글

렉시컬 환경이란  (0) 2024.03.04
함수 선언형과 함수 표현식의 차이  (0) 2024.03.04
콜백 지옥 해결법 - Promise 와 async/await  (0) 2024.03.04
Promise와 Callback 차이  (0) 2024.03.04
비동기 함수  (0) 2024.03.02