JS Undefined 보호 기법 알아보기

undefined란 무엇인가요?

자바스크립트를 배우다 보면 undefined라는 값을 자주 마주치게 됩니다. 이 값은 "정의되지 않았다"는 의미로, 다음과 같은 상황에서 만나볼 수 있어요:

// 값이 할당되지 않은 변수
let a;
console.log(a); // undefined

// 존재하지 않는 객체의 속성에 접근할 때
const obj = {};
console.log(obj.notExist); // undefined

// 반환값이 없는 함수의 결과
function noReturn() {}
console.log(noReturn()); // undefined

undefined는 자바스크립트에서 매우 기본적인 값으로, 코드에서 "이 값은 아직 정의되지 않았어"라고 알려주는 중요한 역할을 합니다.

옛날 자바스크립트의 위험한 비밀

그런데 자바스크립트의 오래된 버전(ES5 이전)에는 충격적인 사실이 있었습니다. 바로 전역 undefined 값이 재정의 가능했다는 것입니다! 😱

// 예전 브라우저에서는 이런 코드가 가능했습니다
undefined = "이제 undefined는 더 이상 undefined가 아닙니다!";

// 이렇게 되면 코드가 예상대로 동작하지 않게 됩니다
let b;
if (b === undefined) {
  console.log("b는 undefined입니다"); // 이 코드가 실행되지 않을 수 있습니다!
}

이것이 왜 문제일까요? 코드의 기본적인 안전장치가 무너지기 때문입니다. undefined가 변경되면 "값이 정의되지 않았다"는 기본 개념 자체가 무너지게 됩니다.

undefined 보호 기법: 즉시 실행 함수(IIFE)의 매개변수

이 문제를 해결하기 위해 경험 많은 자바스크립트 개발자들은 영리한 해결책을 고안했습니다. 바로 즉시 실행 함수의 매개변수로 undefined를 사용하는 것입니다:

(function(window, undefined) {
  // 이 함수 내부에서는 undefined가 항상 진짜 undefined입니다!
  
  // 안전하게 undefined 체크 가능
  let test;
  if (test === undefined) {
    console.log("test는 undefined입니다");
  }
  
})(window);

어떻게 이것이 보호 기법이 될까요? 간단합니다!

1. 함수를 호출할 때 두 번째 인자를 전달하지 않습니다
2. 자바스크립트에서는 전달되지 않은 매개변수가 자동으로 undefined가 됩니다
3. 이 undefined는 함수 내부의 지역 변수이므로 전역 undefined가 변경되어도 영향을 받지 않습니다!

실제 예시로 이해하기

전역 undefined가 변경된 상황을 시뮬레이션해 보겠습니다:

// 전역 undefined를 변경 (예전 브라우저에서 가능했던 일)
undefined = "변경된 undefined";

// 보호되지 않은 코드
function notProtected() {
  let a;
  if (a === undefined) {
    console.log("a는 undefined입니다"); // 실행되지 않음!
  } else {
    console.log("a가 undefined가 아닙니다?!"); // 이 코드가 실행됨
  }
}

// undefined 보호 기법을 사용한 코드
(function(undefined) {
  let a;
  if (a === undefined) {
    console.log("a는 undefined입니다"); // 안전하게 실행됨
  }
})(/* 인자 전달 안 함 */);

네임스페이스와 함께 사용하는 undefined 보호

앞서 본 예제처럼 네임스페이스 패턴과 함께 사용할 수도 있습니다:

((namespace, undefined) => {
  // 여기서는 undefined가 항상 진짜 undefined입니다
  namespace.isUndefined = function(value) {
    return value === undefined; // 안전한 비교
  };
})(window.myApp = window.myApp || {});

// 이제 myApp.isUndefined 함수는 항상 올바르게 작동합니다

현대 자바스크립트에서는 어떨까요?

다행히도 ES5 이후 버전의 자바스크립트(현재 대부분의 브라우저)에서는 undefined가 재정의 불가능하도록 변경되었습니다. 즉, 다음 코드는 에러가 발생합니다:

// 현대 브라우저에서는 이 코드가 에러를 발생시킵니다
undefined = "무언가 다른 것"; // TypeError: Cannot assign to read only property 'undefined'

하지만 많은 자바스크립트 라이브러리와 프레임워크에서는 여전히 이 패턴을 볼 수 있는데, 이는 다음과 같은 이유 때문입니다:

1. 오래된 브라우저와의 호환성 유지
2. 코드의 안전성 보장 (방어적 프로그래밍)
3. 전통적인 자바스크립트 패턴으로서의 관습

정리

자바스크립트의 undefined 보호 기법은 다음과 같은 장점이 있습니다:

• 코드의 안전성과 예측 가능성을 높여줍니다
• 전역 변수 오염으로부터 보호합니다
• 자바스크립트의 언어적 특성을 이해하는 데 도움이 됩니다

이 기법은 단순하지만 매우 효과적이며, 자바스크립트의 깊은 이해를 보여주는 우아한 패턴입니다. 비록 현대 자바스크립트에서는 큰 문제가 되지 않지만, 이런 패턴을 알아두면 기존 코드를 이해하는 데 큰 도움이 됩니다.

다음에 즉시 실행 함수나 네임스페이스 패턴을 사용하는 코드를 볼 때, undefined 매개변수가 왜 거기 있는지 이해할 수 있을 것입니다! 😊