🐛 null 병합 연산자(??)와 옵셔널 체이닝(?.)

JavaScript의 falsy와 truthy

https://velog.io/@muchogusto/JavaScript%EC%9D%98-falsy

No.	Falsy 인것	Truthy인 것
1	undefined
2	null	배열, 빈 배열[], 객체, 빈 객체{}
3	숫자 0	0이 아닌 양수/음수 모두!
4	빈 문자열 ''	문자열
5	NaN
6	false	truth

??(null 병합 연산자)는 defined된 값을 출력합니다

• null 병합 연산자는 null 이거나 undefined인 경우는 출력하지 않아요
• 즉, defined 된 값을 출력합니다.
  

API call을 해서 candy의 개수를 받아온다고 가정하자

방법1. falsy/truthy를 이용하면

candy = ''
candy ? console.log(`a(${candy})는 참입니다.`) : console.log(`a(${candy})는 거짓입니다.`);

• 0인 값은 거짓으로 된다(falsy하다)
• 하지만 숫자 0도 데이터라구! 0을 출력하고 싶다구우우우!
• candy가 0개 인 경우도 나타내야한다구우우우!
  

방법2. null 병합 연산자를 사용하면

candy ?? waiting

• candy가 null도 아니고 undefined도 아니면 candy 출력
• 그 외의 경우는 waiting 출력
• candy가 출력되지 않는 조건에 "null, undefined" 경우가 있으니깐!
• candy가 0인 경우에도 출력된다아아아!
  

결론

candy가 0개인 것두 데이터라구!
0개인 candy를 나타내고 싶다면!
"방법2. null 병합 연산자"를 사용하세요!


api 콜을 해서 값을 받아오고 받아온 값을 체크할 때
받아온 값이 null 또는 undefined인지를 체크하고,
!null && !undefined일때 렌더링하는 경우가 있음!
이때는 JavaScript의 falsy를 이용하느 것보다는!
null 병합연산자 ??를 쓰는 것이 더 좋아 보인당😉

주의

비교적 신규 문법이라 구식 브라우저에서는 폴리필이 필요

옵셔널 체이닝 '?.'

• ?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환
  
  

Reference

• https://ko.javascript.info/nullish-coalescing-operator
• https://ko.javascript.info/optional-chaining