You must have such ugly, sad questions.

  • Because you think people are inherently good.

const fetchUser = (a)= > {
    return {
        name: 'hello world'.gender: 'male'}}const user = fetchUser()

console.log(user.name)

// The sun is just right, and the result is no worse
// => hello word
  
Copy the code
  • But as a result, people become poets (dead?).

const fetchUser = (a)= > {
    return null
}

const user = fetchUser()

console.log(user.name)
  
/ / / (ㄒ o ㄒ) / ~ ~
// => Uncaught TypeError: Cannot read property 'name' of null
  
Copy the code
  • So you learn to program for search engines and open bai**.com, goo**.com, bi**.com

const fetchUser = (a)= > {
    return null
}

const user = fetchUser()

console.log(user && user.name)
  
// The sun is just right, but the heart is a little tired
// => null
  
Copy the code
  • And then you turn 18, and you think life is just like that, until you see it for the first time and you have a grandson’s name in mind

const fetchUser = (a)= > {
    return {
        name: 'hello world'.gender: 'male'.children: [{name: 'hi, my son'.gender: 'male'.children: [{name: 'hi, my grandson 😭'.gender: 'male',}]}]}const user = fetchUser()

console.log(user && 
            user.children && 
            user.children[0] && 
            user.children[0].children &&
            user.children[0].children[0] &&
            user.children[0].children[0].name)
  
// Sun ah, don't give birth, I am too difficult 😭😭😭😭
// => hi, my grandson 😭
  
Copy the code

It’s time to use Optional Chaining

What is optional chaining

  • The Optional link allows you to read the value of the underlying property of a connected object without explicitly checking the validity of every reference in the chain

  • Optional use? . As the operator

  • Optional is in Stage 3, but Babel currently supports it.

  • It is not a new feature of programming languages and has been implemented in other languages for a long time.

    • C#

      Object object; object? .prop1? .prop2? .prop3 ??"default";

Copy the code

    • Java

      
Object object;

Optional.ofNullable(object)
    .map(obj -> obj.prop1)
    .map(obj -> obj.prop2)
    .map(obj -> obj.prop3)
    .orElse("default");

Copy the code

How to use optional chaining

Note that no browser currently supports optional chaining and requires Babel escape.

  1. Add @ Babel/Babel – plugin – proposal – optional – chaining

    npm install @babel/plugin-proposal-optional-chaining --D
Copy the code

    or

    yarn add @babel/plugin-proposal-optional-chaining -D
Copy the code

  2. Add @ Babel/plugin – proposal – nullish – coalescing – operator

    npm install @babel/plugin-proposal-nullish-coalescing-operator --D
Copy the code

    or

    yarn add @babel/plugin-proposal-nullish-coalescing-operator -D
Copy the code

  3. Modify. Babelrc

    {
    "plugins": [
        "@babel/plugin-proposal-optional-chaining"."@babel/plugin-proposal-nullish-coalescing-operator"]}Copy the code

Start having fun

  1. The use of optional chaining

    const user = {
    name: 'hello, world'.gender: 'male'
}

console.log(user? .children? .name)// => undefined
console.log(user? .name)// => Hello, world
Copy the code

  2. Use optional chaining and nullish

    const user = {
    name: 'hello, world'.gender: 'male'
}

console.log(user? .children? .children? .children ??'Undefined')

// => Undefined
Copy the code

  3. Combine arrays, objects and Nullish

    
const fetchUser = (a)= > {
    return {
        name: 'hello world'.gender: 'male'.children: [{name: 'hi, my son'.gender: 'male'.children: [{name: 'hi, my grandson 😀'.gender: 'male',}]}]}const user = fetchUser()

console.log(user? .children? .0]? .children? .0]? .name ??'Undefined')
  
// => hi, my grandson 😀
  
Copy the code

reference

  • MDN Optional Chaining

  • tc39