본문 바로가기
( ´・・)/개발

[JavaScript] Nullish 병합 (Nullish Coalescing), 삼항 (Ternary) 연산자

by shinsangah 2023. 5. 1.

Nullish 병합 (Nullish Coalescing) '??'

// Nullish 병합 (Nullish Coalescing) '??'

● OR 연산자를 사용한 경우

const n = 0;
const num1 = n || 7;
console.log(num1); // 7

→ 여기서 만약에 숫자 0이 단순하게 참과 거짓을 구분하는 용도가 아니고,
유효하게 숫자 데이터로도 사용이 되어야 한다라고 생각을 해보면
사실상 의도한 것은 num1 이 숫자 0으로 출력이 되는 것이다.
그런데 현실적으로는 숫자 7이 출력이 된다. 이런 경우에 사용되는 연산자가 'Nullish 병합 (??)' 이다.
● Nullish 병합 연산자를 사용한 경우

const n = 0;
const num2 = n ?? 7;
console.log(num2); // 0

→ 해석하는 것 자체는 왼쪽에서 오른쪽으로 가는게 동일한데,
거짓이랑은 전혀 상관없이 null, undefined 데이터는 건너뛰고,
그 외에 모든 나머지 데이터를 만나면 반환하게 된다.

거짓 (Falsy) 데이터들이 몇가지 더 있는데 거기서 범위를 더 축소해서
null, undefined만 넘어가고, 그 외 나머지 모든 데이터를 만나자마자 반환한다.

console.log(null ?? 1); // 1
console.log(undefined ?? 2); // 2
console.log(null ?? undefined); // undefined
console.log(null ?? 1 ?? 2); // 1
console.log(false ?? 1 ?? 2); // false
console.log(0 ?? 1 ?? 2); // 0


삼항 (Ternary)

조건 ? 참 : 거짓

// 삼항 (Ternary)

const a = 1;

if (a < 2) {
  console.log("참!");
} else {
  console.log("거짓..");
}

// 참!
● 삼항 연산자 (조건 ? 참 : 거짓)

console.log(a < 2 ? "참!" : "거짓.."); // 참!

// getAlert 이라는 함수를 만들건데, message 라는 매개변수를 통해서 받을 것임
function getAlert(message) {
  return message ? message : "메시지가 존재하지 않습니다!";
}

console.log(getAlert("안녕하세요~")); // 안녕하세요~
console.log(getAlert("")); // 메시지가 존재하지 않습니다!
문자 데이터가 들어가 있긴 하지만, 내용이 비워져 있다. 빈 문자는 대표적인 '거짓' 이기 때문에.

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

function getAlert(message) {
  return
  message ?
  message : "메시지가 존재하지 않습니다!";
}

혹시라도 삼항 연산자가 옆으로 너무 길어지게 된다면 줄바꿈 처리해서 작성하면 된다.
물론 약간의 코드 작성 취향 차이가 있을 수 있겠지만
어떤 조건이 먼저 나오고, 그 다음줄에서 조건이 참인 경우, 그 다음줄에서 조건이 거짓인 경우
시각적으로 한 번에 비교 가능하기 때문에 나쁘지 않은 방법. 편한 방법으로 사용 가능.