YOU DON`T KNOW JS(타입과 문법, 스코프와 클로저) : 2

해당 글은 'YOU DON`T KNOW JS(타입과 문법, 스코프와 클로저)' 라는 책을 읽으며

나름의 정리를 하는 글입니다.

 

 

 

 

 

* 브라우저에서 자바스크립트 코드를 처리할 때, 특히 여러 스크립트 파일의 변수들이 전역 네임스페이스(namespace)를

  공유할 때, typeof의 안전 가드는 의외로 쓸모가 있음.

자신이 작성한 코드의 모든 변수는 전역 네임스페이스에는 전혀 없고, 오직 전용(Private) 또는 별도의 네임스페이스에만 있다고 자신 있게 말하는 개발자들이 있다.
이론적으로는 그럴듯하지만 실제는 거의 불가능한 소리다.
물론 그런 방향으로 코딩하려는 자세는 좋다!
다행히 ES6부터는 모듈을 일급(First-Class) 개념으로 지원하기 때문에 현실적으로 가능할 것 같다.

  간단한 예로 프로그램의 '디버그 모드'를 'var DEBUG = true;' 라는 전역 변수로 조정할 경우 ReferenceError가

  나지 않게 하려면 조심해서 DEBUG 변수를 체크해야하는데, 이때 typeof의 안전 가드가 제 몫을 해냄.

ES6부터는 import/export 키워드로 외부 모듈의 함수/변수를 사용할 수 있습니다.
다음 예제를 참고하시기 바랍니다.

  utility.js

function sum(a, b) {
    return a + b;
}

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

export { product, sum }

 

  app.js

import { product, sum } from 'utility';

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

// 헉, 이렇게 하면 에러가 난다!
if (DEBUG) {
    console.log("디버깅을 시작합니다.");
}

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

  DEBUG 같은 임의로 정의한 변수를 쓰지 않더라도 이런 식으로 체크하는 것이 편리하며,

  내장 API 기능을 체크할 때에도 에러가 나지 않게 도와줌.

if (typeof atob === "undefined") {
    atob = function() { /* ... */ };
}

존재하지 않는 기능을 추가하기 위해 '폴리필(Polyfill)'을 정의하려면 atob 선언문에서 var 키워드를 빼는 편이 좋다.
if문 블록에 var atob로 선언하면, (전역 atob는 이미 존재하므로) 코드 실행을 건너뛰더라도 선언 자체가 최상위 스코프로 호이스팅(Hoisting)된다.(2부 스코프와 클로저 참고)
이렇게 (보통 호스트 객체(Host Object)라고 부르는) 특한 타입의 전역 내장 변수를 중복 선언하면 에러를 던지는 브라우저가 있다.
명시적으로 var를 빼야 선언문이 호이스팅되지 않는다.

 

  typeof 안전 가드 없이 전역 변수를 체크하는 다른 방법으로는 전역 변수가 모두 전역 객체(브라우저는 window)의

  프로퍼티라는 점을 이용하여 다음과 같이 (꽤 안전하게) 체크할 수 있음.

if (window.DEBUG) {
    // ...
}

if (window.atob) {
    // ...
}

  선언되지 않는 변수 때와는 달리 어떤 객체(전역 window 객체도 포함해서)의 프로퍼티에 접근시
  해당 프로퍼티가 존재하지 않아도 ReferenceError가 발생하지 않음.

 

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

  전역 변수를 꼭 window 객체로만 호출하지 않는 다중 자바스크립트 환경(브라우저뿐만 아니라 서버에서 실행되는

  node.js가 일례)이라면 더욱이 삼가는게 좋음.