🤩 JS(ES11) Optional chaining & Nullish Coalescing Operator

📝 궁금한 모든 것을 기록합니다.
😎 기록에서 멈추지 않고 나의 것으로 만듭니다.
🙈 잘못된 정보가 있다면 언제든지 댓글에 남겨주세요 :D

😍 Optional chaining

const avengers1 = {
  title: 'Tony Stark',
  pet:{
    cat: {
      name: 'Jarvis'
    }
  }
}; 

const avengers2 = {
  title: 'Captain America',
}; 


function printCat(person){
  console.log(person.pet.cat.name);
};

printCat(avengers1); // ??
printCat(avengers2); // ??

위와 같이 작성한다면 어떤 일이 일어날까?

두번째 함수 호출때에 에러가 발생하게 된다. 여기 문제를 해결하기 위해선 조건문을 사용할 수도 있고, 삼항연산자를 사용할 수도 있고, 또는 && 연산자를 사용해서 해결할 수도 있다. 그러나 이와 같이 해결하게 되면 가독성도 않좋고, 코드가 불필요하게 반복되는 것을 확인할 수 있다.

function printCat(person){
  console.log(person.pet && person.pet.cat && person.pet.cat.name);
};
printCat(avengers2); // undefined

그러나 이제 ES11의 새로운 기능인 Optional chaining를 활용하면 이렇게 직관적이고 짧은 코드로 문제를 해결할 수 있다. 🤩

function printCat(person){
  console.log(person.pet?.cat?.name);
};

😎 Nullish Coalescing Operator

OR(||)연산자를 보게되면 false, '', 0, null, undefined 등은 false로 간주되어진다.

// OR 연산자를 아래와 같이 사용하면 앞에 있는 값이 false인 경우 뒤의 값이 출력된다. 
const name = 'Hulk';
const userName = name || 'Guest';
console.log(userName); // Hulk 가 나온다. 

// 만일 null과 같은 falsy한 값이 할당되면, name의 값이 false이므로 'Guest'가 출력된다.
const name = null;
const userName = name || 'Guest';
console.log(userName); // Guest 가 나온다.

여기서 OR 연산자를 잘 이해하지 못하고 사용하면 다양한 문제가 발생할 수 있는데,

// 만일 사용자가 자신의 이름을 빈공백으로 등록하고 싶다면?
const name = '';
const userName = name || 'Guest';
console.log(userName); // Guest 가 나온다. 

// 만일 숫자 0을 등록하고 싶다면?
const num = 0;
const crimeRecord = num || 'Undefined';
console.log(crimeRecord); // Undefined 가 나온다.

이러한 문제를 예방하고 조금더 명확한 코드를 작성하고 싶다면 Nullish Coalescing Operator를 사용하면 된다. 😍

// 만일 사용자가 자신의 이름을 빈공백으로 등록하고 싶다면?
const name = '';
const userName = name ?? 'Guest';
// name이란 변수에 값이 있다면 name을 사용하고, 없다면 'Guest'를 사용하자
console.log(userName); // '' 가 나온다. 

// 만일 숫자 0을 등록하고 싶다면?
const num = 0;
const crimeRecord = num ?? 'Undefined'; 
// num이란 변수가 값이 있다면 num을 사용하고, 없다면 'Undefined'를 사용하자
console.log(crimeRecord); // 0이 나온다.