Frontend/JavaScript

[JavaScript] 자바스크립트의 변수 const, let, var

ayeongjin 2025. 1. 26. 00:14

자바스크립트의 변수

 

자바스크립트의 변수 선언

  • var, let, const
  • var는 함수 스코프와 호이스팅의 특성을 가지며, 글로벌 객체의 속성으로 추가된다.
  • let과 const는 블록 스코프를 가진다.
  • const는 재할당과 재선언이 불가능하다.

 

1. var

  • ES6 이전에 주로 사용되던 변수 선언 키워드로, 함수 스코프를 가진다.
  • (이는 var로 선언된 변수가 함수 내에서만 지역 변수로 작동하고, 함수 외부에서는 전역 변수로 작동한다는 것을 의미)
  • var로 선언된 변수는 글로벌 객체의 속성으로 추가된다.
  • 브라우저 환경에서는 window 객체가 글로벌 객체이며, var로 선언된 변수는 window 객체의 속성으로 추가된다.
  • (이는 var로 선언된 변수가 전역 스코프에서 접근 가능하다는 것을 의미)

 

2 let & const

  • ES6에서 도입된 변수 선언 키워드로, 블록 스코프를 가진다.
  • (이는 let과 const로 선언된 변수가 중괄호({})로 둘러싸인 블록 내에서만 유효하다는 것을 의미)
  • let과 const로 선언된 변수는 글로벌 객체의 속성으로 추가되지 않는다.
  • (이는 let과 const가 블록 스코프를 가지며, 글로벌 스코프에서도 독립적으로 존재한다는 것을 의미)
  • let과 const는 블록 스코프를 가지기 때문에, 글로벌 스코프에서도 해당 변수들은 글로벌 객체의 속성으로 추가되지 않아 글로벌 네임스페이스를 오염시키지 않는다.
  • (이러한 차이는 글로벌 변수를 사용할 때 발생할 수 있는 충돌을 방지하고, 코드의 모듈성을 높이는 데 기여)

 

3. const

  • let과 유사하게 블록 스코프를 가지지만, 재할당 / 재선언이 불가능
  • (이는 const로 선언된 변수는 초기화 시 할당된 값이 변경될 수 없다는 것을 의미)
  • 이는 코드 내에서 상수를 표현하거나, 값이 변경되어서는 안 되는 변수를 선언할 때 유용
    • const의 이러한 특성은 코드의 안정성을 높이는 데 기여
    • 이는 프로그램의 예측 가능성을 높이고, 실수로 인한 버그를 줄이는 데 도움이 된다.

 

변수의 호이스팅

 

호이스팅이란?

자바스크립트에서 변수와 함수 선언을 코드의 최상단으로 끌어올리는 동작

  • 호이스팅은 코드를 실행하기 전에 변수와 함수 선언이 메모리에 저장되기 때문에 가능
  • var로 선언된 변수는 선언과 동시에 undefined로 초기화되며, 이후 실제 값으로 할당된다.
    • 이로 인해 var로 선언된 변수는 선언 전에도 접근할 수 있으나, undefined 값을 가진다.
  • 반면, let과 const는 호이스팅되지만, 초기화되지 않는다.
    • 따라서 선언 전에 접근하려고 하면 참조 에러(ReferenceError)가 발생
    • let과 const는 선언이 코드의 실행 흐름에 도달했을 때 초기화되기 때문 (일시적 사각지대)