JS의 옵셔널 체이닝

 

기존에는 . 을 통해서 객체가 가진 데이터에 접근을 했습니다.

그런데 만약에 앞서 객체의 타입에서 살펴봤던 student 객체에 없는 데이터에 접근한다면 어떻게 될까요?

let student = null;

console.log(user.name); 
// Uncaught TypeError: Cannot read properties of null

타입 에러가 발생합니다.

자바스크립트에서는 존재하지 않는 객체의 속성이나 배열에 접근하면 런타임 오류가 발생합니다.

옛날에는 이 문제를 해결하기 위해서 아래와 같은 방법을 사용했습니다.

if (student && student.name) {
  console.log(student.name);
} else {
  console.log("student 또는 name이 없습니다.");
}

근데 이렇게 하면 너무 코드가 복잡해지고 길어질게 뻔합니다.

그래서 옵셔널 체이닝이 등장했습니다.

옵셔널 체이닝은 ?. 을 통해서 객체에 안전하게 접근할 수 있는 방법을 말합니다.

?. 는 앞에 있는 대상이 undefined나 null이면 접근을 멈추고 undefined를 반환합니다.

• 사담유재석이랑 조세호가 “유퀴즈~?” 물어보고 “예스!” 하면 퀴즈로 넘어가잖아요.옵셔널 체이닝도 “있어?” 물어보고 “예스!”하면 객체의 값에 접근하고, “노!” 하면 undefined로 끝내는 부분이 비슷하다고 생각했어요.
• “노!”하면 진짜 끝이고.
• 저는 이걸 보고 약간 그 유퀴즈가 생각났어요.

const student = {
  name: 'Alice',
  address: {
    city: 'Seoul',
  },
};

// 정상적인 접근
console.log(student?.name);           
    // "Alice"
console.log(student?.address?.city);  
    // "Seoul" (중첩 속성도 안전하게 접근)

// 존재하지 않는 속성 접근
console.log(student?.age);            
    // undefined (오류 없이 안전)

// 존재하지 않는 객체 접근
const student2 = null;
console.log(student2?.address?.city); 
    // undefined (안전하게 undefined 반환)

그럼 항상 . 대신 ?. 을 써야하는 걸까요?

.? 는 존재하지 않아도 괜찮은 대상에만 사용해야 합니다.

.? 을 남용하면 반드시 값을 할당해야할 객체의 값에 값을 할당하지 않았을 때 빠르게 발견하기 어렵습니다.

따라서 필요한 곳에만 적절하게 사용하는 것이 중요합니다.

• 주의 사항값이 존재하지 않으면 (값이 null 이나 undefined면) undefined를 반환합니다.

    // 😭 안되는 사용 예시 (에러)
    user?.name = "Alice"; 
    // 오류: Invalid left-hand side in assignment
  
    // ✅ 올바른 사용법
    if (user) {
      user.name = "Alice";
    }

• 옵셔널 체이닝을 사용하여 값을 할당할 수 없습니다.
• 옵셔널 체이닝을 쓸 때는 객체의 전재 여부가 확실하지 않을 때만 사용합니다!
• 널 병합 연산자랑 같이 쓰기널 병합 연산자 ???? 는 왼쪽에 있는 값이 null 이나 undefined 면 오른 쪽의 기본 값을 반환하는 연산자입니다.
• const name = student?.name ?? "이름 없음"; console.log(name); // student.name이 없으면 "이름 없음"을 출력
• 널 병합 연산자는 ?? 입니다.
• 옵셔널 체이닝이랑 널 병합 연산자를 같이 쓰면 코드를 더 효율적으로 쓸 수 있습니다.