(19) Modern JavaScript - 옵셔널 체이닝 (Optional Chaining)

옵셔널 체이닝(Optional Chaining)은 프로퍼티에 안전하게 접근하는 방식이며

객체의 값이 유효한지 안한지 판단하지 않고 넘어가 객체 속 안에 깊이 있는 프로퍼티의 접근할 수 있는 기능이다.

 

일반적으로 객체의 프로퍼티는 점표기법을 통해서 접근한다고 했을 때 다음의 코드를 살펴보면

function printPatName(pat) {
  console.log(pat.dog.name);
}

const pat = {
  name: "구름이",
  dog: {
    name: "Pomeranians",
    age: 9,
    favorite: "sneak",
  },
};

객체를 활용해서 데이터를 표현하다보면

위와 같이 중첩된 개체를 작성하게 될 일이 빈번하고 

함수에서도 이런 중첩 객체의 프로퍼티를 활용할 일이 자주 생긴다.

 

일단 코드를 보면

'printPatName'은 'pat' 파라미터에 중첩된 'pat' 객체의 'name' 프로퍼티를 콘솔에 출력해주는 함수인데

이렇게 중첩 객체를 다룰 때 주의해야할 부분이 있다

function printPatName(pat) {
  console.log(pat.dog.name);
}

const pat = {
  name: "구름이",
  dog: {
    name: "Pomeranians",
    age: 9,
    favorite: "sneak",
  },
};
const pat2 = {
  name: "Cloud",
};

console.log(pat2.dog); // undefined
printPatName(pat2); // 타입에러

.여러 가지 상황에 맞춰 데이터를 다루다 보면

예상하지않은 프로퍼티를 가지고 있을 수가 있는데

'dog' 프로퍼티를 가지고 있지 않은 'pat2'는 'dog' 프로퍼티가 undefined 이기 때문에

(pat2.dog.name)에 접근하려는 순간 에러가 발생한다.

 

그래서 'printPatName'과 같이 중첩된 객체의 프로퍼티를 다룰 때

(pat.dog.name)에 접근하기 전에 (pat.dog)가 null 혹은 undefined가 아니라는 것을 검증한 다음에

접근해야 에러를 방지할 수 있다.

---

if문을 활용할 수도 있지만 일반적으로는 아래와 같이 간결하게 AND 연산자를 활용할 수 있다.

function printPatName(pat) {
  // console.log(pat.dog.name);
  console.log(pat.dog && pat.dog.name); //AND 연산자
}

const pat = {
  name: "구름이",
  dog: {
    name: "Pomeranians",
    age: 9,
    favorite: "sneak",
  },
};
const pat2 = {
  name: "Cloud",
};

printPatName(pat);

하지만 객체의 이름이나 프로퍼티의 이름이 길다면 가독성이 나빠지기 때문에

이런 상황에 훨씬 더 코드를 간결하게 사용할 수 있는 문법이 옵셔널 체이닝 이다.

---

아래 코드와 같이 물음표와 마침표를 붙여 사용하는 부분이 옵셔널 체이닝 연산자(?.) 이다.

function printPatName(pat) {
  // console.log(pat.dog.name);
  // console.log(pat.dog && pat.dog.name);
  console.log(pat.dog?.name); // Optional Chaining
}

const pat = {
  name: "구름이",
  dog: {
    name: "Pomeranians",
    age: 9,
    favorite: "sneak",
  },
};
const pat2 = {
  name: "Cloud",
};

printPatName(pat);

만약 옵셔널 체이닝 연산자 왼편의 프로퍼티 값이 undefined 또는 null이 아니라면

그다음 프로퍼티 값을 리턴하고 그렇지 않은 경우에는 undefined를 반환하는 문법이다.

---

옵셔널 체이닝 연산자의 동작 원리를 아래와 같이 삼항 연산자를 통해 구체적으로 표현할 수 있다.

function printPatName(pat) {
  // console.log(pat.dog.name);
  // console.log(pat.dog && pat.dog.name); // AND 연산자
  // console.log(pat.dog?.name); // 옵셔널 체이닝
  console.log( // 삼항 연산자를 활용한 옵셔널 체이닝
  pat.dog === null || pat.dog === undefined ? undefined : pat.dog.name)
  ;
}

const pat = {
  name: "구름이",
  dog: {
    name: "Pomeranians",
    age: 9,
    favorite: "sneak",
  },
};
const pat2 = {
  name: "Cloud",
};

printPatName(pat);

---

아래와 같이 null 병합 연산자와 함께 활용하여 응용할 수 있다.

function printPatName(pat) {
  // console.log(pat.dog.name);
  // console.log(pat.dog && pat.dog.name);
  // console.log(pat.dog?.name);
  // console.log(
  //   pat.dog === null || pat.dog === undefined ? undefined : pat.dog.name
  // );
  console.log(pat.dog?.name ?? "pat2 객체에 dog가 없습니다.");
}

const pat = {
  name: "구름이",
  dog: {
    name: "Pomeranians",
    age: 9,
    favorite: "sneak",
  },
};
const pat2 = {
  name: "Cloud",
};

printPatName(pat2);

---

자바스크립트에서 에러를 방지하는 일은 굉장히 중요하다. 

중첩된 객체를 다룰 때 에러를 방지하기 위해 다양한 방식을 활용할 수 있지만 

옵셔널 체이닝 연산자를 활용하면 훨씬 더 간결하게 코드를 작성할 수 있다.