Introduction to JavaScript conditional access attributes and arrow functions

1. Conditional access attributes

?. is a new feature introduced in ES2020. It is a conditional property access operator. When you access a property value of an undefined variable, if you use the . operator, an error will be reported directly. If you use the conditional property access operator to access it, undefined will be returned.

See the example:

let book = {price:10,
            edition:10,
            name:"javascript"
}

console.log(book.page.num)

Direct error reporting:

TypeError: Cannot read property 'num' of undefined

Because the value of book.page undefined , undefined does not have any attribute value, an error will be reported.

If you are not sure whether a value is undefined or an object, in addition to using the if statement to judge, you can also directly use the conditional access operator to access a property. Even if the object being accessed is undefined , no error will be reported. Instead, it returns undefined

console.log(book.page?.num)

Output:

undefined

2. Introduction to Arrow Functions

Arrow function is a shorthand method for defining functions that appeared in ES6 , using => to separate the parameter list and the function body.

example:

let square = x=>x**2;

console.log(square(3))

Output:

9

The definition of this function is equivalent to the traditional function:

function square(x){
    return x**2
}

Arrow functions are often used to pass an unnamed function as a parameter to another function.

let nums = [1,2,3,4].map(x=>x*2)

console.log(nums)

Output:

[ 2, 4, 6, 8 ]

Arrow functions make the code look more concise.

If you use the traditional function keyword to define a function, it will seem a bit verbose.

nums = [1,2,3,4].map(function(x){return x*2})

console.log(nums)

If an arrow function has multiple parameters, they need to be enclosed in parentheses.

const add = (x,y)=>x+y;

console.log(add(1,2))

If the body of an arrow function has multiple statements, enclose the body in curly braces and use the return keyword to return the value.

const add = (x,y)=>{let tmp=x+y;return tmp};

console.log(add(1,2))

At this time, the function body of the arrow function is exactly the same as the function body format of the ordinary function definition. So arrow functions are concise and readable in simple single-line statements. Once the function body is too complex, using arrow functions to define it is not so readable.

This is the end of this article about JavaScript conditional access to properties and arrow functions. For more relevant JavaScript conditional access to properties and arrow functions, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!