JS - Var, Let, Const 차이

여진·2024년 9월 10일

목록 보기

4/6

차이점

var는 함수 범위를 가지며, 호이스팅의 특성 때문에 혼란을 줄 수 있다
중복선언과 재할당 모두 가능하다

let과 const는 블록 범위의 특징을 갖는다
특정 블록(if, for) 내에서 선언된 변수가 해당 블록 밖에서 접근 불가능하다는 것을 의미
let은 중복선언은 불가능하다 재할당은 가능하다

const는 let과 var와 달리 한번 값을 할당하면 그 값을 변경할 수 없다

let과 const를 사용함으로써, 변수의 재할당과 재선언에 관련된 일반적인 문제점들을 피할 수 있는데 이로 인해 코드의 버그 발생 확률이 줄어들고, 코드의 안정성이 향상된다

현재 개발에서는 var의 한계와 문제점들을 피하기 위해 let과 const를 주로 사용하며,
변수의 재할당이 필요하지 않은 경우 const,
필요한 경우에는 let을 사용하는 것이 권장된다

Var

ES6 등장 이전에 사용되던 키워드

중복선언, 재할당 모두 가능

스코프 - 함수레벨 스코프(Function-level)

호이스팅 - 호이스팅 시 undefined로 변수 초기화

전역객체 프로퍼티 - 할당

WHY? var 사용 지양

문제점

변수의 중복 선언 가능

이미 선언했던 변수명을 모르고 또 사용할 경우, 기존에 있던 변수는 전혀 다른 값을 가지게 됨
그 경우, 그 변수를 사용하는 다양한 로직들에 치명적인 문제가 생김

for문에서의 문제점

var는 function-scoped이기 때문에, for문에서 순회를 위해 i라는 변수를 var로 선언한 경우, 이 변수는 for문이 종료되어도 접근이 가능하게 됨

만약 for문의 함수 내부가 아닌, 함수 외부에 전역적으로 돌아갈 경우 for문에서 사용한 var변수들은 전역 변수로서 역할을 하므로, 전역 변수가 남발될 수 있다

호이스팅

var키워드를 사용해 변수 선언 시, 해당 변수의 선언부를 최상단으로 올리는 것
JavaScript의 변수 생성과 초기화의 작업이 분리되어 진행되기 때문에 이런 현상 발생

var는 기존 c나 java의 Block-scoped가 아니라 Function-scoped
따라서 코드 전체의 최상단이 아닌 함수 내부의 최상단으로 이동함

( function-scoped는 중괄호로 구분된 영역의 범위를 갖는 것이 아닌 함수 내부의 영역을 범위로 갖는 것을 의미 )