옵셔널 체이닝 (Optional Chaining)

Optional Chaining은 JavaScript에서 객체 속성에 안전하게 액세스하기 위한 문법입니다. 이를 사용하면 객체나 배열이 null이거나 정의되지 않은 경우 오류를 발생시키는 대신 자동으로 undefed를 반환합니다. 이렇게 하면 코드가 더욱 간결해지고 안전해집니다.

사용법

옵셔널 체이닝은 ' ?. ' 연산자를 사용하여 구현됩니다. 다음은 사용 예제

let user = {
    address: {
        street: 'Main Street'
    }
};

// 옵셔널 체이닝을 사용하지 않는 경우
let street = user && user.address && user.address.street;
console.log(street); // 'Main Street'

// 옵셔널 체이닝을 사용하는 경우
let streetOptional = user?.address?.street;
console.log(streetOptional); // 'Main Street'

배열 요소 접근

let users = [
    { name: 'John' },
    { name: 'Jane' }
];

// 옵셔널 체이닝을 사용하지 않는 경우
let userName = users && users[1] && users[1].name;
console.log(userName); // 'Jane'

// 옵셔널 체이닝을 사용하는 경우
let userNameOptional = users?.[1]?.name;
console.log(userNameOptional); // 'Jane'

함수 호출

let user = {
    greet: function() {
        return 'Hello!';
    }
};

// 옵셔널 체이닝을 사용하지 않는 경우
let greeting = user && user.greet && user.greet();
console.log(greeting); // 'Hello!'

// 옵셔널 체이닝을 사용하는 경우
let greetingOptional = user?.greet?.();
console.log(greetingOptional); // 'Hello!'

장점

1.안전성: null 또는 정의되지 않은 값이 존재하는 경우에는 오류가 발생하지 않습니다.

2.가독성: 코드가 더욱 간결해지고 명확해집니다.

3.유연성: 깊은 개체 구조를 탐색할 때 유용합니다.

선택적 연결을 사용하면 코드가 더 안전하고 읽기 쉬워지며 개체 속성에 액세스할 때 발생할 수 있는 예외를 더 쉽게 처리할 수 있습니다. ES2020(ES11)에 도입된 이 구문은 최신 JavaScript 개발에 널리 사용됩니다.