#22 자바스크립트(JavaScript) - var, let, const

안녕하세요 여러분! 에이블디입니다!

 

이번 시간에는 지난 시간에 이어 let과 const에 대해 알아보도록 하겠습니다.

 

var는 사실 지난 시간에 어느 정도 설명을 다 했다고 생각하기 때문에 이번 시간에서는 간단하게 var의 특징에 대해서 간단하게 짚고 바로 let과 const에 대해 알아보도록 할게요!

 

지난 시간에 보았던 var의 특징은 크게 세 가지로 정리할 수 있습니다.

1. 변수 중복 선언이 가능하며 그로 인해 예기치 못한 값을 반환할 수 있다.

2. 함수 레벨 스코프로 인해 함수 외에 다른 곳에서 선언한 변수는 모두 전역 변수로 취급된다.

3. 변수 선언부 이전에 변수를 호출하면 언제나 undefined를 반환한다.

 

저런 특징들 때문에 ES6부터 let과 const가 나왔다고 지난 시간에 글을 마무리했었죠?

그럼 바로 let과 const에 대해 알아볼게요!

 

첫 번째로 let과 const는 변수 중복 선언이 불가합니다.

하지만 차이점은 분명히 존재하는데요, let은 변수 중복 선언이 불가하면서 재할당이 가능합니다.

코드를 보면서 이해해 보겠습니다.

let number = 1;

let number = 2;

let으로 number란 동일한 변수 이름을 중복 선언하여 보았습니다.

실행을 시키면 어떻게 되는지 볼까요?

 

 

식별자 'number'가 이미 선언이 되어 있다고 오류를 뿜네요!

변수 중복 선언이 안 되는 것을 확인할 수 있습니다.

 

재할당은 가능하다고 하였는데 한번 볼까요?

let number = 1;
console.log(number);

number = 2;
console.log(number);

최초에 number 변수를 선언할 때 값 1을 할당하여 선언해주고 나서 console.log()로 출력한 뒤 다시 number 변수에 값 2를 재할당해 주고 console.log()로 number 변수 값을 출력해주는 코드입니다.

 

바로 실행해 볼게요!

 

 

변수에 값이 재할당이 된 걸 확인할 수 있습니다!

 

다음은 const입니다.

const 역시 변수 중복 선언이 불가능한데 let과 다른 점은 변수 선언과 동시에 반드시 초기화까지 동시에 진행해 주어야 한다는 점입니다.

그리고 재할당에 제약이 있는데요, 변수의 원시 값은 재할당이 불가능하지만 객체와 배열에는 재할당이 가능합니다.

객체와 배열은 자바스크립트 #2번째 포스팅에서 확인할 수 있습니다.

혹시 기억이 안나시는 분들은 아래의 링크를 참고해 주세요!

https://abled.tistory.com/47

#2 자바스크립트(JavaScript) - 자료형(Data type) : 복합형(배열, 객체)

 

그럼 예제를 통해 이해해 보도록 할게요!

let number;
number = 1;
console.log(number);

 

let으로 number 변수를 선언만 해두고 값은 변수의 선언 이후에 할당해 주었는데요, 문제없이 코드가 동작하는 것을 볼 수 있습니다.

 

그럼 const는 어떨까요?

const number;
number = 1;
console.log(number);

위와 같은 코드에 let대신 const로만 바꾸어준 코드입니다.

실행을 시켜볼까요?

 

 

const 선언에 초기화 누락이라는 에러를 뿜습니다.

그러면 코드를 수정하여 const로 변수를 선언할 때 값까지 바로 할당을 해 주도록 하겠습니다.

const number = 1;

console.log(number);

 

이번엔 에러를 뿜지 않고 잘 실행되는군요!

 

그럼 재할당을 한번 해보도록 할까요?

const number = 1;
number = 2;
console.log(number);

이전 코드에서 number변수에 2라는 값을 재할당하는 코드만 추가해 주었습니다.

실행을 시켜보도록 할게요!

 

 

상수 변수에 재할당했다고 에러 메시지를 출력하네요!

이렇듯 변수의 원시 값은 재할당이 불가하다는 걸 보여줍니다.

하지만 객체와 배열에는 재할당이 가능하다고 위에 설명을 했었는데요, 한번 코드를 직접 실행해 봐야겠죠?

먼저 객체부터 보도록 할게요!

const number = {
    result: 1
}
console.log(number);

number.result = 2;
console.log(number);

const로 number를 객체로 선언해 주었습니다.

키값 result에 값을 1을 주어 최초에 선언하여 console.log()로 number 객체를 출력하고, 키값 result에 값 2를 재할당하여 다시 한번 console.log()로 number 객체를 출력하는 코드를 작성했습니다.

 

실행을 시켜볼까요?

 

 

객체에는 값이 재할당이 되는 것을 확인할 수 있네요!

 

다음은 배열입니다.

const number = [1];
console.log(number);

number.push(2);
console.log(number);

처음 number 배열을 선언할 때는 배열에 값을 1을 할당하였고

그 이후에 number 배열에 2를 추가하는 코드입니다.

코드를 실행해 볼게요!

 

 

배열에도 값이 재할당이 되는 것을 확인할 수 있습니다!

 

두 번째로 let과 const는 함수 레벨 스코프를 적용하는 var와는 달리 블록 레벨 스코프를 적용합니다.

직전 포스팅(스코프)에서 함수 레벨 스코프를 확인하기 위해 사용한 예제를 그대로 가져다 var를 let으로 바꾸어 써보도록 할게요!

let number = 1;

if(true) {
    let number = 10;
}

console.log(number);

var가 let으로 바뀐 것 말고는 직전 포스팅에서 썼던 예제 그대로인데요, 실행시켜 볼게요!

 

 

var로 변수를 선언했을 때는 함수 레벨 스코프가 적용되어 if안의 number 변수가 전역 변수로 인식돼 10을 출력했던 것 기억하시죠?

그런데 이번엔 let으로 변수를 선언했는데 블록 레벨 스코프가 적용되어 if문 안의 number변수가 지역변수로 인식이 돼서 전역 변수에 영향을 미치지 않고 1을 출력하는 걸 볼 수 있습니다!

 

const도 확인해 볼게요!

위의 코드에서 let을 const로만 바꾸어 주겠습니다.

const number = 1;

if(true) {
    const number = 10;
}

console.log(number);

실행을 시켜볼게요!

 

let과 같이 if문 안의 number 변수가 지역변수로 인식이 되어 전역 변수에 영향을 미치지 않는 것을 확인할 수 있습니다!

 

세 번째로 let과 const의 호이스팅 방식에 차이가 있습니다.

let으로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행됩니다.

let은 var와 같이 런타임 이전에 선언 단계가 실행은 되지만 undefined값을 할당해 초기화는 해주지 않는 특징을 가지고 있는데요, 그래서 변수의 선언 부보다 먼저 변수에 접근하게 되면 참조 에러가 나타나게 됩니다.

 

코드를 실행해 이해해보도록 할게요!

console.log(number);

let number = 1;

let으로 number 변수에 값 1을 할당하여 선언을 하고 선언부 보다 먼저 console.log()로 number 변수를 호출하는 코드입니다.

실행시켜보도록 할게요!

 

 

초기화하기 전에 'number'변수에 접근할 수 없다는 에러가 출력됩니다!

선언 단계까지는 마쳤지만 var와 다르게 undefined값을 할당해 주지 않았기 때문에 초기화 단계까지 이루어지지 않아서 일어나는 에러네요!

 

이러한 let의 특성으로 인해 let으로 선언한 변수는 선언 단계 이후부터 초기화 단계 시작 지점까지 변수를 참조할 수 없는 일시적 사각지대(Temporal Dead Zone - TDZ)라는 구간에 존재하게 됩니다.

 

다음은 const입니다.

const로 선언한 변수는 선언 단계와 초기화 단계가 동시에 진행이 되어야 하는 특징을 위에서 설명드렸죠?

const 역시 초기화 단계에서 undefined 값을 할당받지 않는 특징 때문에 선언 단계까지 진행이 되고 초기화 단계까지 이루어지지 않아 TDZ구간에 빠지게 됩니다.

그래서 런타임 이전에 실행될 수가 없죠.

코드로 확인해 보도록 할게요!

console.log(number);

const number = 1;

위의 코드에서 let을 const로만 바꾼 코드입니다. 실행시켜 보도록 할게요!

 

 

let과 같이 초기화하기 전에 'number'변수에 접근할 수 없다는 에러가 출력되네요!

 

var의 특징으로 인해 불편한 점이 생겨 ES6부터 제공된 let과 const의 개념은 자바스크립트를 사용하는 사람이라면 기본적으로 잘 알고 있어야 하는 개념입니다.

 

기본이지만 처음 접하시는 분들은 이해하기 좀 힘든 개념이기도 한데요, 저도 처음 자바스크립트를 공부할 때 var와 let 그리고 const에 대해 이해하기 힘들었었던 기억이 납니다.

 

최대한 쉽게 이해할 수 있도록 풀어써보았는데 많은 도움이 되셨으면 좋겠습니다!