웹 개발자를 위한 자바스크립트의 모든 것 2장 let, const 정리

let 과 var 의 공통점

var a; // undefined
let b; // undefined

• 유효한 값으로 초기화하지 않아도 된다.
• 유효한 값으로 초기화하지 않은 경우 undefined 가 할당된다.
• 반면 const 는 즉시 초기화하지 않으면 에러가 던져진다.

var 가 갖는 가장 큰 문제

• var의 문제점 짚기 글에 var 의 문제가 나와있다.
• 함수 레벨 스코프를 갖는다는 생각보다 큰 영향력을 가진다.
  • 변수 유지 관리를 힘들게 한다.
  • 코드가 내가 작성한 의도와 다르게 동작할 수 있다.

의도와 다르게 동작하는 코드들

function jumpOut() {
  var a = [1, 2, 3];

  for (var i = 0; i < a.length; ++i) {
    var value = a[i];
    console.log(value);
  }

  console.log(value); // 3 출력
}

• 블록 밖에서 value 를 출력해보았는데, 3이 출력된다.
• 사실상 루프 밖에서 값에 접근할 의도로 코드를 작성할 일이 있을까?
• let 혹은 const 를 사용하면 이런 일은 일어나지 않는다.

function redundantRepetition() {
  var x = "x";
  console.log(x);
  var x = "y";
  console.log(x);

  return x;
}

• x 와 y 를 선언하고, x 를 반환하려 했다면 완전히 잘못 동작한다.
• 동일한 이름의 변수를 선언했단 것을 실행 전에 알면 좋지 않을까?

var 호이스팅

function example() {
  console.log(answer);
  answer = 42;
  console.log(answer);
  var answer = 67;
}

• 함수 시작점의 console.log() 는 answer 가 초기화되지 않은 상태로 이용하는데도 어떠한 경고조차 받지 않고, 그냥 undefined 를 출력한다.
• 출력을 수행하는데 있어서는 undefined 가 큰 문제가 안 될 수 있지만, 중요한 비즈니스 로직 사이에 저런 실수를 범했다면 미묘하게 알아차리기 힘든 곳에 발생하여 해당 로직의 문제를 디버깅하기 매우 어려워질 수 있다.

let 과 const 의 해결방법

let 과 const 는 일시적 데드존(Temporal Dead Zone) 이라는 개념을 사용하여, 실제적으로 호이스팅은 일어나지만, 변수 선언 시점 이전에는 변수에 notInitializedYet 이라는 내부적인 상태를 갖는다. 이 상태에서 변수를 이용한다면, ReferenceError 를 던진다.

새로운 종류의 전역 (global)

this; // Window {0: global, window: Window, self: Window, document: document, name: '', location: Location, …}
var a = 10;
let b = 20;
window.a; // 10
window.b; // undefined

• 전역에서 var 를 이용한 변수 선언을 하면, this 인 window 객체를 더럽히게 된다.
• let 을 이용한 변수 선언은 글로벌 오브젝트(window)를 더럽히지 않는다.
  • const 도 동일하다.

새로운 종류의 전역의 이점

이 새로운 종류의 전역을 '자동 전역'이라고 표현한다.

• 안그래도 혼란한 window 객체를 더이상 더럽히지 않게 된다.
• window 객체를 가리거나 덮어씌운다고 표현할 수 있다.
• 자바스크립트 엔진의 전역 변수에 대한 접근을 최적화할 수 있다.

const 와 const 의 장점

• 생각보다 자바스크립트 변수 선언 중 대부분을 const 로 작성할 수 있다.
  • 많은 부분은 실제로 로직 중 단순히 값을 저장만 하기 때문이다.
• const 가 참조하는 값은 변경하지 못하지만, const 가 참조하는 객체의 프로퍼티는 변경이 가능하여, 생각보다 더 const 를 적극 활용하는 것에 문제가 없다.

루프 내 클로저 문제

function closuresInLoopsProblem() {
  for (var counter = 1; counter <= 3; ++counter) {
    setTimeout(() => {
      console.log(counter);
    }, 10);
  }
}

• 위 함수는 4, 4, 4 를 출력하게 된다.
• JS 비동기 작업의 특성상 UI의 블록을 막기 위해 setTimeout() 은 이벤트 루프 메시지 큐에 있는 이전 작업들이 다 끝나야만 실행될 수 있다.
• 메세지 큐에 있는 작업을 실행할 때 쯤엔 이미 for 문의 순회가 전부 끝난 상태이고, 그 때 counter 변수 주소값이 참조하는 값은 4 이므로, 4 가 3번 출력된다.

루프 내 클로저 문제를 스코프 분리로 해결하기

function closuresInLoopsProblem() {
  for (var counter = 1; counter <= 3; ++counter) {
    ((x) => {
      setTimeout(() => {
        console.log(x);
      }, 10);
    })(counter);
  }
}

• 파라미터는 함수 내부에서만 유효하므로, IIFE 방식을 사용하여 스코프를 분리할 수 있다.
• 1, 2, 3 이 정상적으로 출력된다.

let 으로 해결하기

function closuresInLoopsProblem() {
  for (let counter = 1; counter <= 3; ++counter) {
    setTimeout(() => {
      console.log(counter);
    }, 10);
  }
}

• var 대신 let 을 쓰면 해결된다.

let 이 스코프 문제를 해결하는 방식

• 자바스크립트는 매 블록마다 환경 객체라는 것을 만든다.
• for 루프를 순환할 때마다 새 환경 객체를 생성하게 된다.
• let 으로 선언된 counter 는 매 루프마다 다른 블록 스코프에 존재해서, 각각 다른 환경 객체에 위치하게 된다.
• 메세지 큐에 존재하는 setTimeout 함수는 각각의 환경 객체와 연결되어 있고, 독립된 환경객체 내부의 counter 값을 사용하게 된다.

while 문 예제로 환경 객체 이해하기

function closuresInWhileLoops() {
  let outside = 1;
  while (outside <= 3) {
    let inside = outside;
    setTimeout(function () {
      console.log(`inside:${inside}, outside:${outside}`);
    }, 10);
    ++outside;
  }
}

/*
inside:1, outside:4
inside:2, outside:4
inside:3, outside:4
*/

• inside 는 새롭게 생성되는 블록 환경 객체에 새롭게 생성된다.
• outside 는 함수 환경 객체에 있는 값이 계속 참조된다.

성능 영향

• let 이 초기에 도입되었을 때는 V8 엔진에서 성능이슈가 있었으나, 이제는 최적화가 진행되어 별다른 성능 이슈는 없다.

코드로 변화 살펴보기

// ES5
var list, n, element, text;
list = document.querySelectorAll("div.foo");
for (n = 0; n < list.length; ++n) {
  element = list[n];
  text = element.classList.contains("bar") ? " [bar]" : "[not bar]";
  element.appendChild(document.createTextNode(text));
}

// ES6 (ES2015)
const list = document.querySelectorAll("div.foo");
for (let n = 0; n < list.length; ++n) {
  const element = list[n];
  const text = element.classList.contains("bar") ? " [bar]" : "[not bar]";
  element.appendChild(document.createTextNode(text));
}

• var 선언에서 let 선언으로 바꾸었다.
• var 를 막상 바꾸어보니 let 이 사용되어야만 하는 곳은 한 곳 뿐이다.
• const 는 변수를 수정할 의도가 아닌 사용할 의도라는 것을 표시할 수 있다.

실무 적용 액션 플랜

var 대신 const 또는 let 사용

• 헷갈리는 함수 스코프와 호이스팅이 일어나는 var 대신 const 혹은 let 을 사용하자.
• const 를 애용하면, 생각보다 많은 부분이 const 로 대체된다는 것을 깨닫는다.

변수 범위를 좁게 유지

• 가장 좁은 범위에서 let 과 const 를 사용하자.
• 변화하는 곳을 최소화하는 습관은 코드의 유지보수성을 높여준다.

인라인 익명 함수 대신 블록 스코프 사용

function closuresInLoopsProblem() {
  for (var counter = 1; counter <= 3; ++counter) {
    ((x) => {
      setTimeout(() => {
        console.log(x);
      }, 10);
    })(counter);
  }
}

• 스코프를 나누기 위해 인라인 익명 함수를 사용하지 말고, 간단히 블록 스코프를 사용하자.
• 훨씬 깨끗하고 읽기 쉽다.