[Javascript] Optional Chaining ( ?.)

오늘 신기한 걸 알게 돼서 포스팅을 해본다.

 

 

동료분도 지금 리액트 독학 중이신데 ?. << 이걸 처음 써봤다고 알려주셨다.

 

 

현재 우리가 계속 써왔던 방식은

 

const keyName = (object.hasOwnProperty("keyName") ? object.keyName : "";

 

이런 식인데 이게 문제점이 object가 null 이나 undefined될 경우 오류가 나면서 리액트의 경우 화면이 그냥 터져버린다.

 

그래서 예쁘지 않고 코드만 더 길어지게

 

const keyName = (!!object && object.hasOwnProperty("keyName") ? object.keyName : "";

// 혹은

const keyName = (!!object && !!object.keyName ? object.keyName : "";

 

이렇게 썼었다.

 

 

그런데 Optional Chaining을 쓰면 훨씬 개선될 수 있다.

 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Optional chaining - JavaScript | MDN

 

위 사이트를 보면

 

?. 연산자는 . 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 nullish(null || undefined)이라면, 에러가 발생하는 대신에 표현식의 리턴 값은 undefined로 단락된다. 함수 호출에서 사용될 떄, 만약 주어진 함수가 존재하지 않는다면, undefined를 리턴한다.

(...) 어떤 속성이 필요한지에 대한 보증이 확실하지 않는 경우 객체의 내용을 탐색하는 동안 도움이 될 수 있다.

 

 

설명만 보고 믿기 어렵다면 실제로 해보는 수밖에!

 

코드를 이렇게 작성해보자

 

// optional chaining
const object = {
    id: 1,
    name: "이아무개",
    age: 5,
    nationality: "South Korea",
    date: new Date()
}; // 궁금해서 자료형 거의 다 try try 해봄

console.info("=== object ===");
console.log("id = ", object?.id);
console.log("name = ", object?.name);
console.log("age = ", object?.age);
console.log("nationality = ", object?.nationality);
console.log("date = ", object?.date);
console.log("address = ", object?.address);

const nullishObject = null;
console.info("=== nullishObject ===");
console.log("id = ", nullishObject?.id);

 

그리고 콘솔에 어떻게 나오나 확인해 봄

 

 

 

좋다 좋아

 

 

array 같은 경우는 더 짱임

 

const array = [ "a", "b", "c", "d" ];
console.info("=== array ===");
array.forEach((element, index) => {
    console.log(`index: ${index} = ${array?.[index]}`);
});

const  emptyArray = [];
console.info("=== emptyArray ===");
console.log(`index: 0 = ${emptyArray?.[0]}`);

const nullishArray = null;
console.info("=== nullishArray ===");
console.log(`index: 0 = ${nullishArray?.[0]}`);

 

 

 

위에 참조해놓은 모질라 사이트 내용을 더 뜯어 보니까 optional callbacks라고 nullish한 매서드를 호출할 때 optional chaining을 사용할 수 있다고 한다. (하지만 속성에 해당 이름이 있지만 함수가 아니라면 exception이 발생할 수 있으니 주의해야 한다고.)

 

 

 

 

예시로 이렇게 설명되어 있다.

 

현 프로젝트에서 컴포넌트를 재사용하다 보니 화면마다 사용하는 프로퍼티가 달라지는데 ?. 연산자를 활용하면 함수의 존재여부에 따라 더 손쉽게 코딩할 수 있을 것 같다.

 

 

 

+ 추가로 모질라에서 제공한 예시로 여러가지를 시도 해봄

?.를 연속적으로 사용할 수 있다고 해서 써봤는데 내가 생각했던 거랑은 다른 거 같다.

 

let customer = {
    name: "Carl",
    details: {
        age: 82,
        location: "Paradise Falls" // detailed address is unknown
    }
};

let customerCity = customer.details?.address;
console.log(customerCity); // undefined

customerCity = customer.details?.address?.city;
console.log(customerCity); // undefined

customerCity = customer.details?.address?.city?.age;
console.log(customerCity); // undefined

customerCity = customer.details?.age;
console.log(customerCity); // 82

customerCity = customer.details?.age?.location;
console.log(customerCity); // undefined

 

그리고 이 예시 보고 새로운 개념도 알아냈다. null 병합 연산자!

 

let customer = {
  name: "Carl",
  details: { age: 82 }
};
const customerCity = customer?.city ?? "Unknown city";
console.log(customerCity); // Unknown city

 

ko.javascript.info/nullish-coalescing-operator

null 병합 연산자 '??'

 

 

위 사이트에 따르면

 

이 두 코드는 모두 같은 코드이다.

 

x = (a !== null && a !== undefined) ? a : b;

x = a ?? b

 

나라면 당연히 후자를 쓰겠다.

 

 

진작에 알았으면 기존 코드에서 null 체크하는 부분 죄다 이렇게 쓰는 건데..

 

예를 들어 위 hasOwnProperty 부분도

 

const keyName = object?.keyName ?? "";

 

이걸로 끝인 것이다.