함수 파라미터 기본값, 왜 undefined는 되고 null은 안 될까?

함수 파라미터에 기본값을 넣다 보면 이런 상황을 자주 만난다.

function foo(value = 10) {
  console.log(value);
}

foo();          // 10
foo(undefined); // 10
foo(null);      // null ❓

“null도 값이 없다는 뜻 아닌가?”

왜 undefined는 기본값으로 초기화되고, null은 그대로 들어오는 걸까?

 

결론부터 말하면

JavaScript에서 기본값은 undefined일 때만 적용된다

null은 “값이 없음”이 아니라
👉 “의도적으로 비어 있는 값을 준 것” 으로 취급된다.

 

기본값 문법은 언제 동작할까?

ES6 함수 기본값 문법은 내부적으로 이렇게 동작한다.

function foo(value) {
  if (value === undefined) {
    value = 10;
  }
}

즉,

• undefined → 값이 전달되지 않았다고 판단 → 기본값 적용
• null → 값이 전달되었다고 판단 → 기본값 무시

 

예제로 보면 더 명확하다

1️⃣ 인자를 아예 안 넘긴 경우

foo(); // value === undefined

➡️ 기본값 적용 ✅

 

2️⃣ 명시적으로 undefined를 넘긴 경우

foo(undefined);

➡️ 여전히 value === undefined
➡️ 기본값 적용 ✅

 

3️⃣ null을 넘긴 경우

foo(null);

➡️ value === null
➡️ 이미 값이 전달됨
➡️ 기본값 적용 ❌

 

이건 버그가 아니라 설계된 것 🧠

JavaScript에서:

• undefined
  → “값이 없거나, 전달되지 않음”
• null
  → “값은 있는데, 일부러 비워둠”

이 차이는 굉장히 중요하다.

sendUser({
  nickname: null, // 닉네임을 의도적으로 제거
});

sendUser({
  nickname: undefined, // 닉네임 필드 자체를 안 보냄
});

이 둘은 의미가 완전히 다르다.

 

실무에서 자주 터지는 패턴 ⚠️

옵션 객체 + 기본값

function createUser({ age = 20 } = {}) {
  console.log(age);
}

createUser();                 // 20
createUser({});               // 20
createUser({ age: undefined }); // 20
createUser({ age: null });      // null 😇

이 경우도 동일하다.

• undefined → 기본값
• null → 그대로 사용

 

“null도 기본값 처리하고 싶은데요?”

그럼 명시적으로 처리해야 한다.

방법 1️⃣ Nullish Coalescing (??)

function foo(value?: number | null) {
  const finalValue = value ?? 10;
  console.log(finalValue);
}

foo(null);      // 10
foo(undefined); // 10
foo(0);         // 0

👉 null과 undefined만 걸러냄
👉 실무에서 제일 추천

 

방법 2️⃣ OR 연산자 (||) — 주의

const finalValue = value || 10;

❌ 위험함

foo(0); // 10 ❌
foo(""); // 10 ❌

Falsy 값까지 다 날려버림

 

TypeScript 관점에서 보면

TS 타입으로도 이 의도가 드러난다.

function foo(value?: number) {}
// value: number | undefined

function bar(value: number | null) {}

• ? → 전달 안 될 수 있음 (undefined)
• null → 의도적으로 받을 수 있는 값

TypeScript는 이미
👉 undefined와 null을 다른 의미로 취급하고 있다.

 

사용법을 요약하자면...... ✍️

• 기본값 트리거: undefined
• 의미 있는 빈 값: null
• 옵션 파라미터 → undefined
• “비워짐” 상태 표현 → null
• 기본값 보강 → ?? 사용

 

정리 🧾

• 함수 파라미터 기본값은 undefined일 때만 적용된다
• null은 “값을 준 것”으로 간주된다
• 이건 JavaScript의 명확한 설계 의도다
• null까지 포함해 처리하려면 ??를 써야 한다