[JavaScript, TypeScript] 옵셔널 체이닝(Optional Chaining)이란?

자바스크립트와 타입스크립트 둘 다 사용되는 옵셔널 체이닝...

개발을 하면서 엄청 많이 쓰게 되서 알기 싫어도 알 수밖에 없는 지경에 이르렀다...

 

옵셔널 체이닝

만약 값이 없으면(= null 혹은 undefined라면) 그냥 undefined를 반환하라는 안전장치이다. 

Exception이나 에러가 나타나지 않도록 도와 오류 없이 프로그램을 실행할 수 있다.

속성에 접근할 때 오류가 나는 것을 방지하고, 특히 중첩된 객체의 속성에 접근할 때 유용하게 쓰인다.

가장 큰 이점은 (1) 코드의 안정성을 높임 (2) 불필요한 조건문을 줄임 이라고 볼 수 있겠다.

 

참고로 필자는 인텔리제이에서 빨간줄 생겨서 필요없어도 그냥 쓴다(정상적으로 잘 작동되는데 왜 빨간줄이 나는진 나도 모르겠음¯\_(ツ)_/¯)

 

예시

나루토쿤은 영혼의 친구 사스케의 집 주소를 찾아가고 싶다. 하지만 사스케가 주소를 알려주지 않으면 그냥 넘어가고자 한다.

사스케가 주소를 알려주지 않은 것 = null 혹은 undefined 상태, 그냥 넘어가는 것 = undefined로 출력하는 상태.

타입스크립트로 연습해보자!

const friend = {
  name : "Sasuke",
  address : {
    	village : "leaf"
        country : "fire"
    },
};

사스케가 사는 마을을 콘솔로 찍어보자.

console.log("Sasuke's village : ", friend.address.village); 
// 사스케가 올바르게 집을 알려줬다면 leaf가, 안알려줬으면 에러가 발생할 것이다.

const village = friend.address?friend.address.village:undefined;
console.log(village); // 'leaf' 혹은 'undefined' 출력
// 에러를 발생시키고 싶지 않다면 자체적으로 조건문을 걸어 undefined가 출력되게 설정해야 한다.

변덕이 심한 사스케가 주소를 나루토쿤에게 알려주지 않는다면 나루토쿤은 친구의 집을 찾아갈 수 없다. 결국 콘솔에서 에러가 발생할 것이고, 이를 막을려면 귀찮은 삼항연산자를 사용해야 한다.

그렇지만 옵셔널 체이닝을 통해 저 귀차니즘을 해결할 수 있다.

const village = friend.address?.city; // Optional chaining 이용
console.log("사스케의 집 : ", village); // leaf, 혹은 undefined 자동 출력

 

옵셔널 체이닝은 null이나 undefined가 발생할 가능성이 있는 객체 속성에 ?. 연산자를 사용하여 안전하게 속성에 접근할 수 있도록 돕는다. address와 같이 특히 중첩된 객체에서 사용이 용이하며, null 혹은 undefined로 인한 오류를 방지한다. 

 

사용하는 상황

필자의 경우 예외처리를 위해 대부분 사용하지만, 그렇지 않은 상황에서도 본인의 입맛에 맞게 다양히 사용할 수 있다.

 

1. 객체의 속성이 없는 경우

const friend = {
  name : "Sakura",
  profile : {
    age: 15,
    hair : pink
   },
 };
 
 console.log("Sakura's hobby : ", friend.profile?.hobby); // hobby는 없으므로 undefined 출력

위 사쿠라짱의 취미는 profile에 없는 속성이므로 hobby를 출력하고 싶어도 undefined가 출력될 것이다.

 

2. 배열의 요소에 접근할 때

const friends = [
  {name : "Sasuke", hair: "black"},
  {name : "Sakura", hair: "pink"},
  {name : "Sikamaru", hair: "black"},
  {name : "Chouji", hair: "brown"},
];

const friendName = friends[4]?.name; // undefined

위 예시에서 4번째 인덱스의 친구는 없으므로(=null) undefined가 출력된다

혹은 배열의 길이를 확인할 때도 사용할 수 있는데,

const friend = [];

const firstFriend = friend[0]?.length; // undefined

로 배열의 길이를 확인할 수도 있다.

 

3. 함수 호출 시

객체가 함수일 수도 있지만, 함수가 정의되지 않았을 떄 안전하게 호출할 수  있는 방법도 있다.

// 함수가 정의되었으면 호출
const hello = {
  greet : () => "Hello!",
};
console.log(hello.greet?.()); // "Hello!" 출력

// 함수가 정의되어있지 않으므로 undefined
const notHello = {};
console.log(notHello.greet?.()) // undefined 출력

옵셔널 체이닝을 사용하지 않는다면?

사용하지 않아도 대체하는 방법은 많지만, 제일 중요한건 귀찮다.

보통 조건문이나 삼항연산자를 사용하는데,

if (friend && friend.profile && friend.profile.hair) {
  console.log(friend.profile.hair);
  }else{
  console.log("undefined");
  };

이런식으로 조건문을 늘어지게 써야 하는데, 이러면 너무 길어진다!

 

따라서 옵셔널 체이닝은 코드를 간결하게 줄이는데도 유용하게 사용할 수 있다.

 

결론

그밖에도 조건부 렌더링, 비동기 데이터 처리, 옵션 객체 처리 등등에서 사용되지만 너무 남발해서도 안된다. 나중에 디버깅이 어려워질 수 있기 때문... 

모두들 열심히 공부하고 행복코딩하자!