선택적 연결 - 자바 스크립트에서 더 안전한 null

섭 독자!

ES2020에 대해 들어본 적이 있을 것입니다. 예, 이것은 Optional Chaining라는 새로운 기능과 함께 제공되는 새 버전의 Javascript입니다!

Javascript에서 subprops의 존재를 보장하려면 두 가지 기본 방법을 사용할 수 있습니다.

// By return at each verification
if (!data) {
    return
}

if (!data.user) {
    return
}

if (!data.user.name) {
    return
}

console.log('The name is:' + data.user.name)
// The name is Will

// By return at complete verification
if (!data|| !data.user || !data.user.name) {
    return
}

console.log('The name is:' + data.user.name)
// The name is Will

또는

const name = data && data.user && data.user.name

console.log('The name is:' + name)
// The name is Will || The name is undefined

아마도 두 번째 예가 명확해 보일 수 있습니다.
하지만... 대체를 적용해야 하는 경우에는 어떻게 합니까?

const name = data && data.user && data.user.name || 'William Godoy'

console.log('The name is:' + name)
// The name is Will || The name is William Godoy

좋아... 좋아...
충분한? 당연히 아니지!

이것은 Optional Chaining가 우리를 구하기 위해 오는 곳입니다.

const name = data && data.user && data.user.name
// turns to
const name = data?.user?.name

console.log('The name is:' + name)
// The name is Will || The name is undefined

놀라운 어?

하지만 다음과 같은 질문이 있을 수 있습니다. "대체를 추가하려면 같은 방식으로 해야 하나요?"

두 가지 대답이 있습니다: 예와 아니오

설명하겠습니다. 이전 방법이 작동합니다.

const name = data?.user?.name || 'William Godoy'

console.log('The name is:' + name)
// The name is Will || The name is William Godoy

하지만 선호:

const name = data?.user?.name ?? 'William Godoy'

console.log('The name is:' + name)

EcmaScript 문서가 이것을 제안하기 때문이 아니라 가독성을 위해!

지금까지 멋진?

요약하자면?

const data = {
    user: {
        name: 'Will',
        age: 24
    },
    status: 200
}

// Old way

const name = data && data.user && data.user.name || 'William'
// Will

// New way
const name = data?.user?.name || 'William'
// Will

예, 기능을 연결하는 데 사용할 수 있습니다.

const options = {
    api: {
        getData () {

        },
        // ...
    },
    // ...
}

options?.api?.getData()

그리고 가능한 콜백과 함께 사용:

function dbDeleteWithoutWhere(callback) {
    // Do stuffs ...
    if (callback) {
        callback()
    }
}

// OR

function dbDeleteWithoutWhere(callback) {
    // Do stuffs ...
    callback && callback()
}

// New Way

function dbDeleteWithoutWhere(callback) {
    // Do stuffs ...
    callback?.()
}

위에서 볼 수 있듯이 호출되는 콜백이 없으면 오류가 발생하지 않습니다.

// No errors after being invoked
dbDeleteWithoutWhere(undefined)

// No errors after being invoked
dbDeleteWithoutWhere(function callback() {
    // Do callback stuffs
})

함수와 마찬가지로 배열로 시도할 수 있습니다.

const numbers = {
    integers: [1, 2, 3, 4, 5],
    floats: [1.1, 2.1, 31.9, 45.2]
}

// Old way
const firstInteger = numbers && numbers.integers && numbers.integers[0]
// 1 || undefined

// New way
const firstInteger = numbers?.integers?.[0]
// 1 || undefined

옵션 체인은 가독성, 청결함을 용이하게 하고 정리를 돕기 위해 왔습니다!

여기까지 읽어주셔서 감사합니다!

건배