알고리즘 문제를 풀다가 문뜩 궁금해지 사실.
나는 과연 let,const에 대해 명확히 알고있을까?
하는 의문이 들어 복습 겸 정리해보았다.

var

ES5 이전에는 변수를 선언할 때 var 키워드를 사용했다.

var name = '자몽', 이런 식으로 var를 사용한 선언을 우리는 자주 해왔을지도 모른다.

하지만 ES6 이후, 사람들은 var를 버리고 let,const로 대거 이동하였는데, 과연 그 이유는 무엇이였을까?

이유는 아래의 코드에서 확인할 수 있다.

var i = 'sample';
for (var i=0;i<10;i++){
  console.log(i);
}
console.log(i);

이렇게 코드를 짠 의도는 "i를 'sample'로 초기화 시키고, 평소처럼 for문을 var로 돌려서 결과값을 만들어내자." 였다.
하지만 콘솔창에 찍힌 값은, 0~9, 'sample'이 아닌, 0~10의 값들이였다.

이러한 이유는 var가 가진 "함수 레벨 스코프"의 특징 때문이였다.
"함수 레벨 스코프"는 말 그대로 "지역 스코프는 함수 내부에서만 만들어진다"라는 의미이다.

따라서 이러한 이유로, for 문, if문 등의 일반적인 문 내부에서만 사용하고 싶은 값들이 의도치 않게 전역 변수로 바뀌는 일이 빈번하게 일어났다.

let,const

let과 const는 이러한 var의 특성으로 인해 ES6이후 새롭게 태어난 키워드이다.
기존 var가 가지고 있었던 단점을 보완해, "함수"가 아닌 "블럭"을 기준으로 지역 스코프가 생성되는 "블럭 레벨 스코프"인 let, const가 탄생하게 되었다.

이러한 탄생 속에서,
let은 변수를, const는 상수를 담당하게 되었다.
즉,
값을 재할당한다면(변수) let을 사용하고,
값을 재할당하는 것을 금지한다면(상수) const를 사용해야 한다는 뜻이다.

이러한 const의 상수 특성으로 인해, const만 변수를 선언함과 동시에 초기화를 해주어야 한다는 특징을 추가적으로 가지게 되었다.

재할당? 재선언?

다음과 같이 let 키워드를 사용하는 코드가 있다.

let name = 'jamong';
let name = '자몽';

let은 변수니깐 결과값도 당연히 '자몽'이 나올거야.
라고 생각했다면 코드를 자세히 살펴보기 바란다.
아마 '재할당'과 '재선언'의 의미를 잘 모르고 있을 가능성이 크다.

"재할당": 값을 바꾸는 행위
ex)

let name = 'jamong';
name = '자몽';

"재선언" : 변수를 다시 선언하는 행위
ex)

let name = 'jamong';
let name = '자몽';

let는 변수의 값을 바꿀 수 있다는 특징을 가지고 있지, 변수 그 자체를 다시 할당할 수 있다는 특징은 가지고 있지 않는 점을 유의하고 있기 바란다.

const에 객체를 할당한다면?

자바스크립트는 크게 2가지 타입으로 나눌 수 있다.

원시 타입: 변경 불가능한 값
객체 타입: 변경 가능한 값

이러한 특성으로 인해 const는 상수임에도 불구하고 객체를 할당하면 객체의 값을 변경할 수 있다는 특징이 생긴다.

const bus = {
  fristSeat = '자몽';
  secondSeat = '사과';
}
bus.secondSeat = '포도';

const에 객체가 할당되면, 이 객체는 const의 '상수' 특징으로 인해 변경할 수 없다.

약간 비유를 하자면, const로 bus를 지정했으므로 bus 자체는 변경이 불가능해진다.
하지만 우리가 평소에 버스를 타면 자유롭게 타고 내릴 수 있듯이, 버스 좌석은 누가 앉든 큰 상관이 없다.

따라서, const에 객체가 할당되면 객체의 '값'은 변경 할 수 있다는 특징이 있다.

호이스팅

사실 이 문제를 여기서 다룰 수 있을까 싶지만 공부하는 겸, 짧막하게 정리해보고자 한다.
우선 호이스팅은 "모든 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작"하는 것을 의미한다.

var

console.log(name); // 출력 결과: 'undefined'
var name = '자몽';

const, let

console.log(name); // 출력 결과: 'SyntaxError'(문법 에러)
const name = '자몽';

var/ const,let이 서로 다르게 콘솔창에 찍히는 이유는
스코프의 선두로 끌어 올려진 것처럼 동작하는 부분이 다르기 때문이다.

변수는 다음과 같은 단계를 거친다.
1. 변수 선언
2. 변수 초기화
3. 변수 할당

var와 let,const는 스코프의 선두에 다음과 같은 단계가 우선적으로 올라가는 것처럼 동작한다.

var: 1.선언, 2.초기화
const,let: 1.선언

나머지 단계는 원래 자리에서 마저 실행되기 때문에, let과 const는 var과 달리 호이스팅이 발생하지 않는 것처럼 보이는 것이다.

결론

• var보다 ES6 이후의 키워드인 const, let을 애용하자.

• const, let 둘 중에 하나가 고민된다면 변수의 남발을 줄이기 위해 const를 먼저 사용하고, 재할당이 필요한 경우에만 let을 사용하자.