Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

JS has many tricks to make code leaner and simpler. Today I’m going to share 4 tips that can greatly reduce the amount of code and development time in your daily work.

Short circuit judge

Use this method when only simple if conditions are required

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

if(x === 0){
  foo()
}
Copy the code

The same if function is implemented 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()
Copy the code

You can also add more if conditions, but this also increases the complexity of the statement, and more than two conditions are not recommended.

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

x === 0 && y === 0 && foo()
Copy the code

Optional chain operator (?)

We often determine if there is a key in a JS object, because sometimes we are not sure if the data returned by the background API is correct.

FirstName = firstName; firstName = firstName; user.name.firstName = firstName; firstName = firstName; Two layers of if judgments need to be nested.

let user = {
  name : {
    firstName : 'Aufu Koos'}}if(user.name){
  if(user.name.firstName){
    console.log('User object contains firstName field')}}Copy the code

That’s when we can use, right? If user.name does not exist, it will return false, so use a layer of judgment directly

let user = {
  name : {
    firstName : 'Aufu Koos'}}if(user.name?.firstName){
  console.log('User object contains firstName field')}Copy the code

Null-value merge operator (??)

Ternary operators are shorter than if/else operators. If the logic is simple, it is easy to use.

For example,

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

console.log(foo())
Copy the code

First use? Operator to check whether it exists, return if it does, false if it does not, and enter the following logic

Use?? Algorithms make code more compact

let user = {
  name : {
    firstName : 'Aufu Koos'}}let foo = () = > {
  return user.name?.firstName ?? 
  'firstName does not exist '
}
  
console.log(foo())
Copy the code

Return terminates the 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())
Copy the code

This if else nesting simplifies code by removing the else condition, since the return statement terminates code execution and returns 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())
Copy the code

conclusion

Good code may not need to be short, but readability must be prioritized over brevity. Because it’s very difficult for someone else to maintain the code, it takes a lot of time to read it.

Think the article is good, welcome to pay attention to the public number (click attention), update a useful content every day.