Useful JavaScript Tips and Tricks

Useful JavaScript Tips and Tricks

This article aims to show some tips and tricks that can be used in your code to make it more effective and optimized.

1.Difference b/w === and ==

The == (or !=) operator performs           an automatic type conversion if needed. The === (or !==) operator will not perform any conversion. It compares the value and the type, which could be considered faster than ==.
[10] === 10      // is false
[10]  == 10       // is true
’10’ == 10        // is true
’10’ === 10      // is false
[]   == 0         // is true
 ” == false      // is true   but true == “a” // is false
 ” ===   false // is false

2. Merge Objects

The need to merge multiple objects in JavaScript has been around forever,  
especially as we started creating classes and widgets with options:
const person = { name: ‘David Walsh’, gender: ‘Male’ };
const tools = { computer: ‘Mac’, editor: ‘Atom’ };
const attributes = { handsomeness: ‘Extreme’, hair: ‘Brown’, eyes: ‘Blue’ };
const summary = {…person, …tools, …attributes};


/*
Object {
“computer”: “Mac”,
“editor”: “Atom”,
 “eyes”: “Blue”,
“gender”: “Male”,
“hair”: “Brown”,
“handsomeness”: “Extreme”,
“name”: “David Walsh”,
}
*/

3. Multiple conditions in an if statement

If you have to deal with checking a large number of conditions, you can use

  includes.if([“invoice”, “payment”, “pending”].includes(status)) { }

4. Check the code performance with    performance.now()

If you have a portion of code that needs to run really fast, it can be    inspected with performance.now() function. Unlike regular timestamps created with Date.now() the method performance.now() generates high resolution timestamp.
/**
 * Check the performance with * performance.now()
 * */ 
var startedAt = performance.now();
// Execute the code
 for (let i = 0; i < 10 ” 4; i..){
  // do nothing
 } 
// Get the final timestamp. 
var endedAt = performance.now(); 
// Calculate the time taken 
console.log( “Your code took ” + (endedAt – startedAt) + ” milliseconds to execute.”);

5. Remove duplicates from an array

It’s a very popular interview question about Javascript arrays, how to extract the unique values from Javascript array. Here is a quick and easy solution for this problem, you can use a new Set() for this purpose. And I would like to show you two possible ways to do it, one with .from() method and second with spread operator (…).
var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];


// First method
var uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits); // returns [“banana”, “apple”, “orange”, “watermelon”, “grape”]
// Second method
var uniqueFruits2 = […new Set(fruits)];                

console.log(uniqueFruits2); // returns [“banana”, “apple”, “orange”, “watermelon”, “grape”]

Delete elements from an array

Don’t use delete to remove an item from the array. Use splice instead of using delete to delete an item from an array. 
Using delete replaces the item with undefined instead of removing it from the array.
Instead of…
var items = [12, 548 ,’a’ , 2 , 5478 , ‘foo’ , 8852, , ‘Doe’ ,2154 , 119 ]; 
items.length; // return 11 
delete items[3]; // return true
items.length; // return 11 
  /* items will be equal to [12, 548, “a”, undefined × 1, 5478, “foo”, 8852, undefined × 1, “Doe”, 2154,       119] */


Use…
var items = [12, 548 ,’a’ , 2 , 5478 , ‘foo’ , 8852, , ‘Doe’ ,2154 , 119 ]; 
items.length; // return 11 
items.splice(3,1) ; 
items.length; // return 10 
/* items will be equal to [12, 548, “a”, 5478, “foo”, 8852, undefined × 1, “Doe”, 2154,       119] */
The delete method should be used to delete an object property.

Leave a Reply

Your email address will not be published. Required fields are marked *