JavaScript의 선택적 연결

JavaScript의 선택적 연결은 존재하지 않고 해당 상위 속성이 null(null 또는 정의되지 않음)인 객체 속성에 액세스하기 위해 반환undefined하는 데 사용됩니다.

속성이 존재하는지 여부를 모르고 발생하는 오류를 피하고 싶다면 선택적 연결을 사용하여 문제를 해결할 수 있습니다.

이 기사에서는 선택적 연결을 사용하는 방법과 시기를 배웁니다. JavaScript에서 Optional Chaining을 사용하지 말아야 할 경우도 배우게 됩니다.

작동 방식

먼저 중첩 개체의 속성에 액세스할 때 무엇이 ​​잘못될 수 있는지 살펴보겠습니다.

let person = {
    name: "Murtuza",
    work: () => {
        return "Software Developer"
    },
    socials: {
        github: {
            username: "murtuzaalisurti",
            link: "https://github.com/murtuzaalisurti",
            proUser: {
                is: 'no'
            }
        },
        linkedin: {
            username: "murtuzaali-surti",
            link: "https://linkedin.com/in/murtuzaali-surti"
        },
        twitter: {
            username: "murtuza_surti",
            link: "https://twitter.com/murtuza_surti"
        }
    }
}

위 객체에서 속성link 내에 중첩된 속성website에 액세스해 봅시다. 우리가 할 수 있습니까?

console.log(person.website.link); //an error will be thrown

오류가 발생합니다.

Cannot read property 'link' of undefined

개체에 속성 웹사이트가 없습니다!

하지만 속성 website을 루트 개체에 추가하고 속성 값을 null로 설정해 보겠습니다.

website: null

이것이 작동하는지 확인합시다.

console.log(person.website.link); //an error will be thrown

유사한 오류가 발생합니다.

Cannot read property 'link' of null

위의 definition에서 언급했듯이 선택적 연결을 사용하여 이러한 유형의 오류를 처리할 수 있습니다! 그 방법은 다음과 같습니다.

통사론

// website: property to validate
// link: property to access
website?.link

연산자?.는 왼쪽에 있는 속성이 null 또는 undefined인지 확인하고 이 경우 오류를 발생시키지 않고 단순히 undefined를 반환합니다. 다른 말로 단락이라고도 합니다. 그렇지 않으면 오른쪽에 있는 속성 값을 반환합니다.



뿐만 아니라 옵셔널 체이닝을 사용하여 존재하는 함수를 호출할 수도 있습니다.

person.work?.(args)

또한 [] 대괄호를 사용하여 속성에 액세스할 수 있습니다.

person.socials.github?.["username"]

당신이 할 수 없는 것

아직 선언되지 않은 개체에는 선택적 연결을 적용할 수 없습니다. 예를 들어:

object?.prop // object is not defined

object 를 선언하지 않았으므로 오류가 발생합니다.

이 식에 값을 할당할 수 없습니다. 즉, 선택적 연결 표현식은 왼쪽에 있을 수 없습니다.

아래 코드는 유효하지 않습니다.

person.socials.github?.["username"] = "name" // not valid

옵셔널 체이닝은 언제 사용하나요?

옵셔널 체이닝은 꼭 필요하지 않을 때는 사용하지 말아야 한다는 점에 유의하는 것이 중요합니다. 액세스하려는 속성이 필수가 아닌 선택적임을 알고 있는 경우에만 선택적 연결을 사용하십시오.

예를 들어 객체person에서 소셜 미디어 플랫폼을 선택 사항으로 유지할 수 있으므로 사용자가 소셜 미디어 계정을 가지고 있는지 또는 특정 플랫폼에 있지 않은지 확실하지 않습니다. 이를 위해 선택적 연결을 사용하여 사용자가 특정 플랫폼에 소셜 미디어 계정을 가지고 있는지 확인하고 존재하는 경우 사용자 이름을 가져올 수 있습니다.

person.socials.github?.["username"]

그러나 선택적 연결 연산자를 루트 객체에 배치하면 루트 객체, 즉 person가 존재해야 하고 존재하지 않으면 오류가 발생하기 때문에 의미가 없습니다!

결론

이 기사에서는 JavaScript의 옵셔널 체이닝이 무엇인지, 언제 사용하고 언제 사용하지 않는지 배웠습니다.

Optional Chaining의 작동 방식에 대해 자세히 알아보려면 MDN documentation에서 자세한 내용을 확인하십시오.

This post was originally published in Syntackle in collaboration with blog.shahednasser.com