[JS] 옵셔널 체이닝: "?."

웹을 만들다 보면, 특히 데이터를 다룰때 흔히 볼 수 있는 " TypeError: "로 시작하는 에러가 있다.

이 에러는 많은 경우에서 어떤 데이터를 가져올 때 그 값이 ' undefined '이거나 ' null '인 경우에 발생한다.

 

물론 데이터가 없으면 표현되어서는 안되는 것도 있지만, 종종 데이터가 존재하지 않으면 존재하지 않는 대로 랜더링은 지속해야하는 경우가 있다.

그럴때 사용하는 문법이 옵셔널 체이닝, ' ?. ' 이다.

 

const users = [{ name: "홍길동", age: 20 }, { name: "김철수", age: 26 }];

const userPh = users[0].ph;		//TypeError: Cannot read property 'ph' of undefined
const userEmail = users[1]?.email; 	//undefined
const userName = users[0]?.name;	//홍길동
const userNone = users?.[2]; 		//undefined

이런 식으로 객체, 배열, 함수에 접근할 때 ?. 연산자를 이용하여 에러없이 안전하게 접근이 가능하다.

 

물론, false, ""(공백) 등에 대해서는 처리하지 않고 정상적으로 반환한다.