멋진 구문 #1 | 선택적 체인

Cool Syntax 시리즈의 첫 번째 게시물에 오신 것을 환영합니다! 프로처럼 깨끗한 JavaScript 코드를 작성하는 방법에 대한 게시물을 수시로 게시할 예정입니다!

첫 번째 텍스트는 선택적 연결에 관한 것입니다. 객체의 읽기 내용을 훨씬 더 짧고 단순하게 만드는 구문 설탕입니다. 보여드리겠습니다.

이 객체 배열을 살펴보십시오.

const art = [
    {
        type: "paining",
        about: {
            name: "The starry night",
            author: "Vincent van Gogh",
            year: "1889",
            medium: "Oil on canvas",
        },
        dimensions: {
            width: "92.1",
            height: "73.7",
        },
    },
    {
        type: "sculpture",
        about: {
            name: "David",
            author: "Michelangelo",
        },
        dimensions: {
            width: "517",
            height: "199",
        },
    },
    {
        type: "photography",
        about: {
            name: "Pillars of Creation (Eagle Nebula)",
            author: "Hubble Space Telescope",
        },
    },
];

일부 데이터를 가져왔고 이제 art 개체 배열이 있다고 상상해 보십시오. 그런 다음 type 배열의 각 개체에 대해 art를 기록하려고 한다고 가정해 보겠습니다.

art.forEach(artPiece => {
    console.log(artPiece.type);
})

이제 각각 height 을 기록해 보겠습니다.

art.forEach(artPiece => {
    console.log(artPiece.dimensions.height);
})

그리고... 예, 오류 메시지가 표시됩니다. -> TypeError: 정의되지 않은 '높이' 속성을 읽을 수 없습니다. dimensions(각 개체에 대해)가 없고 여기에서 속성을 얻으려고 하기 때문입니다.

솔루션 1 - && 연산자

art.forEach(artPiece => {
    console.log(artPiece.dimensions && artPiece.dimensions.height);
})

솔루션 2 - 선택적 체인

art.forEach(artPiece => {
    console.log(artPiece?.dimensions?.height);
})

개체에 많은 개체가 있는 복잡한 개체가 있다고 상상해보십시오.
w && w.x && w.x.y && w.x.y.z대w?.x?.y?.z
옵셔널 체이닝이 (구문 측면에서) 더 나은 솔루션인 이유를 알 것 같습니다!

이 짧은 구문 관련 게시물을 즐겼기를 바랍니다! 내 이전 게시물을 확인하고 더 멋진 JavaScript 항목을 계속 지켜봐 주세요!

건배,
달리보르