[js] 옵셔널 체이닝 (.?)

특정 속성에 접근할 때, 해당 속성이 null또는 undefined오류를 방지

 

🚀 즉, ?.당신을 사용하면 존재하는지 확인하는 if방법 없이 안전하게 속성에 접근할 수 있습니다!

const obj = {
    user: {
        name: "Alice",
        age: 25
    }
};

// 일반적으로 속성 접근
console.log(obj.user.name);  // 출력: "Alice"

// 존재하지 않는 속성에 접근 (오류 발생)
// console.log(obj.user.address.street);  
// ❌ TypeError: Cannot read properties of undefined (reading 'street')

// ✅ 옵셔널 체이닝 사용
console.log(obj.user.address?.street);  // 출력: undefined (오류 발생 X)

 

const obj = {
    greet: () => "Hello!"
};

// 존재하는 함수 호출
console.log(obj.greet?.());  // 출력: "Hello!"

// 없는 함수 호출 (오류 발생 X)
console.log(obj.sayGoodbye?.());  // 출력: undefined

 

 

호출에서 ( ?.())

const obj = {
    greet: () => "Hello!"
};

// 존재하는 함수 호출
console.log(obj.greet?.());  // 출력: "Hello!"

// 없는 함수 호출 (오류 발생 X)
console.log(obj.sayGoodbye?.());  // 출력: undefined

 

배열에서 사용 ( ?.[])

const arr = ["apple", "banana"];

// 존재하는 인덱스
console.log(arr[0]);  // 출력: "apple"

// 존재하지 않는 인덱스 (오류 발생 X)
console.log(arr[5]?.toUpperCase());  // 출력: undefined