Medium - Understand the Superpower of Optional Chaining in JavaScript

09 Jan 2020 in Trend

원문 - Javascript Jeep🚙💨

Trend 파악을 위한 Medium 기고문 포스팅 - 자바스크립트의 강력한 옵셔널 체이닝을 이해해 봅시다; 자바스크립트의 새로운 기능은 옵셔널 체이닝에 대해 알아봅시다.

?.-> 옵셔널 체이닝 오퍼레이터

Image from twitter by Daniel Rosenwasser (@Daniel Rosenwasser).

Optional Chaining

옵셔널 체이닝은 객체안의 프로퍼티가 사용 가능한지 수동으로 체크할 필요가 없도록 만들어 줄 것입니다. 옵셔널 체이닝을 사용하면 내부적으로 체크가 수행될 것입니다. 옵셔널 체이닝이 없는 예제를 보시죠.

function sayHi(user) {
  let name = user.name.toUpperCase();
  console.log(`Hi Mr. ${name}`);
}

위의 함수를 보시면 hi와 함께 사용자의 이름이 출력될 것입니다.

var user1 = { name: "John" };
sayHi(user1); // Hi Mr.JOHN.

그러나 name 프로퍼티가 없는 user 객체를 전달한다면 아래와 같이 에러가 발생할 것입니다.

sayHi({});
// TypeError: Cannot read property 'toUpperCase' of undefined.

sayHi();
// TypeError: Cannot read property 'name' of undefined.

이러한 문제를 해결하기 위해 우리는 객체안에 name 프로퍼티가 사용가능한 지 체크하는 로직을 넣어야 했습니다.

function sayHi(user) {
  let name = (user && user.name && user.name.toUpperCase()) || "Unknown";
  console.log(`Hi Mr. ${name}`);
}
sayHi({}); // Hi Mr. Unknown
sayHi(); // Hi Mr. Unknown

Using Optional Chaining

옵셔널 체이닝은 연산자 왼쪽의 객체가 유효한지 (null이나 undefined가 아닌지) 확인합니다. 프로퍼티가 유효하다면 연산자 오른쪽을 실행하고 아니라면 undefined를 리턴합니다. 간단한 예제를 한번 보시죠

function sayHi(user) {
  let name = ( user?.name?.toUpperCase() )|| "unKnown";
  console.log(`Hi Mr. ${name}`);
}

옵셔널 체이닝 연산자와 동일한 네이티브 자바 스크립트 코드는 다음과 같습니다.

(property == undefined || property == null ) ? undefined : property

Using variables as property name

옵셔널 체이닝에 있는 프로퍼티 이름을 변수처럼 사용할 수도 있습니다.

var user = {name: "John", age: 20};
var Age = "age";
user?.[Age];
user?.["a"+"ge"]

Function call with optional chaining

존재하지 않을 수도 있는 메소드를 호출하는 데에도 옵셔널 체이닝을 사용할 수 있습니다.

var user = {
  name: "John",
  getName() {
    return this.name;
  }
}
user?.getName?.();

Summary

• 자바스크립트에 옵셔널 체이닝이 추가되었다
• undefined를 참조하는 데에서 매우 많은 에러가 발생하는만큼 JS에서는 타입체크가 중요하다; 그래서 타입스크립트가 인기 있는 거구..
• 기존의 로직, 코드 스타일보다 좀 더 깔끔하게 처리할 수 있는 옵셔널 체이닝이 추가되었다.