[JS] 옵셔널 체이닝(Optional chaining) 연산자 - 객체에 안전하게 접근하기

✅  옵셔널 체이닝 연산자 (?.) 에 대해 정리해보자!

 

1. 형식

객체 ?. 키

 

2. 의미

 왼쪽 객체가 null, undefined가 아닌 경우에만, 객체.키 값을 참조한다.(왼쪽 객체가 null, undefined이면 undefiend를 반환한다)

 

3. 활용

객체의 프로퍼티를 참조할 때, null 체크를 편하게 할 수 있다.(여러번 중첩 사용 가능)

 

4. 예시코드

const obj_1 = null;

console.log(obj_1.name); // error 발생
console.log(obj_1?.name); // undefined


const obj_2 = {
    name: 'juda',
    family : {
        father: '아빠',
        mother: '엄마'
    }
}

console.log(obj_2?.name); // 'juda'
console.log(obj_2?.family?.mother); // '엄마'

console.log(obj_2?.friends?.first); // 'undefined'
console.log(obj_2.friends.first); // error 발생

 

 

- 주의사항: 왼쪽 객체가 false로 평가되더라도, null이나 undefined가 아니면 객체.키값을 참조한다.

const str = "";
console.log(str?.length); // 0

 

 

옵셔널 체이닝 연산자를 통해 안전하고 효율적으로 값을 검사/참조/할당할 수 있다.