Javascript : null 병합 연산자, 조건부 연산자, 옵셔널 체이닝

1. null 병합 연산자

 

왼편의 값이 null이나 undefined이면 오른편 값이 리턴되고,

왼편의 값이 null이나 undefined이 아니면, 왼편 값이 리턴된다.

const example1 = null ?? 'I'; // I
const example2 = undefined ?? 'love'; // love
const example3 = 'you' ?? 'JavaScript'; // you

console.log(example1, example2, example3); // I love you

 

OR 연산자(||)와 헷갈릴 수도 있지만, 

OR 연산자는 왼편의 값이 falsy한지 확인한다는 점에서 다르다.

 

 

 

2. 조건부 연산자

삼항 연산자라고도 불리며, 

자바스크립트에서 유일하게 세 개의 피연산자를 가진다.

 

조건 ? truthy 할 때 표현식 : falsy 할 때 표현식

 

const cutOff = 80;

const passChecker = (score) => score > cutOff ? '합격입니다!' : '불합격입니다!';

console.log(passChecker(75));

 

if 문보다는 간결하지만, 내부에 함수나 변수를 선언하거나

반복문 같은 표현식이 아닌 문장은 작성할 수 없다는 한계가 있다.

 

(표현식이란? 결과적으로 하나의 값이 되는 코드를 가르킨다.)

 

3. 옵셔널 체이닝

function printCatName(user) {
  console.log(user.cat.name);
}

const user1 = {
  name: 'Captain',
  cat: {
    name: 'Crew',
    breed: 'British Shorthair',
  }
}

printCatName(user1); // Crew

 

const user2 = {
  name: 'Young',
}

console.log(user2.cat); // undefined
printCatName(user2); // TypeError: Cannot read property 'name' of undefined

이렇게 중첩된 객체의 프로퍼티에 접근하고자 할때

 

user1과 다르게

user2.cat.name에 접근할 때

user2는 cat 프로퍼티를 가지고 있지 않기에 undefined를 리턴받고

거기서 name에 접근하고자 하면 에러가 발생한다.

 

따라서 user.cat.name에 접근하기 전에  

 user.cat이 null이나 undefined가 아님을 검증하기 위해

옵셔널 체이닝을 사용한다.

 

function printCatName(user) {
  console.log(user.cat?.name);
}

위 코드에서 볼 수 있는 것처럼

물음표와 마침표를 붙여 사용하는 부분이 바로 옵셔널 체이닝 연산자(?.)이다.

 

만약 옵셔널 체이닝 연산자 왼편의 프로퍼티 값이

1) undefined 또는 null이 아니라면 그다음 프로퍼티 값을 리턴하고

2) 그렇지 않은 경우에는 undefined를 반환하는 문법입니다.

 

옵셔널 체이닝 연산자의 동작 원리를 삼항 연산자를 통해 구체적으로 표현하면 다음과 같이 작성할 수 있다.

function printCatName(user) {
  console.log((user.cat === null || user.cat === undefined) ? undefined : user.cat.name);
}

 

 

null 병합 연산자와 함께 활용하면 다음과 같이 응용할 수도 있다.

function printCatName(user) {
  console.log(user.cat?.name ?? '함께 지내는 고양이가 없습니다.');
}

const user2 = {
  name: 'Young',
}

printCatName(user2); // 함께 지내는 고양이가 없습니다.