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.