Developers are always learning new things, and it shouldn’t be harder to keep up with these technological changes than it was before. My goal in writing this article is to introduce some JavaScript best practices that, as front-end developers, will make our lives a lot easier in 2021.

You may have been doing JavaScript development for a long time, but sometimes you may not be using the latest JavaScript features or tricks that can solve your problems without having to write extra code. They can help you write clean and optimized JavaScript code. Also, if you’re planning on going to an interview in 2021, check out this article.

1. If statements with multiple conditions

Place multiple values in an array and call the includes method of the array.

//longhand  
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {  
    //logic  
}  
//shorthand  
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {  
   //logic  
}
Copy the code

2. Simplify if true… else

For if-else conditions that do not contain large logic, you can use the following shortcut. We can achieve this simplification simply by using the ternary operator.

// Longhand  
let test: boolean;  
if (x > 100) {  
    test = true;  
} else {  
    test = false;  
}  
// Shorthand  
let test = (x > 10) ? true : false;  
//or we can use directly  
let test = x > 10;  
console.log(test);  

Copy the code

You can do this if you have nested conditions.

let x = 300,  
test2 = (x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';  
console.log(test2); // "greater than 100"
Copy the code

3. Declare variables

We use this shorthand when we want to declare two variables that have the same value or the same type.

//Longhand   
let test1;  
let test2 = 1;  
//Shorthand   
let test1, test2 = 1;
Copy the code

4. Check null, undefined, and null values

When we create a new variable, we sometimes want to check that the referenced variable is not null or undefined. JavaScript does have a nice shortcut for this kind of checking.

// Longhand if (test1 ! == null || test1 ! == undefined || test1 ! == '') { let test2 = test1; } // Shorthand let test2 = test1 || '';Copy the code

5. Null check and default assignment

let test1 = null,  
    test2 = test1 || '';  
console.log("null check", test2); // output will be ""
Copy the code

6. Undefined check and default assignment

let test1 = undefined,  
    test2 = test1 || '';  
console.log("undefined check", test2); // output will be ""  

Copy the code

General value check

let test1 = 'test',  
    test2 = test1 || '';  
console.log(test2); // output: 'test'  

Copy the code

In addition, for points 4, 5 and 6 above, you can use?? Operators.

If the left-hand value is null or undefined, the right-hand value is returned. By default, it returns the value on the left.

const test= null ?? 'default';  
console.log(test);  
// expected output: "default"  
const test1 = 0 ?? 2;  
console.log(test1);  
// expected output: 0
Copy the code

7. Assign values to multiple variables

This technique is useful when we want to assign values to multiple different variables.

//Longhand   
let test1, test2, test3;  
test1 = 1;  
test2 = 2;  
test3 = 3;  
//Shorthand   
let [test1, test2, test3] = [1, 2, 3];
Copy the code

8. Handy assignment operators

In programming, we deal with a large number of arithmetic operators. This is one of the useful tricks for JavaScript variable assignment operators.

// Longhand  
test1 = test1 + 1;  
test2 = test2 - 1;  
test3 = test3 * 20;  
// Shorthand  
test1++;  
test2--;  
test3 *= 20;
Copy the code

9. If Check whether the value exists

This is a common, easy technique that we all use, and it’s still worth mentioning here.

// Longhand if (test1 === true) or if (test1 ! == "") or if (test1 ! == null) // Shorthand //it will check empty string,null and undefined too if (test1)Copy the code

Note: If test1 has a value, the logic after if is performed. This operator is mainly used for null or undefinded checks.

10. The && operator for multiple criteria

If the function is called only when the variable is true, use the && operator.

//Longhand   
if (test1) {  
 callMethod();   
}   
//Shorthand   
test1 && callMethod();
Copy the code

11. For each loop

This is a common loop simplification technique.

// Longhand  
for (var i = 0; i < testData.length; i++)  
// Shorthand  
for (let i in testData) or  for (let i of testData)  

Copy the code

Iterate over each variable in the array.

function testData(element, index, array) {  
  console.log('test[' + index + '] = ' + element);  
}  
[11, 24, 32].forEach(testData);  
// logs: test[0] = 11, test[1] = 24, test[2] = 32  

Copy the code

12. Return after comparison

We can also use comparisons in return statements, which reduce five lines of code to one.

// Longhand let test; function checkReturn() { if (! (test === undefined)) { return test; } else { return callMe('test'); } } var data = checkReturn(); console.log(data); //output test function callMe(val) { console.log(val); } // Shorthand function checkReturn() { return test || callMe('test'); }Copy the code

Arrow function

//Longhand   
function add(a, b) {   
   return a + b;   
}   
//Shorthand   
const add = (a, b) => a + b;  

Copy the code

More examples:

function callMe(name) {  
  console.log('Hello', name);  
}  
callMe = name => console.log('Hello', name);  

Copy the code

14. Short function calls

We can use the ternary operator to implement multiple function calls.

// Longhand  
function test1() {  
  console.log('test1');  
};  
function test2() {  
  console.log('test2');  
};  
var test3 = 1;  
if (test3 == 1) {  
  test1();  
} else {  
  test2();  
}  
// Shorthand  
(test3 === 1? test1:test2)();  

Copy the code

The last

In order to help you better review the key knowledge and prepare for the interview more efficiently, the electronic draft of “Front-end Engineer Interview Manual” is specially organized.

Content includes HTML, CSS, JavaScript, ES6, computer networking, browsers, engineering, modularity, Node.js, frameworks, data structures, performance optimization, projects, etc. (The data in this paper are suitable for 0-2 years)

It includes questions asked by first-tier Internet companies such as Tencent, Bytedance, Xiaomi, Ali, Didi, Meituan, 58, Pindoduo, 360, Sina, Sohu and so on, covering the primary and intermediate front-end technology points.

Front end test summary

JavaScript

performance

linux

Front-end data summary

The full PDF is free to share, just like it,Just click here and get it for free.

I always think the technical interview is not an exam. You memorize the questions before the exam, and you are given a paper to answer and hand in.

First of all, technical interview is a process of knowing oneself and the gap between oneself and the outside world.

And, more importantly, technical interview is a two-way understanding process, to make them find the best in you, also want to try to find the best in each other, because he is likely to be after your colleagues and leadership, so, the interviewer asks: do you have any questions, don’t say no, going to try to understand his work, understand the team atmosphere.

Looking for a job is nothing more than to see three points: with what person, what to do, how much money, to give these three in their heart division of a proportion.

Finally, I wish you all can find your ideal home in this unfriendly environment