JavaScript - var , let , const 차이점

var , let , const 

 

var country = 'korea'

let name = 'Bob' ; 

const age = 30 ;

 

자바스크립트에서 가장 처음 배우는 내용 중 하나인 변수 선언 문 에는 총 3가지 var , let , const  가 존재합니다. 

 

 

Var

var age = 30;

console.log(age); // 30

var age = 40;
console.log(age); // 40

 

 

var 는 자바스크립트 시작과 동시에 나온 선언문으로 상당히 오랫동안 써온 문법입니다. 

 

var의 특징은 변수를 재선 언 하는 게 가능하다입니다. 위 코드처럼 각각 같은 age라는 변수명으로 여러 번 선언했음에도 에러 없이 정상적으로 출력이 가능합니다. 

 

name = '아무개'

 

위 처럼 name 이라는 변수명 과 함께 사용하게 될경우 기본적으로 var 처럼 동작을 합니다. 

 

var 경우 어떻게 보면 굉장히 자유도가 높다고 할수 있습니다.

 

하지만 이는 코드가 길어지거나 혹은 대형 프로젝트에서 사용하게 될 경우 어떤 식으로 에러가 나올지 모르는 부작용을 야기합니다. 

 

그렇기 때문에 가장 ES6 문법 이후로는 let 과 const를 권장합니다. 

 

또한 var 는 let , const 와 달리 블록스코프 를 무시합니다. 

 

{
	var name ='누구개';
}
console.log(name) // 누구개

 

변수 선언을 {  } 내부에서 선언했습니다.

 

기존 let , const 의 경우에는  {  } 밖에서는 참조를 할수가 없기에 console.log(name) 는 에러가 발생해야 합니다. 

 

하지만 var 는 이를 무시하고 마치 전역 변수처럼 사용되기 때문에 코드내 에 어디서든 호출 및 참조가 가능하기때문에 코드 전체에 영향을 주게됩니다.

 

 

하지만 그럼에도 쓰는 경우가 있습니다.

 

바로 호환성 때문입니다.

 

필자의 경우 대략 20년 넘은 si 회사에서 2019 년 도에 입사 했을때에도 var를 사용하고 있었습니다.

si 회사 특성상 신기술을 적용하기 보다 현재 서비스 중인 사이트들의 안정성을 우선시하기 때문에 var에서 let , const를 적용하기 힘들었습니다.

 

또한 납품중인 사이트들이 대부분 40 50대의 유저층이라는 점입니다.  이들은 대부분 옛날 브라우저를 사용하기 때문에 ES6를 인식하지 못하는 상황이 존재합니다. 

 

이러한 점을 고려 했을때 ES6 문법을 적용하기 어려웠기 때문에 var를 계속 사용해왔습니다.

 

*2021년 말쯤에도 사용자의 인터넷 익스플로러 호환성 때문에 고생했습니다.

 

let

 

ES6 에 도입된 문법으로 let 은 변수의 재할당이 가능합니다. 

 

let name = '아무개';
name = '누구개';

console.log(name) // 누구개

 

즉 이처럼 name 이란 변수에 값을 재할당 하는것이 가능하기 때문에 let 은 값이 변하는 데이터를 할당할때 사용합니다. 

 

for(let i = 0 ; i<10 ; i++){
    
}

 

for 문에서도 i 값은 계속 변하기 때문에 let 을 사용합니다.

 

{
	let name ='누구개';
}
console.log(name) // name is not defined

 

또한 var 와 달리 스코프 내부에서 선언할 경우 스코프 내부에서만 동작합니다.

 

 

const

 

let 과 마찬가지로 ES6 에 도입된 문법으로 const 와는 달리 변수의 재선언 및 변수 재할당 모두 불가능합니다. 

 

const name = '누구개'
console.log(name) // 누구개

name = '아무개' // Assignment to constant variable.
console.log(name)

 

즉 이는 변수가 아닌 상수로 동작을 하며 let 과 달리 값이 변경되면 안되는 데이터를 할당할때 사용하게 됩니다. 

 

예를들어 api key 를 사용한다고 할때 api key 는 변경이 되면 안되기 때문에 

 

const API_KEY = 'asdfasdfgasdfg'

 

와 같이 선언을 해주고 사용합니다.

 

{
	const name ='누구개';
}
console.log(name) // name is not defined

 

또한 let 과 같이 스코프 내부에서 선언 할경우 스코프 내부에서만 동작합니다.

 

 

결론

 

아주 특수한 경우가 아니라면 let , const 를 사용해야합니다.

 

만약 옛날 브라우저(익스플로러11 이전) 사용자를 생각한다면 var 를 사용해야 합니다. 

 

값이 지속적으로 변하는 데이터는 let 을 사용하며 값이 변하지 않는 데이터는 const 를 사용합니다.