💡 var, let, const의 차이는 무엇인가요?

day : 2022.02.16

javascript에는 var, let, const 의 세가지 변수 선언 방식이 존재한다.

es6이전에는 var만 있었지만, es6부터는 let, const 키워드가 추가되었고, var이 아닌 이를 이용해 변수를 선언하는 것을 권장합니다.

왜 let, const의 사용을 권장할까요? 이를 알기 위해서는 var과 let, const의 차이를 알면 이유를 알수 있습니다.

1. 변수 선언 방식의 차이

var의 경우에는 같은 이름의 변수를 여러번 선언하는 것을 허용합니다.

var name = 'sumi';

var name = 'sumi2';

와 같이 변수 선언을 여러번 함에도 에러가 뜨지않고 두번째 값으로 name의 값이 덮어씌워지게 됩니다. 간단한 코드에서는 어디에서 name이라는 변수가 사용되었는지 볼수있어 편하게 사용이 가능하지만, 코드가 복잡해지면 변수가 어디에서 사용되었고 수정되었는지 알기가 어려워질수 있습니다.

그래서 es6에서 추가된 키워드가 let, const입니다.

let, const로 같은 이름의 변수를 두번 선언하면 var과 달리 에러가 뜨게 됩니다.

let name = 'sumi'

let name = 'sumi2'; //error

변수를 여러번 선언이 불가능 하다는 점에서 let과 const는 공통점을 가지고 있지만 let은 변수에 값을 재할당이 가능하고 const는 변수 재할당이 불가능하다는 점에서 차이가 있습니다.

let name = 'sumi';
name = 'sumi2' //ok

const name2 = 'sumi';
name2 = 'sumi2' //error

2. Scope(범위)의 차이

scope는 식별자(변수명 등)의 유효범위를 의미한다. 선언된 위치에 따라 유효범위가 달라지는데,

• 전역 스코프 : 전역에 선언되어, 어디에서든 참조가 가능한 변수
• 지역 스코프 : 함수 내부에 선언되어, 자신의 지역 scope와 그 하위 scope에서 참조가 가능한 변수 위의 두가지로 나눈다.

js에서는 모든 코드블럭이 지역 스코프를 만들고, 이를 블록 레벨 스코프라고 한다. 하지만 var키워드로 선언한 변수는 함수의 코드블럭만을 지역 스코프로 인정하고, 이를 함수레벨 스코프라고 한다.

• var : 함수 코드 블록만을 지역스코프로 인정
• let, const : 블록 레벨 스코프를 지원

전역변수로 인해 재할당이 일어나거나 동일한 이름으로 인해 예상치 못한 변수 중첩이 일어날 수 있는 위험 때문에 블록 레벨 스코프를 지원하는 let, const 를 사용하는 것을 권장한다.

3. Hoisting(호이스팅)

js에서 hoisting이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 뜻한다. var로 선언한 변수는 호이스팅 시 undefined로 변수를 초기화 하지만, let, const로 선언한 변수는 호이스팅시 변수를 초기화 하지 않는다.

let, const로 선언된 변수를 선언문 이전에 참조하게 되면 참조에러가 발생하게 된다. var은 error가 띄지않음

자바스크립트에 선언된 모든 변수들은 모두 호이스팅이 발생하게 된다

하지만 var키워드로 선언된 변수들과 함수 선언문으로 정의된 함수들만 선언 이전에 호출이 가능하다.

정리

var

• 변수 중복 선언이 가능, 변수 재할당 가능-> 예상하지 못한 결과를 초래할수 있다.
• 함수 레벨 스코프를 지원 -> 함수 외부에서 var로 선언한 변수들은 모두 전역변수가 된다.
• 변수 선언문 전에 변수를 참조하면 undefined를 반환한다

let

• 변수 중복 선언 불가, 변수 재할당 가능
• 블록 레벨 스코프

const

• 변수 중복 선언 불가, 변수 재할당 불가능
• 블록 레벨 스코프
• 재할당이 불가능하므로 반드시! **선언과 초기화를 동시에 진행하여야 한다. **
• 단, 재할당의 경우 number와 같은 원시 값은 재할당이 안되지만, 객체는 재할당이 가능하다. 따라서 재할당을 금지하는 것이 const객체는 ‘불변’이라는 말과 같은말이 아니다.

결론

변수의 스코프는 최대한 작게 만드는 것이 좋으므로 블록 레벨 스코프를 권장한다.

변경하지않는 값(상수)이라면 const를 이용해 선언, 그렇지 않고 변수 재할당이 있을경우 let를 이용해 선언하자.