1.3.2 선언되지 않은 변수

typeof 안전가드를 이용하는 방법

// 잘못된 예
// 이렇게 작성하면 DEBUG의 값이 만약에 선언되지 않은 변수라면 에러가 난다.
if (DEBUG) {
	console.log("디버깅을 시작한다.");
}

// 올바른 예
// 만약에 DEBUG라는 변수가 선언되지 않았어도 에러가 발생하지 않는다.
if (typeof DEBUG !== "undefined") {
	console.log("디버깅을 시작한다.");
}

이러한 typeof 안전가드는, 브라우저에서 자바스크립트 내장 메소드 기능이 있는지 체크하는 폴리필을 만들 때 도와준다.

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

이 때 주의할 점은 if문 안의 atob는 var를 사용하지 않아야 한다.
만약 여기서 var를 쓴다면 if문이 false가 되어 건너뛰게 된다해도 var atob는 호이스팅 되어 전역 스코프 상단으로 끌어올려지기 때문이다.

// 1
if (typeof atob === "undefined") {
	var atob = function() {/* --- */};
}

// 2
var atob;

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

결론적으로 1과 2는 같다.

typeof 안전가드 없이 전역 변수를 체크하는 방법은 전역객체인 window의 프로퍼티라는 점을 이용하는 것이다.

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

객체의 프로퍼티에 접근할 때 그 프로퍼티가 존재하지 않아도 에러가 나지 않는다.
하지만 이런 방식은 node.js 환경에서는 에러가 나기 때문에 이런 체크 방법은 지양해야 한다.

typeof 안전가드를 통해 FeatureABC 기능이 있으면 그대로 사용하고, 없으면 뒤에 대신 사용할 함수를 작성해주는 방법.

function doSomething() {
	var helper =
        (typeof FeatureABC !== "undefined") ?
        FeatureABC :
    	function() {/* --- */};
  	var val = helper();
}

|| 연산자를 사용하여 '의존성 주입'설계 패턴을 사용하는 방법.

function doSomething(FeatureABC) {
	var helper = FeatureABC ||
        function() {/* --- */}

    var val = helper();
}

결론

두가지 방법 모두 장단점이 있지만 차이점은 typeof 연산자를 사용하는 것이 선택할 수 있는 옵션이 많다.

• typeof 활용 방법은 조건문이 참일 때와 거짓일 때 2가지 옵션을 각각 설정하며 의존성이 없다.
• || 연산자를 활용하면 참일 때는 무조건 해당 기능을 사용해야하며, 매개변수를 활용한다는 점에서 매개변수 의존성이 필요하고 typeof 보다 활용도가 좁다.
• 상황에 맞게 유도리 있게 사용하자.