var 이때 쓸 수 도 있겠는데?

🍋 등장 배경

---

변수 선언 방법에 대해 공부하다 보면,

“var는 무조건 사용하지 말고, 변하지 않는 값은 const, 변할 수 있는 값은 let을 사용하라”

이런 말을 듣게 되고, 나 역시 별 주관없이 이렇게 받아드려왔다.

머리가 조금 더 커진 지금 시점에 생각해보면 그래도 살짝 추상화가 된 부분이 있지 않나 싶다.

🍋 var 이때 쓸 수도 있겠는데?

---

파일 시스템 트리 GUI를 만드는 사이드 프로젝트를 진행했다. (여기서 볼 수 있어용)

개발 도중 이러한 문제가 있었다.

커맨드타입(add, delete, move etc) 별 다른 코드를 실행하도록 하는 switch - case 구문을 사용하던 중 변수 ‘결과’ 동일한 스코프에서 이미 선언되었다는 내용의 에러를 마주쳤다.

const validateCommand: IValidateCommand = (command, tree) => {
    switch (커맨드타입) {
        case "add":
            const 결과 = 유효성점검코드
        case "delete":
            const 결과 = 유효성점검코드
        case "move":
            const 결과 = 유효성점검코드
        default:
            ...
    }
} // error: Identifier '결과' has already been declared.

const, let은 블록 레벨 스코프를 가진다. 블록 레벨 스코프는 중괄호를 기준으로 그 범위가 구분되기에 switch -case 구문에서 하이라이트된 아래 영역은 같은 스코프를 공유하게 된다.

switch () **{
    case __:
    case __:
}**

사실 case 문을 블록으로 감싸주어 const 별 별개의 스코프를 만들어줄 수 있는 방법도 있지만…

또 다른 차선책으로 함수 단위의 스코프를 갖는 var로 변수를 선언해줄 수 도 있다는 것이었다.

각 케이스 별로 단 하나의 실행문만 실행되기에 서로의 케이스 내 var 결과 변수가 서로에 영향을 주지 않는다는 점에서 사용할 수 있었다.

switch () {
    case __: 
        var 결과
    case __: 
        var 결과
}

물론 var으로 선언한 변수는 함수 스코프 내 언제든 변경이 가능하기에, 다른 구문에서는 업데이트 추적이 어려워질 수 있다는 단점은 있겠지만, 이 경우처럼 switch-case 구문에서는 사용이 가능하다는 생각을 했다.

하지만… const, let은 var의 개선안으로 등장했기에 개선하는 부분을 명확히 짚고 넘어가면 좋다. 한번 살펴보자.

🍋 기존 var의 문제

---

• 문제 1. var 변수는 언제나 변경 가능하여 이전엔 명명 규칙을 대문자 || _언더스코어로만 제한하였음

• 문제 2. var 변수는 같은 변수 재선언을 허용함.

• 값이 변경되었을 때 어디서 변경되었는지 추적이 어려워짐.

• 문제 3. var 변수는 함수 단위의 스코프를 갖음. 블록 외부에서 if/for 문 블록 외부에서도 var 변수 변수 접근 가능

  function welcome(name){ 
  if (!name){ 
      var errMsg = "no name error!" 
  
  } 
  console.log(name); 
  console.log(errMsg); // "no name error!". 
  //함수 단위의 스코프를 가져 if 블록 외부에서에서도 변수 접근 가능 
  } welcome();

• 문제 4. 변수 선언 전에 변수의 사용이 가능한 호이스팅* 발생

  console.log(foo); // undefined 
  var foo; 
  console.log(bar); // Error: Uncaught ReferenceError: 

(*호이스팅? 변수, 함수 등 선언문을 최상단의 스코프로 끌어올려 메모리를 먼저 할당하는 자바스크립트 내부 현상. 때문에 var로 선언된 모든 변수는 스코프 선두에서 선언과 초기화 단계가 한번에 이루어져서 변수 선언문 이전에 변수를 참조할 수 있게됨.)

🍋 어떻게 해결했나요?

---

해결: let, const

let으로 선언된 변수는 블록 레벨 ({})의 스코프를 가지며 변수의 선언까지 일시적 사각지대 (Temporary Dead Zone)이라는데로 빠져서 변수가 선언문 이전에 변수를 참조할 수 없게됩니다.

function welcome(name){
    if (!name){
        let errMsg = "no name error!" // 블록 외부에서 접근 불가 
    }
    console.log(name);
    console.log(errMsg); // Err: errMsg is not defined
}

welcome();

🍋 한줄 요약

---

변수의 선언에는 기본적으로 const 사용, 재할당이 필요한 경우에는 let을 사용하자에는 변함이 없다…

const, let 대신 var을 써야만 얻을 수 있는 효과에 대한 설득이 부족하기 때문…