자바스크립트 undefined 체크 완벽 방법

자바스크립트를 사용하다 보면 ‘undefined’를 마주치는 순간이 정말 많아요. 이 값이 갑자기 나타나면 코드가 예상치 못한 방향으로 흘러가거나 에러를 만나게 되죠. 그래서 오늘은 undefined가 정확히 무엇인지, 그리고 다양한 상황에서 어떻게 안전하게 체크하고 처리할 수 있는지 하나씩 살펴보려고 해요. 이 글을 읽고 나면 undefined 때문에 당황하는 일이 줄어들 거예요.

undefined가 뭔지 먼저 알아보기

undefined는 자바스크립트에서 ‘아직 값이 정해지지 않았다’는 상태를 나타내는 특별한 값이에요. 변수를 선언만 하고 값을 넣지 않았을 때, 객체에 존재하지 않는 속성에 접근하려 할 때, 함수에서 아무것도 반환하지 않았을 때 등 여러 상황에서 자연스럽게 등장하죠. 이 값은 ‘의도적으로 비어있음’을 의미하는 null과는 조금 다르다는 점도 기억해두세요. undefined는 시스템이 자동으로 부여하는 ‘비어있음’의 표시라고 생각하면 돼요.

undefined를 확인하는 여러 가지 방법

undefined를 체크하는 방법은 상황에 따라 달라져요. 가장 기본적인 방법부터 실전에서 유용한 고급 방법까지 정리했으니, 자신의 코드에 맞는 방법을 골라 적용해 보세요.

typeof로 안전하게 확인하기

가장 안전하고 널리 권장되는 방법이에요. typeof 연산자를 사용하면 변수가 선언되지 않은 경우에도 에러 없이 체크할 수 있어요. 특히 외부 라이브러리나 복잡한 코드에서 변수의 존재 여부를 모를 때 유용하죠.

if (typeof myValue === 'undefined') {
    // myValue가 undefined인 경우 처리
}

엄격한 비교(===) 사용하기

변수가 이미 선언되어 있다는 게 확실할 때는 삼중 등호(===)를 사용해 직접 비교할 수 있어요. 이 방법은 코드가 간결하고 의도가 명확하지만, 변수가 선언되지 않았다면 에러가 발생할 수 있으니 주의해야 해요.

if (myValue === undefined) {
    // 처리 로직
}

null과 undefined를 함께 체크하기

실제 개발에서는 값이 없음을 나타내는 null과 undefined를 동시에 처리해야 할 때가 많아요. 이럴 때는 느슨한 비교(==)를 사용해 한 번에 체크할 수 있어요.

if (myValue == null) {
    // myValue가 null이거나 undefined인 경우
}

이 코드는 myValue가 null 또는 undefined일 때 모두 참이 돼요. 두 경우를 같은 것으로 보고 처리하고 싶을 때 편리한 방법이에요.

자바스크립트 코드 에디터 화면에서 typeof 연산자를 사용해 undefined를 체크하는 모습
typeof를 사용한 undefined 체크는 가장 안전한 방법 중 하나입니다.

실전에서 자주 쓰이는 고급 기법

옵셔널 체이닝으로 안전하게 객체 탐색하기

최신 자바스크립트(ES2020)부터 사용할 수 있는 문법이에요. 객체의 중첩된 속성에 접근할 때 중간에 undefined가 있어도 에러 없이 처리할 수 있게 해줘요. API 응답을 다루거나 복잡한 데이터 구조를 처리할 때 정말 유용하죠.

const userName = user?.profile?.name;
// user나 profile이 undefined여도 에러 발생 없이 userName은 undefined가 됨

널 병합 연산자로 기본값 설정하기

값이 null이나 undefined일 때만 기본값을 사용하고 싶을 때 널 병합 연산자(??)를 사용해요. 기존에 많이 쓰던 OR 연산자(||)는 0이나 빈 문자열 같은 falsy 값도 기본값으로 바꿔버리는 문제가 있었는데, ??는 정말 null이나 undefined일 때만 동작해서 더 정확해요.

const displayName = userInput ?? '익명 사용자';

실전 예시 API 응답 처리하기

실제 프로젝트에서 API로부터 받은 데이터를 처리할 때 undefined 체크가 어떻게 활용되는지 볼게요.

function processApiResponse(response) {
    // 옵셔널 체이닝과 널 병합 연산자를 함께 사용
    const userId = response?.data?.user?.id ?? 'unknown-id';
    
    // typeof로 상세 체크
    if (typeof userId === 'undefined') {
        return { success: false, message: '사용자 정보를 찾을 수 없음' };
    }
    
    return { success: true, id: userId };
}

주요 사용 상황과 팁

undefined 체크가 특히 중요한 몇 가지 상황을 정리해 봤어요.

상황추천 방법비고
함수 매개변수 기본값기본 매개변수 문법 사용function greet(name = ‘손님’) {}
외부 API 데이터 처리옵셔널 체이닝 + 널 병합 연산자데이터 구조가 불확실할 때 안전
변수 존재 여부 확인typeof 연산자선언되지 않은 변수도 안전하게 체크
의도적인 빈 값 처리엄격한 비교(=== undefined)코드 의도를 명확히 표현

프로젝트를 시작할 때 팀원들과 undefined를 어떻게 처리할지 미리 약속하는 것도 좋은 방법이에요. 모든 코드에서 일관된 방식을 사용하면 유지보수가 훨씬 쉬워지거든요. 특히 큰 규모의 프로젝트나 여러 사람이 함께 작업할 때는 이런 작은 규칙이 큰 차이를 만들어요.

마무리

undefined는 자바스크립트 개발자라면 피할 수 없는 존재예요. 하지만 적절하게 다루는 방법을 알면 두려울 것이 전혀 없어요. 가장 중요한 것은 상황에 맞는 방법을 선택하는 거예요. 변수의 존재 자체가 불확실할 때는 typeof를, 객체의 깊은 속성을 다룰 때는 옵셔널 체이닝을, 기본값이 필요할 때는 널 병합 연산자를 사용하는 식으로 말이죠. 이 다양한 방법들을 잘 익혀두면 더 견고하고 예측 가능한 코드를 작성할 수 있을 거예요. undefined를 이해하고 잘 다루는 것은 자바스크립트 실력을 한 단계 업그레이드하는 지름길이에요.

더 많은 정보는 MDN 웹 문서의 undefined 페이지에서 확인할 수 있어요.

all 추천글 더보기