[JS] undefined vs null

자바스크립트 원시 타입에 undefined와 null이 존재한다.

분명 이 둘의 목적성은 다르다.

하지만, 값이 없다는 것을 표현하는데 undefined와 null을 혼용해 사용되고 있다.

undefined와 null의 차이점과 특징들을 정리하고 제대로 사용해보자.

차이점

undefined

• 변수가 선언되었지만 값이 할당되지 않은 상태
• JS 엔진이 변수를 초기화할때 자동으로 할당
• 주로 값이 없는 상태를 나타냄

null

• 변수에 명시적으로 없음을 나타내는 값으로 할당
• 변수에 의도적으로 값이 없음을 설정할 때 사용
• 주로 객체가 존재하지 않는 상태를 나타낼때 사용 (참조 해제)

let undefinedVariable;
let nullVariable = null;

console.log(undefinedVariable); // undefined
console.log(nullVariable); // null

function exampleFunction(value) {
    if (value === undefined) {
        console.log('값이 없습니다.');
    } else {
        console.log('값:', value);
    }
}

exampleFunction(undefinedVariable); // '값이 없습니다.'
exampleFunction(nullVariable); // 값: null

undefined와 null 체크

비교연산자

보통은 typeof 연산자를 사용해 타입을 확인하지만, typeof 연산자를 사용해 null 타입이 object로 조회된다.

그래서 언디파인드와 널을 체크하는 가장 안전한 방법은 엄격한 비교연산자(===)를 사용하는 것이 좋다.

// 변수가 undefined인지 체크하는 안전한 방법
if (someVariable === undefined) {
    console.log('변수는 undefined입니다.');
}

// 변수가 null인지 체크하는 안전한 방법
if (someVariable === null) {
    console.log('변수는 null입니다.');
}

truthy / falsy

Truthy와 Falsy 값은 자바스크립트에서 조건식을 평가할 때 사용되는 개념이다.

Truthy 값은 조건식을 true로 평가할 때, Falsy 값은 조건식을 false로 평가할 때 발생한다.

Truty 값은 Falsy 값으로 취급되지 않은 모든 값이며, Falsy 값은 다음과 같다.

• false
• 0
• "" (빈 스트링)
• null
• undefined
• NaN (숫자가 아님을 나타내는 값)

let someVariable;

if (someVariable) {
    console.log('someVariable은 Truthy입니다.'); // 이 코드는 실행되지 않음
} else {
    console.log('someVariable은 Falsy입니다.');
}

someVariable = null;

if (someVariable) {
    console.log('someVariable은 Truthy입니다.'); // 이 코드는 실행되지 않음
} else {
    console.log('someVariable은 Falsy입니다.');
}

undefined일 때와 null일 때 모두 Falsy 값으로 평가되어 "someVariable은 Falsy입니다."라는 메시지가 출력된다.

이러한 성질을 활용하여 변수가 undefined이거나 null인지 체크할 수 있다.

기타

null 병합 연산자 (??)

• null 병합 연산자는 변수가 null 또는 undefined일 때 대체 값을 지정하는 데 사용
• 변수가 null 또는 undefined이면 오른쪽 피연산자(대체 값)를 반환하고, 그렇지 않으면 왼쪽 피연산자(변수 값)를 반환

let someVariable = null;
let result = someVariable ?? '기본값'; 
// someVariable이 null이므로 기본값 반환
console.log(result); // "기본값"  

옵셔널 체이닝 연산자 (?.)

• 옵셔널 체이닝 연산자는 객체의 속성에 안전하게 접근할 수 있도록 함
• 객체가 null 또는 undefined인 경우에도 에러를 방지하고, 속성에 접근할 때 사용

let user = {
    name: 'zeromountain',
    address: {
        city: 'Seoul'
    }
};

console.log(user.address?.city); // Seoul
console.log(user.address?.country); // undefined
console.log(user.address.country); // undefined
delete user.address
console.log(user.address?.city); // undefined
console.log(user.address?.country); // undefined
console.log(user.address.city); 
console.log(user.address.country);

위의 예시처럼 uesr 내부에 address 객체가 존재할때는 옵셔널 체이닝을 붙이지 않아도 undefined가 조회되지만, address 객체를 제거했을때는 타입에러가 발생하는 것을 확인 할 수 있다.

이와 같이 옵셔널체이닝을 사용하면 에러를 발생시키지 않고 프로그램의 안정성을 높일 수 있다.

적용

• 함수의 반환 값이 불확실한 경우: 함수가 어떤 이유로 인해 값을 반환하지 못하거나 반환 값이 불분명한 경우, 명시적으로 undefined를 반환하여 호출자에게 함수의 결과가 없음을 알린다.

• 에러 처리: 함수가 예기치 않게 에러를 발생시키거나 유효하지 않은 상태를 반환해야 할 때, 명시적으로 null을 반환하여 호출자에게 해당 함수의 실행 결과가 null임을 알린다.

• API 설계: 함수가 반환하는 값이 명확하지 않거나 다양한 상황에 따라 달라질 수 있는 경우, 명시적으로 undefined나 null을 반환하여 API 사용자에게 함수의 동작 방식을 명확히 전달한다.

• 선택적 매개변수 처리: 함수의 매개변수 중 일부가 선택적이고, 해당 매개변수가 전달되지 않은 경우 함수의 동작을 정의해야 할 때, 함수 내에서 명시적으로 undefined를 반환하여 선택적 매개변수가 전달되지 않았음을 나타낸다.

이러한 경우에 명시적으로 undefined와 null을 반환하는 함수를 사용함으로써 코드의 가독성을 높이고, 함수의 동작을 명확하게 전달할 수 있다.