JavaScript Tricks and Tips (Extremely Useful)

In this post, you’ll learn extremely useful JavaScript tricks and tips. As you know, JavaScript has a bunch of tricks and tips to complete both easiest and challenging tasks. In these articles, all tricks help you to write reduce the number of code and help you to optimize code quality.

JavaScript Tricks and Tips

1. Compare Value Use Strict Equal

As like other programming languages, if you have to compare both values using == operator, in JavaScript you may find a string and number they are equal. However, it is work strange.

17 == "17"
>> true

However, if you want to compare both values along with their data type, it is better to use strict equal operator ===.

17 === "17"
>> false

2. Create Unique Values of an Array

Obtain an array of unique values easily,

var j = [...new Set([1, 2, 3, 4, 5, 5, 5, 4])]
>> [1, 2, 3, 4, 5]

3. Creating Arrays

In JavaScript, You can create undefined array values by following tricks,

new Array(3)
>> [empty × 3]

Array.from({length: 3})
>> [undefined, undefined, undefined]

[...new Array(3)]
>> [undefined, undefined, undefined]

Using the following tricks, you can create an array with arbitrary values,

var d = []; for (let i=0; i<3; i++) d.push(0)
>> [0, 0, 0]

new Array(3).fill(0)
>> [0, 0, 0]

Array.from({length: 3}, () => ({}))
>> [{…}, {…}, {…}]

Create integers range values of array,

Array.from({length: 3}, (x, i) => i)
>> [0, 1, 2]

[...new Array(3).keys()]
>> [0, 1, 2]

4. Create Empty Objects

In JavaScript, you can create an empty object with has a __proto__ type, constructor, hasOwnProperty and other object methods.

Object.create({});
>>  __proto__:
        __proto__:
            constructor: ƒ Object()
            hasOwnProperty: ƒ hasOwnProperty()
            isPrototypeOf: ƒ isPrototypeOf()
            propertyIsEnumerable: ƒ propertyIsEnumerable()
            toLocaleString: ƒ toLocaleString()
            toString: ƒ toString()
            valueOf: ƒ valueOf()
            __defineGetter__: ƒ __defineGetter__()
            __defineSetter__: ƒ __defineSetter__()
            __lookupGetter__: ƒ __lookupGetter__()
            __lookupSetter__: ƒ __lookupSetter__()
            get __proto__: ƒ __proto__()
            set __proto__: ƒ __proto__()

5. Use Comma Operators

In JavaScript, comma operators are rarely used but often useful. It is used to specify more than one expression where JavaScript expects only one.

var result = [], n = 0, a = 0, b = 1, next;
 
while(n++ < 8) {
    next = a + b;
    b = (a = b, next)
    result.push(b);
}

result
>> [1, 2, 3, 5, 8, 13, 21, 34]

6. Store array.length in the loop

This JavaScript tricks a huge impact on the performance when processing large arrays iteration. If you work with small sized arrays, it’s fine to use.

var array = [1, 2, 3, 4, 5, 6, 7, 8];
for (var i = 0; i < array.length; i++) {  
    console.log(array[i]);
}

However, if you iterate large arrays, this code calculates the size of the array in every iteration of the loop, and it impacts on performance. To avoid this impact, you can store array.length in a variable and use it while iterating an array.

var array = [1, 2, 3, 4, 5, 6, 7, 8];
for (var i = 0, length = array.length; i < length; i++) {  
    console.log(array[i]);
}

7. Merging Arrays

You can combine two arrays using Array.concat() function,

var array1 = [1, 2, 3, 4, 5];  
var array2 = [6, 7, 8, 9, 10];  
array1.concat(array2);
>> [1,2,3,4,5,6];

Above using Array.concat() function is not suitable to merge large arrays because it’s creating new array. So It’s better to use Array.push.apply(array1, array2) function, it merges the second array in the first array and saves memory.

var array1 = [1, 2, 3, 4, 5];  
var array2 = [6, 7, 8, 9, 10];  
array1.push.apply(array1, array2);
>> [1,2,3,4,5,6];

8. Merging Objects

You can combine more than two objects using the following tricks,

var from = {city: 'London', country: 'England' };
var person = {firstName: 'John', lastName: 'Snow'};
var looks = {hair: 'Black', eyes: 'black'};

var combine = {...from, ...person, ...looks};

>> {city: "London", country: "England", eyes: "black", firstName: "John", hair: "Black", lastName: "Snow"}

How to declare JavaScript variables and constants. What’s the difference between the var keyword and let keyword in JavaScript. You can refer to this article and this article.