JS (Java Script)

? 연산자. optional chaining 연산자 / ??연산자 nullish coalescing 연산자

GABOJOK 2023. 9. 14. 13:02

optional chaining 연산자.

중첩된 오브젝트 자료에서 뭔가 가져올 때에 에러를 감춰주고 안전하게 가져오기 좋다. 

(에러가 생기면 중간에 멈추는걸 방지한다는 말이다. )

그래서 중첩되지 않은 일반 오브젝트에  optional chaining 연산자를 사용하는건 의미가 없다. 

 

아래 예시를 봐보자. 

let coffe = {
    jeny : 'latte',
    suger : 'vanilla latte',
    //jhop : {menu : "americano" ,  shots : 1}
}

//보통 이렇게데이터를 가져온다. 
console.log(coffe.jeny);

//신 문법이 나옴으로 optional chaining 연산자 가능해짐.
console.log(coffe?.jeny)

이렇게 

obj ?. 가져오려는 정보 를 해주면 된다. 

 

 

특징

만약  optional chaining 연산자를 이용해 데이터를 가져올 때에,

해당 정보가  undefined 이거나, null 일 경우에는 값을 가져오지 않는다.

그리고 undefined 출력됨.

 

 

 

??   nullish coalescing 연산자

비슷하게 생겻지만 다르다. 

 

?? 이 연산자의 왼쪽에 있는게 null 이나 undefined 일 경우 , 오른쪽에 있는것이 출력된다. 

let us;
console.log(us ?? '로딩중')  //로딩중 
console.log(us ?? '대신보여줄문자')  //대신보여줄문자

 

이 연산자를 어디에 사용할 수 있을까?

 

만약 데이터를 불러올 때에 시간이 오래걸려서 바로 데이터가 나오지 않을 경우 에러가 발생할 수 있다. 

그럴때 에러메세지 대신 이걸 띄워줘~~ 이게 undefined이거나 null이면 이 메세지 띄워줘~

이런식으로 사용할 수 있다