FRONTEND ENGINEERING

JavaScript undefined vs null: 차이점 분석과 엔터프라이즈 타입 체크 전략

자바스크립트의 모호한 개념인 undefined와 null의 기술적 차이를 명확히 규명하고, 데이터 무결성을 위한 커스텀 typeOf 및 isEmpty 유틸리티 함수 구현 방법을 제시합니다.

📑 목차

• 1. undefined: 할당되지 않은 상태
• 2. null: 의도적인 값의 부재와 주의점
• 3. 엄격한 비교와 데이터 무결성
• 4. 한계 극복: Custom typeOf 구현
• 5. 실무 적용: 범용 isEmpty 유틸리티
• 6. 요약 및 Best Practice

1. undefined: 할당되지 않은 상태

undefined는 변수가 선언되었으나 아직 값이 할당되지 않은 상태를 의미합니다. 이는 자바스크립트 엔진이 변수 초기화 단계에서 메모리 공간을 확보한 후, 자동으로 부여하는 기본값입니다.

var testVar;
alert(testVar);        // undefined
alert(typeof testVar); // "undefined"

변수 선언 외에도 객체에 존재하지 않는 프로퍼티에 접근하거나, return 문이 없는 함수를 호출했을 때 엔진은 undefined를 반환합니다.

2. null: 의도적인 값의 부재와 주의점

null은 개발자가 의도적으로 '값이 없음'을 명시할 때 사용합니다. 이는 해당 변수가 더 이상 유효한 객체나 값을 참조하지 않음을 코드 레벨에서 표현하는 중요한 수단입니다.

var testVar = null;
alert(typeof testVar); // "object"

여기서 가장 주의할 점은 typeof null이 "object"를 반환한다는 사실입니다. 이는 자바스크립트 초기 설계의 오류이지만 하위 호환성을 위해 수정되지 않았습니다. 따라서 null 여부를 체크할 때 typeof 연산자를 사용하는 것은 반드시 지양해야 합니다.

3. 엄격한 비교와 데이터 무결성

두 값은 모두 '없음'을 나타내지만, 비교 연산 시 동작 방식이 다릅니다. 엔터프라이즈 환경에서는 데이터 무결성을 위해 느슨한 비교를 피해야 합니다.

null === undefined   // false (엄격한 비교)
null == undefined    // true  (느슨한 비교)

실무 애플리케이션에서는 항상 일치 연산자(===)를 사용하는 것을 원칙으로 삼아야 합니다. 느슨한 비교(==)는 예기치 않은 형 변환(Type Coercion)으로 인한 잠재적 버그를 유발할 수 있습니다.

4. 한계 극복: Custom typeOf 구현

앞서 언급했듯이 typeof 연산자는 null, Array, Date 등을 모두 "object"로 반환하는 한계가 있습니다. 이를 해결하기 위해 Object.prototype.toString을 활용한 커스텀 함수를 사용하는 것이 좋습니다.

function typeOf(obj) {
  return {}.toString.call(obj)
    .split(' ')[1]
    .slice(0, -1)
    .toLowerCase();
}

// 사용 예시
typeOf(null);   // "null"
typeOf([]);     // "array"
typeOf(/a/);    // "regexp"

이 패턴을 사용하면 배열, 정규식, null 등을 명확하게 구분할 수 있어 데이터 파싱 로직의 안정성을 획기적으로 높일 수 있습니다.

5. 실무 적용: 범용 isEmpty 유틸리티

실무에서는 단순히 타입을 체크하는 것을 넘어, 값이 비어있는지(Empty) 확인해야 하는 경우가 빈번합니다. 빈 배열, 빈 객체, 빈 문자열 등을 통합적으로 검사하는 isEmpty 함수는 다음과 같이 구현할 수 있습니다.

function isEmpty(value) {
  // 1. falsy 값 체크 (null, undefined, false, 0, "")
  if (!value) return true;

  // 2. 배열 및 문자열: 길이(length) 체크
  if (Array.isArray(value) || typeof value === 'string') {
    return value.length === 0;
  }

  // 3. 객체: own property 존재 여부 체크
  for (var key in value) {
    if (Object.prototype.hasOwnProperty.call(value, key)) {
      return false;
    }
  }

  return true;
}

이 유틸리티 함수를 프로젝트 공통 모듈로 등록해두면 폼 검증이나 API 응답 처리 시 일관된 로직을 유지할 수 있어 유지보수성이 향상됩니다.

6. 요약 및 Best Practice

안전하고 유지보수하기 쉬운 코드를 위해 다음 원칙을 기억하세요.

• 할당: 값이 없음을 명시할 때는 undefined 대신 null을 사용하세요.
• 비교: == 대신 ===를 사용하여 타입까지 정확하게 비교하세요.
• 검증: typeOf와 isEmpty 같은 유틸리티 함수를 활용하여 엣지 케이스(Edge Case)를 방어하세요.