JavaScript의 새로운 기능: 선택적 연결

Originally published on inspiredwebdev.com

이 기사를 작성한 날짜(2019년 10월 24일)를 기준으로 옵셔널 체이닝은 TC39 프로세스의 3단계에 있으므로 아직 브라우저에서 기본적으로 사용할 수 없습니다.

TC39 프로세스here의 단계에 대한 자세한 내용을 읽을 수 있습니다.

옵셔널 체이닝이란?

사용자를 나타내는 단순Object을 살펴보겠습니다.

const user1 = {
    name: 'Alberto',
    age: 27,
    work: {
        title: 'software developer',
        location: 'Vietnam'
    }
}

const user2 = {
    name: 'Tom',
    age: 27
}

사용자의 직위를 표시하고 싶다고 가정해 보겠습니다.
보시다시피 work는 Object의 선택적 속성이므로 다음과 같이 작성해야 합니다.

let jobTitle;
if (user.work){
    jobTitle = user.work.title
}

또는 삼항 연산자 사용:

const jobTitle = user.work ? user.work.title : ''

title의 속성 work에 액세스하기 전에 사용자가 실제로 work를 가지고 있는지 확인해야 합니다.

우리가 간단한 객체를 다룰 때는 그렇게 큰 문제가 아니지만 액세스하려는 데이터가 깊이 중첩되어 있으면 문제가 될 수 있습니다.

여기서 선택적 연결?. 연산자가 구출됩니다. 다음은 이 새 연산자로 코드를 다시 작성하는 방법입니다.

const jobTitle = user.work?.title

완료! 더 간결하고 읽기 쉽습니다.

위의 코드는 does the user have a work property? if yes, access the title property inside of it로 읽을 수 있습니다.

const user1JobTitle = user1.work?.title;
// software developer
const user2JobTtile = user2.work?.title;
// undefined

Object에서 사용할 수 없는 속성에 도달하는 즉시 연산자는 undefined를 반환합니다.

이 두 사용자 및 학교 기록과 같은 선택적 속성이 있는 깊게 중첩된 개체를 처리한다고 상상해 보십시오.

const elon = {
    name: 'Elon Musk',
    education: {
        primary_school: {   /*  primary school stuff */ },
        middle_school: { /* middle school stuff */ },
        high_school: {/* high school stuff here */},
        university: {
            name: 'University of Pennsylvania',
            graduation: {
                year: 1995
            }
        }
    }
}

const mark = {
    name: 'Mark Zuckerberg',
    education: {
        primary_school: {   /*  primary school stuff */ },
        middle_school: { /* middle school stuff */ },
        high_school: {/* high school stuff here */},
        university: {
            name: 'Harvard University',
        }
    }
}

모든 사용자가 대학에서 공부한 것은 아니므로 재산은 선택 사항이 될 것이며 일부는 중퇴하고 학업을 마치지 않았기 때문에 졸업도 마찬가지입니다.

이제 두 사용자의 졸업 연도에 액세스하고 싶다고 상상해 보십시오.

let graduationYear;
if(
    user.education.university && user.education.university.graduation && user.education.university.graduation.year){
        graduationYear = user.education.university.graduation.year;
}

옵셔널 체이닝 연산자를 사용하면:

const elonGraduationYear = elon.education.university?.graduation?.year;
// 1992
const markGraduationYear = mark.education.university?.graduation?.year;
// undefined

이것이 이 새로운 연산자를 사용하여 선택적 속성에 액세스하는 방법입니다. 사용을 시작하려면 학습을 권장하는 TypeScript 3.7의 일부가 될 것입니다! TypeScript 3.7here에 대한 자세한 내용을 읽을 수 있습니다.

또는 Babel을 사용하여 이 연산자를 사용할 수 있습니다.



읽어주셔서 대단히 감사합니다. 자세한 내용은 내 블로그InspiredWebDev에서 나를 따르십시오.




Amazon 및 Leanpub에서 내 전자책 받기