자바스크립트 신문법 정리(optional chaining, nullish coalescing 연산자)

코딩애플 영상 참고

다음 영상을 참고하여 정리한 글입니다.

 

 

optional chaining 연산자

?. 

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

console.log(user.age) // 20
console.log(user?.age) // 20

 

user.age와 user?.age의 차이

• user가 null이거나 undefined이면 user.age가 에러를 뱉는다.
• user가 null이거나 undefined여도 user?.age는 undefined를 남긴다.

 

 

when to use?

• 중첩된 object자료에서 자료를 뽑을 때 reference error 없이 안전하게 뽑을 수 있음

var user = {
    name: 'kim'
};

console.log(user.age) // undefined

console.log(user.age.value) // Error발생!
// 왜냐하면 user.age가 undefined이니
// undefined.value => 에러 발생
// null.value => 에러 발생

console.log(user.age?.value) // undefined

optional chaing 연산자는 에러를 해결하는 것이 아니라 감추는 문법이니 꼭 필요한 곳에만 쓰도록 하자

---

 

 

 

nullish coalescing 연산자

??

이놈 삼항연산자랑 어째 비슷하다.
사용법은 역시 간단

 

 

console.log(undefined ?? '이거')  // 이거

 

 

보통 리액트나 뷰에서 활용하면 좋다. 대충 이런 방식으로.

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

 

 

 

 

 

var obj = {
    data: {
        name: {
            id: 123,
            date:456,
        },
    },
}

console.log(obj.data?.name?.id??'뭐요'); // 뭐요

 

 

 

|| 와 ?? 의 차이

||

• 0, false, undefined같은 boolean으로 false인 값을 전부 검사한다.

??

• undefined, null같은 nullish만 검사하는 연산자

const a = false || 'how'
console.log(a)   // 'how'

const b = false ?? '사람이름이'
console.log(b)  // false

const c = undefined ?? null ?? '엄'
console.log(c)  // '엄'