Optional Chaining (?.) 문법

Optional Chaining (?.)

Optional Chaining은 JavaScript에서 null이나 undefined 값에 접근할 때 발생할 수 있는 에러를 방지하기 위해 도입된 문법입니다. 이 문법을 사용하면, 객체의 중첩된 속성에 접근할 때 해당 속성이 존재하지 않으면 undefined 를 반환하여 에러를 방지할 수 있습니다.

Optional Chaining (?.)은 객체의 속성에 안전하게 접근할 수 있도록 도와줍니다. 만약 중간에 null 이나 undefined가 있다면, 해당 체인의 평가를 중단하고 undefined를 반환합니다. 이를 통해 코드가 중단되는 문제를 방지할 수 있습니다.

 

?. 문법의 기본 사용법

1. 객체 속성 접근

const user = { name: "John", address: { city: "New York" } };

// 기존 방식
const city = user && user.address && user.address.city;
console.log(city); // New York

// Optional Chaining 방식
const city = user?.address?.city;
console.log(city); // New York

• 기존 방식에서는 user, user.address, user.address.city 가 모두 존재하는지 일일이 체크해야 했습니다. 이 경우 중간에 하나라도 undefined나 null값이 있으면 에러가 발생합니다.
• Optional Chaining을 사용하면, ?.를 통해 user.address가 존재하지 않으면 바로 undefined를 반환합니다. 이 방법은 중간 값이 없더라도 에러 없이 안전하게 처리할 수 있습니다.

2. 배열의 인덱스 접근

const arr = [1, 2, 3];

// 기존 방식
const secondElement = arr && arr[1];
console.log(secondElement); // 2

// Optional Chaining 방식
const secondElement = arr?.[1];
console.log(secondElement); // 2

• 배열의 인덱스에 접근할 때도 Optional Chaining을 사용하여 배열이 존재하지 않으면 undefiend를 반환하도록 할 수 있습니다.

3. 함수 호출

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

// 기존 방식
const greetMessage = user && user.greet && user.greet();
console.log(greetMessage); // Hello!

// Optional Chaining 방식
const greetMessage = user?.greet?.();
console.log(greetMessage); // Hello!

Optional Chaining을 사용하면 함수가 존재하지 않으면 undefined 를 반환하도록 할 수 있습니다. 기존에는 함수 존재 여부를 체크해야 했지만, 이제 ?. 를 사용하면 간편하게 처리할 수 있습니다.

 

4. null과 undefined를 안전하게 처리

const person = { name: "Alice", age: 30 };

// 기존 방식
const job = person && person.job && person.job.title;
console.log(job); // undefined

// Optional Chaining 방식
const job = person?.job?.title;
console.log(job); // undefined