Amaze your friends with these Javascript Tricks

In this article, I will show some simple and amazing JavaScript tricks that you can use to improve your code.

Combine Multiple Objects

Consider you have three different objects:

const obj1 = {'a': 1, 'b': 2};
const obj2 = {'c': 3};
const obj3 = {'d': 4};

If we want an object to contain the combined properties of all these objects, we can do so with the simple code below:

const objCombined = {...obj1, ...obj2, ...obj3};

Logging objCombined will print the following value in the console:

const obj1 = {'a': 1, 'b': 2};
const obj2 = {'c': 3};
const obj3 = {'d': 4};

const objCombined = {...obj1, ...obj2, ...obj3};

> {a: 1, b: 2, c: 3, d: 4}

The  is the spread operator. You can read more about this in the MDN Web Docs

The object objCombined is a newly created object. Updating any value of obj1obj2, or obj3 will not affect the values of objCombined.

For nested objects, the references of the inner objects will be copied and will not create new ones. The spread syntax will copy all the properties of the object, but will only create a new object at the top level.

You can also combined objects using the Object.assign() method.

Inserting values in between an array

Consider you have the following array of integers:

const arr = [0, 1, 2, 3, 5, 6, 7, 8];

What if we want to insert the integer 4 at index 4 of the array?

We can simply do so by using the splice function in Array’s prototype. The syntax of the splice function is:

arr.splice(index, itemsToDelete, item1ToAdd, item2ToAdd, ...)

To insert the integer 4 at index 4, we write the code:

let arr = [0, 1, 2, 3, 5, 6, 7, 8];
arr.splice(4, 0, 4);
console.log('first:', arr)
> first: (9) [0, 1, 2, 3, 4, 5, 6, 7, 8]

To insert multiple integers at an index, we can also write:

let arr = [0, 1, 2, 3, 5, 6, 7, 8];
arr.splice(4, 0, 100, 101, 102);
console.log('second:', arr);
> second: (11) [0, 1, 2, 3, 100, 101, 102, 5, 6, 7, 8]

Using splice will mutate the original array, not create a new one.

Get the current timestamp

To get the current timestamp in JavaScript, you simply need to execute the following code:

var date = new Date();
> 1583470922336

This will give the timestamp for the date.

There is also a shortcut to get the current timestamp. or

Check if an object is an array

To check if an object is an array, you can call the isArray() method of the Array object.

let obj = {data: 1};
let arr = [1, 2, 3];

To check for an array, use the following code snippet:

Array.isArray(obj);  // false
> false
Array.isArray(arr);  // true
> true

Object destructuring

Consider you have the following object in JavaScript:

const user = {
    name: 'Frank',
    age: 35,
    followers: 2222,
    blogs: 12

We can directly get the variables for the object’s properties using the following syntax:

const { name, profile, followers } = user;
console.log(name);      // Frank
console.log(blogs);     // 12
console.log(followers); // 2222

After running the above statement, we will now have three different variables containing the object’s properties.

For this to work, the variable names on the left-hand side must match the key names of the object exactly.

The syntax is called Object Destructuring.

Rest parameter syntax

Did you know that you can create a function that accepts any number of arguments?

There is a special syntax called the rest parameter syntax to create such a function.

function sum(...values) {
sum(1, 2);
sum(1, 2, 3);
sum(1, 2, 3, 4);

Calling the sum functions will collect the values as an array of the parameters passed to the function.

This will print the following output.

[1, 2]
[1, 2, 3]
[1, 2, 3, 4]

We can also complete the sum function and make it calculate the sum of all the parameters passed to the function.

function sum(...values) {
    let sum = 0;
    for (let i = 0; i < values.length; i++) {
        sum += values[i];
    return sum;
console.log(sum(1, 2));
console.log(sum(1, 2, 3));
console.log(sum(1, 2, 3, 4));

This will print the output as:


Latest articles

How to do Destructuring in JavaScript

What is Destructuring? At its core, destructuring is the idea that we are pulling out values individually from a...

Writable Streams, Streams Piping, and Error Handling in Node.js

A Writable Stream A writable stream is a stream of data that is created to write some streaming data....

Here are Six Front-End Development Channels on YouTube

The Coding Train If you love programming then this is the...

Real World Use Cases for JavaScript Proxies

Introduction to Proxy In programming terms, a proxy is an entity that acts on behalf of some other entity....

Related articles

Leave a reply

Please enter your comment!
Please enter your name here