This figure is from network intrusion and deletion

34 JavaScript Optimization Techniques you Need to know

Life as a developer is always learning new things, and keeping up with changes shouldn’t be any harder than it is now, my motivation is to introduce all the JavaScript best practices, such as shorthand and functionality, that we as front-end developers must know to make our lives easier in 2021. You may have been in JavaScript development for a long time, but sometimes you may not be using the latest features that solve problems without fixing them or writing some extra code. These techniques can help you write clean and optimized JavaScript code. In addition, these topics can help you prepare for your JavaScript interviews in 2021. Here, I’ll offer a new series on shorthand techniques that can help you write cleaner and better JavaScript code. Here’s a cheat sheet of JavaScript coding you need to know in 2021. 1. We can store multiple values in an array if there are multiple conditions, and we can use the array include method. //longhand if (x === ‘abc’ || x === ‘def’ || x === ‘ghi’ || x ===’jkl’) { //logic} //shorthand if ([‘abc’, ‘def’, ‘ghi’, ‘JKL]. Includes (x)) {/ / logic} 2, If true… Else Shorthand This is a bigger shortcut when we have if-else conditions that do not contain larger logic. We can implement this shorthand 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); We can do this when we have nested conditions. let x = 300,test2 = (x > 100) ? ‘greater 100’ : (x < 50) ? ‘less 50’ : ‘between 50 and 100’; console.log(test2); This abbreviation is used when we want to declare two variables that have the same value or type. //Longhand let test1; let test2 = 1; //Shorthand let test1, test2 = 1; When we do create a new variable, sometimes we want to check that the variable referenced for its value is null or undefined. JavaScript does have very good shortcuts to these things. // Longhand if (test1 ! == null || test1 ! == undefined || test1 ! == ”) { let test2 = test1; } // Shorthandlet test2 = test1 || ”; 5, null check and assign a default value let test1 = null, test2 = test1 | | ‘. console.log(“null check”, test2); / / the output will be “” 6, let check and assign a default value undefined values test1 = undefined, test2 = test1 | | ‘. console.log(“undefined check”, test2); / / the output will be “normal” check the let test1 = ‘test’, test2 = test1 | | ‘. console.log(test2); // output: ‘test’

Void merge operator?? If the left side is null or undefined, the value on the right side 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: 0Copy the code

Assigning values to Multiple Variables This shorthand technique is useful when we are dealing with multiple variables and want to assign different values to different variables. Deconstruct. //Longhand let test1, test2, test3; test1 = 1; test2 = 2; test3 = 3; //Shorthand let [test1, test2, test3] = [1, 2, 3]; We deal with a lot of arithmetic operators in our programming. This is one of the useful techniques for assigning operators to JavaScript variables. // Longhand test1 = test1 + 1; test2 = test2 – 1; test3 = test3 * 20; // Shorthand test1++; test2–; test3 *= 20; 9. This is one of the most common forms of shorthand we all use, if there is one, but it’s still worth mentioning. // Longhand if (test1 === true) // Dictate if (test1) note: if test1 has any value, it will enter logic after the if loop. This operator is usually used for null or undefined checks. The && operator can be used if the function is called only if the variable is true. //Longhand if (test1) { callMethod(); } //Shorthand test1 && callMethod(); This is one of the most common shorthand techniques for iteration. // Longhand for (var i = 0; i < testData.length; i++) // Shorthand for (let i in testData) or for (let i of testData)

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

We can also use comparisons in return statements. It will avoid our five lines of code and reduce them 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

Longhand function add(a, b) {return a + b; } //Shorthand const add = (a, b) => a + b; More examples. function callMe(name) { console.log(‘Hello’, name); } callMe = name => console.log(‘Hello’, name); Short function calls We can use ternary operators to implement these functions. // 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)(); We can store a condition in a key-value object and use it according to the condition. // Longhand switch (data) { case 1: test1(); break; case 2: test2(); break; case 3: test(); break; // And so on… } // Shorthand var data = { 1: test1, 2: test2, 3: test}; data[something] && datasomething; Using the arrow function, we can return the value directly without having to write a return statement. //longhand Function calculate(diameter) { return Math.PI * diameter } //shorthand calculate = diameter => ( Math.PI * diameter;) Var I = 0; var I = 0; i < 10000; i++) { … } // Shorthand for (var i = 0; i < 1e4; Longhand function add(test1, test2) {if (test1 === undefined) test1 = 1; If (test2 === undefined) test2 = 2; return test1 + test2; } //shorthand add = (test1 = 1, test2 = 2) => (test1 + test2); Joining arrays using concat const data = [1, 2, 3]; const test = [4 ,5 , 6].concat(data); //shorthand // joining arrays const data = [1, 2, 3]; const test = [4 ,5 , 6, …data]; console.log(test); [4, 5, 6, 1, 2, 3] We can also use propagation operators for cloning. //longhand // cloning arrays const test1 = [1, 2, 3]; const test2 = test1.slice()//shorthand // cloning arraysconst test1 = [1, 2, 3]; const test2 = […test1]; If you’re tired of using + to concatenate multiple variables in a single string, this shorthand will eliminate your headache. //longhand const welcome = ‘Hi ‘ + test1 + ‘ ‘ + test2 + ‘.’ //shorthand const welcome = Hi ${test1} ${test2}; When dealing with multi-line strings in code, we can use the following functions: //longhand const data = ‘abc abc abc abc abc abc\n\t’ + ‘test test,test test test test\n\t’ //shorthand const data = Let test1 = ‘a’; let test1 = ‘a’; let test2 = ‘b’; //Longhand let obj = {test1: test1, test2: test2}; //Shorthand let obj = {test1, test2}; Longhand let test1 = parseInt(‘123’); Longhand let test1 = parseInt(‘123’); Let test2 = parseFloat (‘ 12.3 ‘); //Shorthand let test1 = +’123’; Let test2 = + ‘12.3’; //longhand const test1 = this.data.test1; Const test2 = this.data.test2; const test2 = this.data.test3; //shorthand const { test1, test2, test3 } = this.data; The find method is really useful when we do have an Array of objects and we want to look up specific objects based on object properties. const data = [ { type: ‘test1’, name: ‘abc’ }, { type: ‘test2’, name: ‘cde’ }, { type: ‘test1’, name: ‘fgh’ } ] function findtest1(name) { for (let i = 0; i < data.length; ++i) { if (data[i].type === ‘test1’ && data[i].name === name){ return data[i]; } } } //Shorthand filteredData = data.find( data => data.type === ‘test1’ && data.name === ‘fgh’ ); console.log(filteredData); // { type: ‘test1’, name: ‘fgh’ }

If we have code to check the type and need to call different methods based on the type, we can choose to use multiple else Ifs or switch, but what if our shorthand is better than that? // Longhand if (type === ‘test1’) { test1(); }else if (type === ‘test2’) { test2(); }else if (type === ‘test3’) { test3(); }else if (type === ‘test4’) { test4(); } else { throw new Error(‘Invalid value ‘ + type); }// Shorthand var types = { test1: test1, test2: test2, test3: test3, test4: test4 }; var func = types[type]; (! func) && throw new Error(‘Invalid value ‘ + type); func(); We do use the indexOf () method when we iterate through an array to find a particular value. What if we found a better way? Let’s look at this example. //longhand if(arr.indexOf(item) > -1) { // item found } if(arr.indexOf(item) === -1) { // item not found} //shorthand if(~arr.indexOf(item)) { // item found} if(! ~ arr.indexof (item)) {// item not found} The bitbit (~) operator will return a true value that is not -1. Inverse is like doing! As simple as ~. If (arr.includes(item)) {// true if the item found} 28, Object.entries () This helps to convert objects into an array of objects. const data = { test1: ‘abc’, test2: ‘cde’, test3: ‘efg’ }; const arr = Object.entries(data); console.log(arr); /** Output:[ [ ‘test1’, ‘abc’ ], [ ‘test2’, ‘cde’ ], [ ‘test3’, ‘efg’ ]]**/

29, Object.values () this is also a new feature introduced in ES8 and performs a similar function to object.entries (), but without the key part: const data = {test1: ‘ABC ‘, test2: ‘cde’}; const arr = Object.values(data); console.log(arr); /** Output:[ ‘abc’, ‘cde’]**/

30, Double Bitwise Shorthand (Double NOT Bitwise operator method only applies to 32-bit integers) // longhandmath. floor(1.9) === 1 // true // / Dictate 1.9 === 1 // true Repeating a string multiple times to repeat the same characters over and over again, we could use a for loop and add them to the same loop, but what if we had a shorthand method? //longhand let test = ”; for(let i = 0; i < 5; i ++) { test += ‘test ‘; } console.log(str); // test test test test test //shorthand ‘test ‘.repeat(5); Const arr = [1, 2, 3]; Math. Max (… arr); / / 3 math. Min (… arr); Let STR = ‘ABC ‘; //Longhand str.charAt(2); // c//Shorthand Note: If we know the index of the array then we can directly use index insted of character.If we are not sure about index it can throw undefinedstr[2]; // longhandmath.pow (2,3); // longhandmath.pow (2,3); // 8//shorthand2**3 // 8~~