[JavaScript] 옵셔널 체이닝 연산자 ?. 정리

최근 리액트를 사용하면서 ES5 이상 JavaScript 문법을 사용하고 있는데 그중에서 옵셔널 체이닝 연산자에 대해 정리해보려고 한다.

 

옵셔널 체이닝(?.)은 ES11(ECMAScript 2020)에서 도입된 연산자로 중첩된 객체의 속성에 접근할 때 에러 없이 안전하게 접근할 수 있게 해 준다. null이나 undefined가 있을 경우 에러를 발생시키지 않고 대신 undefined를 반환시킨다.

let user = {};
console.log(user.info.tel); // Uncaught TypeError: Cannot read properties of undefined (reading 'tel')
console.log(user && user.info && user.info.tel); // undefined
console.log(user?.info?.tel); // undefined

 

옵셔널 체이닝 연산자가 도입되기 전에는 논리 연산자인 &&를 사용하여 변수가 null 또는 undefined인지를 확인한다. 논리 연산자 &&는 옵셔널 체이닝 ?.은 비슷해 보이지만 동작 방식이 다르다.

 

논리 연산자 &&

왼쪽 값이 falsy 값(예: false, undefined, null, 0, ' ', NaN)이면 그 값을 그대로 반환하고 오른쪽 값을 실행하지 않는다. 다음 예시 코드와 같이 왼쪽 값이 falsy 값인 경우 "자바스크립트"라는 문자열 값을 무시하고 왼쪽 값을 반환한다.

console.log(false && "자바스크립트");      // false
console.log(undefined && "자바스크립트");  // undefined
console.log(null && "자바스크립트");       // null
console.log(0 && "자바스크립트");          // 0
console.log('' && "자바스크립트");         //

옵셔널 체이닝 ?.

?.의 왼쪽 값이 null이나 undefined일 때 오류 없이 undefined를 반환한다.

let user = {};
console.log(user?.info); // undefined
console.log(user?.info?.tel); // undefined


let userObj1 = { 
    info : {}
};
console.log(userObj1?.info?.tel); // undefined
console.log(userObj1?.info?.tel || '값이 없습니다.'); // 값이 없습니다.

let userObj2 = { 
    info : {
        tel : '02-123-1234'
    }
};
console.log(userObj2?.info?.tel); // 02-123-1234
console.log(userObj2?.info?.tel || '값이 없습니다.'); // 02-123-1234

let obj = { value: 0 };
console.log(obj.value?.toString());  // 0

let obj = { value: '' };
console.log(obj.value?.length);      // 0

let obj = { value: false };
console.log(obj.value?.toString());  // false

let obj = null;
console.log(obj?.value);             // undefined

let obj = undefined;
console.log(obj?.value);             // undefined

 

 

즉, &&는 왼쪽 값이 false, null, undefined, 0, NaN, ' '처럼 falsy 값일 때 오른쪽 값을 실행하지 않고 왼쪽 값을 반환한다. 그러나 옵셔널 체이닝 연산자 ?.은 왼쪽 값이 null이나 undefined일 때만 실행을 멈추고 그 외의 값(false, 0, ' ')에서는 오른쪽 값을 반환한다.

const val1 = { email: '' };
const val2 = { email: null };
const val3 = { email: 'user@gmail.com' };
const val4 = { email: 0 };
const val5 = { email: undefined };

// && 연산자
console.log(val1.email && val1.email.toUpperCase());  // ''
console.log(val2.email && val2.email.toUpperCase());  // null
console.log(val3.email && val3.email.toUpperCase());  // USER@GMAIL.COM
console.log(val4.email && val4.email.toUpperCase());  // 0
console.log(val5.email && val5.email.toUpperCase());  // undefined 

// 옵셔널 체이닝
console.log(val1.email?.toUpperCase());  // ''
console.log(val2.email?.toUpperCase());  // undefined
console.log(val3.email?.toUpperCase());  // USER@GMAIL.COM
console.log(typeof val4.email === 'string' ? val4.email?.toUpperCase() : "값이 0이므로 toUpperCase()를 호출할 수 없습니다.");  // 값이 0이므로 toUpperCase()를 호출할 수 없습니다.
console.log(val5.email?.toUpperCase());  // undefined

 

 

---

출처 : https://ko.javascript.info/optional-chaining

모던 자바스크립트 Deep Dive