매일의 공부 기록

1. 값이 없는 vs 선언되지 않은

값이 없는 변수의 값은 undefined이며, typeof의 결과는 "undefined"이다.

undefined와 undeclared는 전혀 다른 개념이다.

undefined는 접근 가능한 스코프에 변수가 선언되었으나 현재 아무런 값도 할당되지 않은 상태를 가리키는 반면,

undeclared는 접근 가능한 스코프에 변수 자체가 선언조차 되지 않은 상태를 가리킨다.

let a;

console.log(a); // undefined
console.log(b); // ReferenceError: b is not defined

문제는 선언되지 않는 변수에 typeof를 해도 오류 처리를 하지 않는다.

선언되었지만 값을 할당하지 않은 변수도, 선언되지 않은 변수도 모두 typeof의 결과값은 undefined이다.

let a;

typeof a; // "undefined"
typeof b; // "undefined"

2. 선언되지 않는 변수

선언되지 않은 변수를 처리하는 typeof의 방식은

여러 스크립트 파일의 변수들이 전역 네임 스페이스를 공유할 때 유용하다.

[func.js]
function sum(a, b) {
  return a + b;
}

function product(a, b) {
  return a * b;
}

export { sum, product }

[app.js]
import {product, sum} from 'func';

console.log(product(1,2)); // 2
console.log(sum(1,2)); // 3

// 이 경우 DEBUG라는 변수가 없으므로 에러 발생!
if (DEBUG) {
  console.log("디버깅을 시작합니다.");
}

// 이렇게 해야 안전하게 존재 여부를 체크할 수 있다.
if (typeof DEBUG !== "undefined") {
  console.log("디버깅을 시작합니다.");
}

typeof 없이 전역 변수를 체크하는 다른 방법은

전역 변수가 모두 전역 객체(브라우저는 window)의 프로퍼티라는 점을 이용하는 것이다.

선언되지 않은 변수 때와는 달리 어떤 객체의 프로퍼티를 접근할 때는 

그 프로퍼티가 존재하지 않아도 ReferenceError가 나지 않는다.

// DEBUG가 없으면 에러가 남
if (DEBUG) {
  console.log("디버깅을 시작합니다.");
}

// DEBUG가 없어도 에러가 나지 않음
if (window.DEBUG) {
  console.log("디버깅을 시작합니다.");
 }

하지만 다중 자바스크립트 환경에서는 전역 객체가 window가 아닐 수 있으므로 

window 객체를 통한 전역 변수 참조는 가급적 삼가는 것이 좋다.

typeof는 전역변수를 사용하지 않을 때도 유용하다.

(function() {
  function test(a, b) {
    return a + b;
  }
  
  function doSomething() {
    const func = 
      (typeof test !== "undefined") ?
      test :
      function(a, b) { return a - b; };
      
    console.log(func(1,2));
  }
  
  doSomething();
})();

test는 전역 변수가 아니지만 8~10번째 줄에서 typeof로 존재 여부를 확인하고 있다.

위 코드에서는 전역변수와 같이 체크 용도로 사용할 만한 객체가 없기 때문에 typeof가 꽤 요긴하다.

또는 다음과 같이 명시적으로 나타낼 수도 있다.

(function() {
  function test(a, b) {
    return a + b;
  }
  
  function doSomething() {
    const func = test ||
      function(a, b) { return a - b; };
      
    console.log(func(1,2));
  }
  
  doSomething();
})();

https://github.com/getify/You-Dont-Know-JS