# ?. / ?? 연산자

Doozuu·2022년 12월 6일
0

Javascript

목록 보기
38/99

여러 문자, 숫자를 한 변수에 저장하고 싶을 때는 object를 사용한다.

var user = {
	name : "kim",
    age : 20
}
user.name;
user.?name;

?.(optional chaining operator)

: 오브젝트에서 변수를 꺼낼 때 사용하는 신문법
왼쪽이 null 이나 undefined면 undefined 남겨줌.


⭐️ 중첩된 object 자료에서 에러없이 안전하게 데이터를 꺼낼 때 사용한다.

예시

var user = {
	name :"kim",
    age : { value : 20 }
}
console.log(user.age.valuee) // 잘못 써서 에러남

실제 사이트에서 에러가 나면 에러가 난 부분 하단에 있는 코드들이 실행이 되지 않아서 사이트가 이상하게 동작할 수 있다.

이걸 방지하기 위해 .?를 써주면 에러 대신 undefined를 출력하여 사이트의 동작을 방해하지 않을 수 있다.


중첩된 object가 아닐 때는 쓸 필요가 없다.

-> 원래 object는 데이터를 뽑을 때 자료가 없으면 자동으로 undefined가 남는데, 중첩된 경우에는 실수를 할 수도 있으므로 사용해주는게 좋다.



?? (nullish coalescing operator)

?? 왼쪽이 null,undefined 일 경우 오른쪽 보여주도록 함.

ajax 요청 등으로 인해 데이터가 늦게 도착하는 경우 변수가 비어있으므로 유저가 undefined를 봐야한다. 그걸 대체할 문구를 정해주고 싶을 때 사용하면 된다.

예시

var user;

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

💡 React,Vue 등에서 데이터가 자주 늦게 도착하므로 이때 쓰면 유용한 문법이다.

profile
모든게 새롭고 재밌는 프론트엔드 새싹

0개의 댓글