1. JavaScript에서 변수 선언 방식인 var, let, const 각각의 차이점에 대해 알아보자.
var i = 'javascript'
console.log(i); //javascript
var i = 'variable'
console.log(i); //variable
i = 'Assignment'
console.log(i); //Assignment
우선, var는 변수의 재선언, 재할당이 모두 가능하다.
그 말인 즉, 유연한 변수 선언이 가능해 편리하게 사용할 수 있다는 점이 장점이 되지만, 기존에 선언해둔 변수의 존재를 잊고 중복 선언을 할 위험과 어디에서 어떻게 사용 되는지 파악하기 힘들다는 단점이 있다. 이러한 단점들때문에 최대한 사용을 지양한다.
그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수 선언 방식이 let과 const 이다.
let i = 'javascript'
console.log(i); //javascript
let i = 'variable'
console.log(i); // cannot redeclare block-scoped variable
i = 'Assignment'
console.log(i); //Assignment
var와 다르게 let은 재선언 시 변수를 다시 선언할 수 없다는 에러가 출력된다.
하지만, 아래와 같이 재할당 시 에러없이 정상적으로 출력되는걸 확인할 수 있다.
i = 'Assignment'
console.log(i); //Assignment
const i = 'javascript'
console.log(i); //javascript
const i = 'variable'
console.log(i); // cannot redeclare block-scoped variable
i = 'Assignment'
console.log(i); //cannot assign to 'i' because it is a constant
const는 var와 반대로 변수의 재선언, 재할당이 모두 불가능하다.
이처럼 const는 constant(상수)를 뜻하기 때문에 한 번만 선언이 가능하며 값을 바꿀 수도 없다.
2. 호이스팅 이란?
1. 선언단계 : 변수를 실행 컨텍스트의 변수객체(Variable Object)에 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다.
2. 초기화 단계: 변수객체(Variable Object)에 등록된 변수를 위한 공간을 메모리에 확보한다. 이 단계에서 변수는 undefined로 초기화된다.
3. 할당 단계 : undefined로 초기화된 변수에 실제 값을 할당한다.
console.log(i); //undefined
var i = 1;
이 코드는 에러가 나지않고 undefined를 리턴한다. 그 이유는 JavaScript가 호이스팅을 하면서 아래와 같은 방식으로 코드를 해석하기 때문이다.
var i = 1;
console.log(i); //undefined
var와 같은 방법으로 코드를 작성하면
console.log(i); //ReferenceError: let is not defined
let i = 1;
console.log(i); //ReferenceError: const is not defined
const i = 2;
에러가 나타나게된다. 그 이유는 let,const 키워드로 선언된 변수는 호이스팅이 되어 선언단계가 이루어지지만 초기화 단계는 실제 let,const가 사용된 코드에 도착했을 때 이루어진다. 초기화 단계 이전에 변수에 접근하려하면 에러가 발생하게된다.
var가 에러가 나지 않은 이유는 선언단계와 초기화단계가 동시에 이뤄지기 때문이다.
요약
- var (재선언 가능, 재할당 가능)
- let (재선언 불가능, 재할당 가능)
- const (재선언 불가능, 재할당 불가능)
- 호이스팅이란 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상
- 변수의 3단계 진행과정 -
선언단계 -> 초기화단계 -> 할당단계- var, let, const는 모두 호이스팅 된다.
- var는 웬만하면 사용하지말고 let과 const를 사용하자.