유효하지 않을 수 있는 참조에 의한 문제들
🌐 네트워크 요청 등, 어떤 값이 들어올지 모르는 상황에서
⚠️ 에러가 발생하는 상황들
// undefined로부터 값에 접근할 때
let undefObj;
console.log(undefObj.x);
// null부터 값에 접근할 때
let nullObj = null;
console.log(nullObj.x);
// 무효한 배열에 접근할 때
let undefArry;
console.log(undefArry[1]);
// 존재하지 않는 함수를 호출할 때
let noFunc = {}
noFunc.func();
다음과 같은 상황에서 에러를 피하려면?
- 결과에
prop3이 있다면 가져와야 하는 상황
// 최소 undefined
// 최대 {prop1:{prop2:{prop3:'성공!'}}}
// 까지 반환하는 함수
const rand = () => Math.random() < 0.75;
const notSure = () => rand() ? {
prop1: rand() ? {
prop2: rand() ? {
prop3: rand() ? '성공!' : undefined
} : undefined
} : undefined
} : undefined;
console.log(JSON.stringify(notSure()));
const result = notSure();
console.log(JSON.stringify(result));
// ⚠️ 바로 접근하려 할 시에는 실패시 에러
console.log(result.prop1.prop2.prop3);
// 방법 1
const result = notSure();
if (result) {
if (result.prop1) {
if (result.prop1.prop2) {
console.log(result.prop1.prop2.prop3);
}
}
}
// 방법 2
const result = notSure();
console.log(
result
&& result.prop1
&& result.prop1.prop2
&& result.prop1.prop2.prop3
);
// 방법 3
const result = notSure();
try {
console.log(result.prop1.prop2.prop3);
} catch {
console.log(undefined);
}
?. - 옵셔널 체이닝 optional chaining 연산자
- 호출 대상이
undefined나null이어도 오류를 발생시키지 않음 - 대신 undefined 반환 - 있을지 없을지 모르는 것으로부터 값을 읽거나 실행할 때 사용
- 👉 MDN 문서 보기
let undef = undefined;
console.log(
undef?.x,
undef?.['x'],
undef?.[1],
{}.func?.()
);
// 옵셔널 체이닝을 사용한 방법
const result = notSure();
console.log(
result?.prop1?.prop2?.prop3
);
💡 유무가 불확실한 함수를 호출할 때도 유용
const objs = [
{ func () { console.log(1) } },
{},
{ func () { console.log(2) } },
{},
{ func () { console.log(3) } },
]
objs.forEach(o => o.func?.());