[ES6] 15. optional chaining / nullish coalescing operator

? . 문법 ( optional chaining)

?. 왼쪽에 있는게 null 혹은 undefined 인 경우 undefined 남긴다

var user = {
    name : 'kim',
    age : 20
}

console.log(user.name);
console.log(user?.name);

user 가 존재하면 .value 출력, 없으면 undefined 출력

📢 사용하는 곳

"중첩된 object 자료에서 에러없이 안전하게 데이터를 꺼낼 때" 사용

var user = {
    name : 'kim',
    age : { value : 20 }
}

console.log(user.age.value);

이렇게 마침표가 두개 이상인데 undefined나 null이면 에러가 나고 그 즉시 코드 실행이 중단된다
그래서 이런건 방지하고자 확인하는 작업을 하는 것이다

console.log(user.age?.value);

중첩되지 않은 경우 ? 를 사용하는 것은 의미가 없다
왜냐하면 object에서 데이터뽑을 때 해당하는 자료가 없으면 자동으로 undefined가 남기 때문이다

근데 중첩된 object는 마침표를 2번 이상 찍기 때문에 ? 를 사용하는게 의미있는 작업이 된다

?? 문법 ( nullish coalescing operator )

?? 왼쪽이 null, undefined 일 경우 오른쪽을 대신 보여달라는 문법

var user;

console.log(user ?? '로딩중')

📢 사용하는 곳

예를 들어 var user 라는 변수를 유저에게 보여줘야하는데 ajax 요청 등 때문에 늦게 도착하면?
유저는 undefined를 볼 수도 있을 것이다
그래서 그런 경우를 방지하고자 ?? 문법을 사용한다

특히 데이터가 늦게 도착하는 경우가 많은 React에서 유용한 문법이다