||와 ??의 차이, 실전 예제와 함께 쉽게 배우기

 

 

3줄 요약

1. ||(OR 연산자)는 값이 falsy(0, '', false, null, undefined 등) 일 때 기본값을 반환합니다.
2. ??(Nullish 병합 연산자)는 값이 null 또는 undefined일 때만 기본값을 반환합니다.
3. 실무에서는 값의 유무에 따라 의도에 맞는 연산자를 선택해야 버그를 예방할 수 있습니다.

---

1. 문제 상황

프로그래밍을 하다 보면 사용자가 입력한 값을 받아서, 만약 값이 없을 때 기본값을 주고 싶을 때가 많습니다.

예를 들어, 사용자가 나이를 입력하지 않으면 기본값으로 20을 주고 싶다고 해볼게요.

---

2. 예제 코드

const user = {
  // age: 0
};

const ageWithOr = user.age || 20;
const ageWithNullish = user.age ?? 20;

console.log('|| 사용:', ageWithOr);
console.log('?? 사용:', ageWithNullish);

---

3. 각각의 결과와 해설

1) OR 연산자 (||) 사용 시

• user.age가 falsy 값(0, '', false, null, undefined 등)이면 오른쪽 값(20)을 반환합니다.

2) Nullish 병합 연산자 (??) 사용 시

• user.age가 null 또는 undefined일 때만 오른쪽 값(20)을 반환합니다.

---

예시 결과

case 1. age가 0일 때

const user = { age: 0 };

const ageWithOr = user.age || 20;      // 결과: 20
const ageWithNullish = user.age ?? 20; // 결과: 0

• ||는 0도 falsy라서 20을 반환합니다.
• ?? 는 0이 null/undefined가 아니기 때문에 0을 그대로 반환합니다.

case 2. age가 undefined일 때

const user = {};

const ageWithOr = user.age || 20;      // 결과: 20
const ageWithNullish = user.age ?? 20; // 결과: 20

• 둘 다 20 반환 (user.age가 undefined)

case 3. age가 빈문자열일 때

const user = { age: "" };

const ageWithOr = user.age || 20;      // 결과: 20
const ageWithNullish = user.age ?? 20; // 결과: ""

• ||는 빈문자열도 falsy이므로 20을 반환합니다.
• ?? 는 빈문자열은 null/undefined가 아니므로 빈문자열을 그대로 반환합니다.

---

4. 정리

• ||는 falsy(거짓) 값이면 기본값 반환 (0, '', false, null, undefined 등)
• ?? 는 null 또는 undefined일 때만 기본값 반환

---

5. 실전 팁

• 입력값이 정말 존재하지 않을 때만 기본값을 주고 싶으면?? 사용
• 입력값이 0, 빈문자열(''), false 등도 기본값으로 처리하고 싶으면 || 사용

---

마치며

실제 개발할 때 의도에 맞는 연산자를 선택하는 것이 중요합니다.

||와?? 의 차이만 제대로 이해해도, 의도치 않은 버그를 예방할 수 있습니다.

궁금한 점 있으면 언제든 댓글로 남겨주세요!
감사합니다 😊