선택적 체이닝이 JavaScript에 올 수 있습니다.

업데이트: 옵셔널 체이닝이 드디어 Stage 4 등장!! 이는 ES2020 사양의 일부임을 의미합니다. 또한 이미 TypeScript v3.7 에 도달했습니다.

다음은 repo with all the info you need 입니다.

그것은 무엇입니까?

선택적 연결을 사용하면 속성에 액세스하기 전에 객체가 존재하는지 확인할 수 있습니다. 다른 언어에도 비슷한 것이 있습니다. 예를 들어 C#에는 제안된 선택적 연결과 매우 유사하게 동작하는 Null 조건부 연산자가 있습니다.

왜 필요합니까?

속성에 액세스하기 전에 객체나 배열의 존재를 확인해야 했던 적이 있습니까? 잊어버리면 다음과 같이 보일 수 있습니다.

if(specimen && specimen.arms && specimen.arms.length > 2)
    console.log("This is probably an alien");

이러한 검사를 수행하는 이유는 JavaScript에서 구조나 스키마가 반드시 필요하지 않은 익명 객체를 허용하기 때문입니다. 따라서 개체 트리에서 부모를 확인하지 않으면 다음과 같은 많은 오류가 발생합니다.



적어도 오류의 경우에는 specimen가 존재하지만 arms 속성이 없기 때문입니다. 따라서 우리는 length 인 것을 undefined 얻으려고 했습니다.

그래서, 제안은 무엇입니까?

그 모든 것 대신 다음과 같이 선택적 검사를 연결할 수 있습니다.

if(specimen?.arms?.length > 2)
    console.log("This is probably an alien");

그러나 옵셔널 체이닝 연산자는 ?.가 아니라 ?라는 점을 명심하세요. 즉, 이를 사용하여 배열의 항목에 액세스할 때 다음과 같이 표시됩니다.

var firstArm = specimen?.arms?.[0]; //CORRECT
var secondArm = specimen?.arms?[1]; //WRONG

마찬가지로 함수의 존재를 확인하기 위해 사용할 때:

var kickPromise = specimen?.kick?.();  //CORRECT
var punchPromise = specimen?.punch?(); //WRONG

이 경우 함수로 호출하기 전에 kick가 있는지 확인합니다!

어떻게 작동합니까?

운영자는 ?.의 왼쪽에 있는 것이 null 또는 undefined인지 확인합니다. 그렇다면 표현식이 단락되어 undefined 를 반환합니다. 그렇지 않으면 식은 잘못된 것이 없는 것처럼 계속 평가됩니다.

언제 사용할 수 있습니까?

음, 여전히 제안이므로 아직 Vanilla JavaScript에는 없습니다. 그러나 사용할 수 있다with Babel!

제안 상태를 최신 상태로 유지하고 더 깊이 이해하고 몇 가지 예를 확인하려면 their GitHub repo을 확인해야 합니다! specs here 도 찾을 수 있지만 대부분의 문서가 머리를 스쳐 지나가기 때문에 다루지 않겠습니다 😅

고맙습니다!

천만에요! ❤️