JS 4 super practical tips to improve development efficiency

1. Short circuit judgment

This method can be used when only a simple if condition is needed

let x = 0;
let foo = () => console.log('executed');

if(x === 0){
  foo()
}

The same if function can be achieved by using the && operator. If the condition before && is false , the code after && will not be executed.

let x = 0;
let foo = () => console.log('executed');

x === 0 && foo()

You can also add more if conditions, but this will also increase the complexity of the statement, and it is not recommended to have more than 2 conditions.

let x = 0;
let y = 0;
let foo = () => console.log('executed');

x === 0 && y === 0 && foo()

2. Optional Chaining Operator (?)

We often check whether a key exists in a JS object, because sometimes we are not sure whether the data returned by the background API is correct.

user object contains an object with the attribute name . name object has an attribute firstName . If user.name.firstName is used for direct judgment, an error will be reported if the name attribute does not exist. Therefore, before making the judgment, it is also necessary to determine whether user.name exists, which requires two layers of nested if judgments.

let user = {
  name : {
    firstName : 'Aofukaosi'
  }
}

if(user.name){
  if(user.name.firstName){
    console.log('user object contains firstName field')
  }
}

At this time, we can use the ? operator to simplify the operation. If user.name does not exist, it will also return false , so we can directly use one layer of judgment.

let user = {
  name : {
    firstName : 'Aofukaosi'
  }
}

if(user.name?.firstName){
  console.log('user object contains firstName field')
}

3. Null coalescing operator (??)

Compared to if/else, the ternary operator is much shorter. If the logic is simple, it is convenient to use.

For example:

let user = {
  name : {
    firstName : 'Aofukaosi'
  }
}

let foo = () => {
  return user.name?.firstName ? 
    user.name.firstName : 
    'firstName does not exist'
}

console.log(foo())

First, use the ? operator to determine whether it exists. If it exists, it returns false. If it does not exist, it returns false. Then proceed to the following logic.

Use ?? algorithm to make the code more concise

let user = {
  name : {
    firstName : 'Aofukaosi'
  }
}

let foo = () => {
  return user.name?.firstName ?? 
  'firstName does not exist'
}
  
console.log(foo())

4. return termination function

The following function determines the value of x, using a lot of if else nesting

let x = 1;
let foo = () => {
  if(x < 1){
    return 'x is less than 1'
  } else {
    if(x > 1){
      return 'x is greater than 1'
    }else{
      return 'x is equal to 1'
    }
  }
}

console.log(foo())

This if else nesting can simplify the code by removing the else condition because the return statement will terminate the code execution and return to the function.

let x = 1;
let foo = () => {
  if(x < 1){
    return 'x is less than 1'
  }
  if(x > 1){
    return 'x is greater than'
  }
  return 'x is equal to 1'
}

console.log(foo())

This concludes this article about 4 super practical JS tips to improve development efficiency. For more related 4 practical JS tips to improve development efficiency, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!