[JS] nullish 병합 연산자 `??`

nullish 병합 연산자 `??`

??

 

: 값이 있는 첫 번째 변수를 찾는다.

• 왼쪽(첫 번째) 피연산자가 null 또는 undefined일 때 오른쪽(두 번째) 피연산자를 반환
• null과 undefined만 고려

 

a ?? b

• a 값이 있으면⭕(null / undefined가 아니면) 👉 a 값 할당
• a 값이 없으면❌(null / undefined면) 👉 b 값 할당

let firstName = null;
let lastName = null;
let nickName = "바이올렛";

alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); 
// nickName 출력("바이올렛")

 

 

* 조건부 삼항 연산자

const a = null;
const b = 'Hello';

const result1 = a ?? b; // 'Hello'
const result2 = a !== null && a !== undefined ? a : b; // 'Hello'

console.log(result1); // 'Hello'
console.log(result2); // 'Hello'

 

 

 

* 변수에 기본값을 할당하고 싶을 때 

let myText = "";

let notFalsyText = myText || "Hello world";
console.log(notFalsyText); 
// Hello world

let preservingFalsy = myText ?? "Hi neighborhood";
console.log(preservingFalsy); 
// '' 
// (preservingFalsy에 myText가 할당됨 => null/undefined가 아님)

==========

function greet(name) {
  const displayName = name ?? 'Guest';
  console.log(`Hello, ${displayName}!`);
}

greet(null); // Hello, Guest!
greet(undefined); // Hello, Guest!
greet('Nadia'); // Hello, Nadia!

 

 

---

✨ Nullish 병합 연산자 `??`   vs   논리 OR 연산자 `||`

• Nullish 병합 연산자 `??`
  : 첫 번째 정의된 값을 반환
  
  
• 논리 OR 연산자 `||`
  : 첫 번째 truthy 값을 반환
  
  • 정의된 값 ❌ 👉 컴퓨터가 판단

const WIDTH = '10px';
const isActive = false;

console.log(0 ?? WIDTH); // 0
console.log(0 || WIDTH); // 10px

------------------------------------------------------

let height = 0;

alert(height ?? 100); // 0 (정의된 값이 있음)
alert(height || 100); // 100 (0(height)은 false기 때문)

 

 

---

 

nullish 병합 연산자 '??'

 

Nullish coalescing operator - JavaScript | MDN