[Javascript] New Javascript 7장 Null 병합 연산자

728x90

📚 1. Null 병합 연산자란?

자바스크립트에서 ??는 Null 병합 연산자라고 불리는데, 이 연산자는 값이 null 또는 undefined 일 때만 오른쪽 값을 반환하고, 그렇지 않으면 왼쪽 값을 반환합니다, 즉 값이 없을때만 대체값을 쓰는 목적을 가진 연산자입니다.

📚 2. 기본 문법

let 결과 = 값1 ?? 값2;

값1이 null 또는 undefined -> 값2를 반환
그 와(0, 빈문자열 "", false 값을 falsy 값을 포함) -> 값1반환

📚 3. 예제 코드

🦖 1.기본 동작

let name = null;
let defaultName = "Guest";

let user = name ?? defaultName;
console.log(user);

👉 name이 null이라 ??연산자 오른쪽 값인 Guest가 선택됨

🦖 2. undefined일 때

let age;
let defaultAge = 25;

let finalAge = age ?? defaultAge;

console.log(finalAge);

👉 나이가 undefined이므로 오른쪽 값 20이 반환됨

🦖 3. falsy 값과 차이

let score = 0;

let total1 = score || 100; // or 연산자
let total2 = score ?? 100; // Null 병합 연산자

console.log(total1); // 100
console.log(total2); // 0

👉 ||는 falsy 값(0, **, false)끼지 없음으로 취급해 오른쪽 값을 반환

👉 ??는 오직 null과 undefined만 없음으로 보고 나머지는 그대로 인정

📚 4. 실무 활용 예시

🦖 1. 사용자 입력 기본값 처리

function greet(name) {
  let finalName = name ?? "Guest";
  console.log(`Hello, ${finalName}!`);
}

greet("Monster"); // Hello, Monster!
greet(null); // Hello, Guest

🦖 2. API 데이터 처리

let user = {
  id: 1,
  nickname: "null",
};

let name = user.nickname ?? "비로그인";
console.log(name);

👉 서버에서null이 넘어오면 기본 닉네임을 지정하는 데 활용.

🦖 3. 옵셔널 체이님(?.)와 함께 쓰기

let User = {
  Profile: {
    name: "주현",
  },
};

let city = User.Profile?.city ?? "정보 없음";
console.log(city); // 정보 없음

👉 ?.눈 존재 여부를 확인하고, ??는 값이 없을 때 대체 값을 제공하는 조합

📚 5. 주의할 점

우선 순위
- ??는 ||보다 낮고 =보다 높음.
- 혼동을 막기 위해 괄호를 사용하는 것이 안전
ES2020 이상에서만 사용 가능
- 옛날 브라우저에서는 지원하지 않을 수 있어 Babel 같은 트랜스파일러가 필요함

📚 6#. 결론

??연산자는 값이 없을 때(null, undefined)만 대체값을 지정하는 연산자
||와 달리 0, 빈 문자열, false 같은 값은 있다라고 인정해줌
사용자 입력, 서버 데이터 처리, 옵션값 기본 세팅 등에 유용하게 사용
?.와 함께 사용하면 가독성과 안전성을 크게 높일 수 있음

GitHub - javascript-only/newJSRoom: https://thinky.tistory.com/category/Front-End/JavaScript

https://thinky.tistory.com/category/Front-End/JavaScript - javascript-only/newJSRoom

github.com