var

ES5까지 var은 자바스크립트에서 변수를 선언할 수 있는 유일한 키워드였다.

하지만 var에 어떠한 문제들이 있었는지 ES6에서 let, const라는 키워드가 등장하였다.

대개 새로운 무언가가 만들어지는 이유는 이전의 문제점을 개선하기 위해서이다.

✔ 목표: 지금부터는 var의 특징과 단점들에 대해 알아보고, 이를 let과 const가 어떻게 개선했을지 유추해보자.

태초에는 var가 있었다.

• ES6는 기본적으로 하위 호환성을 유지하면서 ES5 기반 위에 새로운 기능을 추가한 것이다.
• ES5를 잘 이해하고 있다면 ES6를 더 명확하게 알 수 있다. 그러므로 var의 특성을 알아보겠다.
  
  

JS의 특이한 점

암묵적 undefined 초기화

var score;

변수를 선언만 하고 값을 할당하지 않았다. 따라서 변수 선언에 의해 할당된 메모리 공간은 비어 있을 것이라고 생각할 수 있다.


그러나 JS는 undefined라는 값을 할당하여 초기화한다.

(네 정말요..? 👀 변수에 값을 할당하지 않으면 바로 에러가 발생하는 파이썬과 다르게 친절해 보일 수도 있다.)

• 메모리를 확보한 다음, 값을 할당하지 않은 상태에서 변수를 참조하면 쓰레기 값이 나올 수 있다.
• 👍 장점: 하지만, var은 암묵적 초기화를 수행하므로 쓰레기 값(다른 어플리케이션이 사용했던 값) 참조의 위험으로부터 안전하다.
• 👎 단점: JS에서 많이 발생하는 undefined 참조 에러
  
  
  

변수 선언의 실행 시점과 호이스팅

// 문제! score는 어떤 값을 가질까요?
console.log(score);
var score;

// 정답: undefined

지금까지 Java나 Python에 익숙했던 나로서는 가장 충격적이었던 JS의 특징이다. 보통은 어림도 없다. 선언도 전에 읽으려고 하다니.. 👀

JS 엔진은 변수 선언을 포함한 모든 선언문을 찾아서 런타임 이전 단계에서 먼저 실행하고, 소스 코드를 순차적으로 실행한다.

• 이를 한 단어로 뜻하자면 호이스팅이다. 이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 것을 뜻함

값의 할당

// 문제! 
console.log(score); // undefined (이건 알쥐)
score = 80
var score;
console.log(score); // ??

JS가 주언어가 아닌 사람들이 보기엔 이게 웬 뚱딴지 같은 코드처럼 보일 수도 있다.

지금까지는 늘 선언 후 초기화.. 값 할당 후 참조라는 규칙을 따랐을테니.

그러나 JS는 이 어려운걸 해냅니다! 👏

정답은 80!

• WHY? 위의 내용을 복습해보면 쉽게 풀린다!

1. 변수 선언은 런타임 이전 단계에서 실행된다. 즉, 코드에 있는 모든 변수는 상단에 선언된 것이나 마찬가지
2. 값의 할당은 소스 코드가 순차적으로 실행되는 시점인 런타임에 실행된다.

// 아하 그러면, 여기에 var score;가 선언된거나 마찬가지구나!
console.log(score); // undefined (JS의 암묵적 초기화)
score = 80 // score 이미 선언 되었으므로 초기화 가능!
var score;
console.log(score); // 80이구나!

😯 이게 과연 최선일까?

다른 언어들이 선언과 초기화와 관련된 일정 규칙을 따르는 이유가 있을텐데, 이대로 사용해도 괜찮은가?

호이스팅 되니까 변수들을 상단이 아니라 아무데서나 선언해도 괜찮겠네! -> 근데 코드 흐름이 이상하지 않나요?

모든 선언문을 런타임 이전에 실행하는데 선언문이 많으면 어떻게 되는거지? -> 느려지지 않을까요?

함수 레벨 스코프

• var 키워드로 선언한 변수는 함수의 코드 블록만을 지역 스코프로 인정한다.
• 따라서 함수 외부에서 var로 선언했다면, 코드 블록 내에서 재선언해도 모두 전역 변수가 된다.

var x = 1; // 전역 변수
if(true) {
  // x는 전역 변수다. 코드 블록 내에서 재선언해도 이미 전역 변수이다.
  // 이는 의도치 않게 변수값이 변경되는 부작용이 있다.
  var x = 10;
}
console.log(x) // 10

😯 이게 과연 최선일까?

간혹 변수명이 겹치는 경우가 있는데, 지역 변수 전역 변수의 개념이 사라지는게 아닌가?

이러한 문제를 개선하려고 나온 것이 let과 const

• var에 어떤 특징이 있었지?

1. 선언 후 자동으로 undefined로 초기화
2. 호이스팅
3. 함수 레벨 스코프

• 발생할 수 있는 문제

1. JS에서 자주 발생하는 undefined 참조 에러
2. 선언문이 많아지면 호이스팅에 의해 JS 구동이 지연될 수 있음, 코드 가독성 낮아짐
3. 지역 변수와 변수명이 겹치면 전역 변수를 변경하게 됨

그래서 let과 const로 어떻게 해결했냐고!

그것은 다음 챕터에서 밝혀집니다..!

To be continued..😎