Share some tips on using JavaScript operators

In the development process of ECMAScript, there will be many functional updates, such as destruction, arrow functions, and modules. They will greatly change the way JavaScript is written. Some people may like it and some may not, but like every new feature, we will eventually get used to them. The new version of ECMAScript introduces three new logical assignment operators: the null operator, the AND operator, and the OR operator. The emergence of these operators is also to make our code cleaner and more concise. Here are some elegant JavaScript operator usage tips.

1. Optional chaining operator [? .】

The Optional Chaining Operator is at stage 4 of the ES2020 proposal, so it should be added to the spec. It changes the way you access internal properties of an object, especially deeply nested properties. It's also available as a feature in TypeScript 3.7+.

I believe that most of the friends who develop front-ends will encounter null and undefined properties. The dynamic nature of the JS language makes it impossible not to encounter them. Especially when dealing with nested objects, the following code is very common:

if (data && data.children && data.children[0] && data.children[0].title) {
    // I have a title!
}

The above code is for an API response where I have to parse the JSON to make sure the name exists. However, you might run into situations like this when your objects have optional properties or some configuration objects have dynamic mappings of certain values, where you need to check a lot of boundary conditions.

At this point, if we use the optional chaining operator, everything becomes even easier. It checks nested properties for us without having to search the ladder explicitly. All we have to do is use the “?” operator after the property we want to check for null values. We can use this operator as many times as we want in an expression, and it will return early if any term is undefined.

For static properties usage is:

object?.property

For dynamic properties change it to:

object?.[expression] 

The above code can be simplified to:

let title = data?.children?.[0]?.title;

Then, if we have:

let data;
console.log(data?.children?.[0]?.title) // undefined

data = {children: [{title:'codercao'}]}
console.log(data?.children?.[0]?.title) // codercao

Isn’t it easier to write like this? Since the operator terminates as soon as it hits a null value, you can also use it to conditionally call methods or apply conditional logic.

const conditionalProperty = null;
let index = 0;

console.log(conditionalProperty?.[index++]); // undefined
console.log(index); // 0

You can write the method call like this:

object.runsOnlyIfMethodExists?.()

For example, if we call parent.getTitle() directly on the parent object below, we will get an error message: Uncaught TypeError: parent.getTitle is not a function, and parent.getTitle?.() will terminate without executing.

let parent = {
    name: "parent",
    friends: ["p1", "p2", "p3"],
    getName: function() {
      console.log(this.name)
    }
  };
  
  parent.getName?.() // parent
  parent.getTitle?.() //Will not execute

Use with invalid merge

Provides a way to handle undefined or provide default values ​​for null values ​​and expressions. We can use the ?? operator to provide a default value for an expression

console.log(undefined ?? 'codercao'); // codercao

So, you can use the void coalescing operator in conjunction with the optional chaining operator to provide a default value if the property does not exist.

let title = data?.children?.[0]?.title ?? 'codercao';
console.log(title); // codercao

2. Logical empty assignment (?? =)

expr1 ??= expr2

The logical null operator assigns a value to expr1 only if it is null (null or undefined), as in:

x ??= y

might look equivalent to:

x = x ?? y;

But that’s not the case! There is a subtle difference.

The null coalescing operator (??) operates from left to right and short-circuits if x is not null. Therefore, if x is not null or undefined, the expression y is never evaluated. Therefore, if y is a function, it will not be called at all. Therefore, this logical assignment operator is equivalent to

x ?? (x = y);

3. Logical or assignment (|| =)

This logical assignment operator assigns a value only if the left-hand expression is a falsy value. Falsy is different from null because falsy can be any value: false, 0, "", null, undefined, and NaN, etc.

grammar

x ||= y

Equivalent to

x || (x = y)

This is useful in situations where we want to preserve the existing value if it does not exist, otherwise we want to assign a default value to it. For example, if there is no data in the search request, we want to set the inner HTML of the element to a default value. Otherwise, we want to display the existing list. This way we avoid unnecessary updates and any side effects like parsing, re-rendering, losing focus, etc. We can simply use this operator to update HTML using JavaScript:

document.getElementById('search').innerHTML ||= '<i>No posts found matching this search.</i>'

4. Logical AND assignment (&& =)

As you may have guessed, this logical assignment operator only assigns a value if the left-hand side is true. therefore:

x &&= y

Equivalent to

x && (x = y)

at last

This time, I will share some elegant JavaScript operator usage tips, focusing on the use of optional chaining operators, which allows us to easily access nested properties without having to write a lot of code in our examples. IE doesn't support it though, so if you need to support that or older browsers you might need to add a Babel plugin. For Node.js, you need to upgrade to Node 14 LTS version for this as 12.x does not support it.

If you have any elegant JavaScript operator usage tips, please feel free to share them in the comments section.

The above is the detailed content of sharing several JavaScript operator usage tips. For more information on the use of JavaScript operators, please pay attention to other related articles on 123WORDPRESS.COM!