JS 새로운 문법 ? ??

자바스크립트에 추가된 새로운 문법을 업무하다가 알게 되었다.
뭔 놈의 물음표를 그렇게 매 데이터 뒤에 붙이는지 도대체 무엇인지 궁금했다.

예전에 프로젝트할 때, 데이터가 비어있을 때를 방지해서

if(data.length > 0) return

과 같은 코드를 작성한 적이 있다.
이때 data?.userName으로 작성해도 에러가 사라졌던 경험을 했다.

왜 사용할까?

주로 중첩된 객체자료에서 데이터를 뽑을 때 reference에러 없이 안전하게 뽑아올 수 있도록 하기 위해서 사용한다.

🛼 한 개의 ?

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

console.log(user.name) //kim
console.log(user?.name) //kim

보통 중첩된 객체가 아니라면 굳이 ?를 사용할 필요가 없다.

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

console.log(user.age.value)
//referene Error -> 에러 발생, 다음 함수 실행하지 않음

console.log(user.age?.value) //undefined 출력 후 다음 함수 실행

중첩된 객체에 접근할때 ?를 작성하면 undefined로 출력된다.

🛼 두 개의 ??

Nullish Coalescing Operator
null, undefined인 데이터를 걸러주는 것이다.

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

console.log(user.age?? "나이 가져오는 중")
//나이 가져오는 중

• ?? 왼쪽의 값이 null 또는 undefined일 경우

• ?? 오른쪽의 "나이 가져오는 중"을 출력하라

데이터가 나중에 도착하게 되면 화면에 undefined가 나타나기 보다는 "나이 가져오는 중"과 같은 텍스트를 보여주는 것이 사용자의 불편함을 줄일 수 있다.