Front-end/JavaScript
Optional chaining(?), Nullish coalescing operator(??)
nauni
2020. 12. 28. 22:38
Optional chaining (?)
값이 존재하지 않을 때, 그 값을 호출하면 에러가 발생하면서 어플리케이션이 중단된다. null이나 undefined일 경우 그 값을 호출 하면 에러가 발생하는데 그 때 에러를 발생시키지 않고 undefined 값을 리턴해주는 역할을 한다.
const pet = {
age: 2,
dog: {
name: "lili",
},
};
const catName = pet.cat?.name;
console.log(catName); //undefined
위와 같은 예시에서 pet.dog.name을 호출하면 lili가 출력되나 존재하지 않는 값인 cat.name을 호출할 경우 에러를 발생한다. 이때 cat이 존재하는지 ?를 붙여서 확인할 수 있다. 존재하지 않기 때문에 undefined를 출력한다.
값을 출력하기 위해 테스트를 해서 존재하는지 여부를 미리 체크하지 않아도 optional chaining을 통해 값이 존재하지 않는 경우 예외처리를 해줄 수 있다. 여러번 쌓아서(pet.cat?.age?.name) 사용할 수도 있다.
Nullish coalescing operator (??)
falsy (거짓 같은 값)을 고려하지 않고 값이 없는 경우인 null과 undefined 인 경우에 오른쪽 값을 반환하고, 아닌 경우 왼쪽 값을 반환하는 연산자이다. 기본값을 할당해 주는 역할을 한다.
falsy (거짓 같은 값) : false, 0, -0, 0n, "", null, undefined, NAN은 거짓으로 평가된다.
const text = ''; //falsy에 해당하는 값을 지정
const orCheck = text || 'Hello';
console.log(orCheck); // Hello를 반환. false로 인식하기 때문
const nullishCheck = text ?? 'Hi';
console.log(nullishCheck); // ''를 반환. falsy 값이 아니라 빈 문자열 값으로 인식하기 때문
let text; //undefined
const orCheck = text || 'Hello';
console.log(orCheck); // Hello
const nullishCheck = text ?? 'Hi';
console.log(nullishCheck); // Hi