7 JavaScript Tips and Tricks you must Know!

JavaScript is the most used language worldwide. It can make almost everything: Websites, Servers, Android/IOS applications, Desktop applications, IoT, Smart Watch OS, and much more.

It’s simple to get started with, but can get a little trickier, as it’s not like other general-purpose programming languages.

Today, we’ll see 7 JavaScript tips and tricks that will help you to write a better, more efficient, and fast JavaScript. So, let’s get started.

#7 Destructuring

const person = {
    name: "Pavan",
    age: 21,
//nested
    eduction: {
        college: "MIT ADT SOE"
    }
}

// normal way to extract
const name = person.name;
const age = person.age;

// with destructuring
const { name, age } = person;
console.log(name, age);  //Pavan 21

//destructuring nested property
const { education: {college} } = person;
console.log(college)  //MIT ADT SOE

You can use curly braces before the assignment operator and extract values using the key from the object.

To extract the nested properties, you can first define the property and then the nested key to get the value.

//destructuring nested property
const { education: {college} } = person;
console.log(college)  //MIT ADT SOE

Also check out,
How to handle APIs in React

#6 Short-Circuiting Conditionals

if (isValid) {
  login();
}

//using AND - &&
isValid && login();

Instead of doing the traditional if-else, you can just the && operator, which returns a false value if has, and if it’s true continues with the login function.

#5 Truncating Arrays

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

//destructive approach 
array.length = 4;
console.log(array) //[ 0, 1, 2, 3 ]

We can simply truncate the array to any desired size by assigning the value of array.length. This is a destructive approach to truncating an array.

For faster runtime, you can use a JavaScript default method slice method.

//faster runtime
array = array.slice(0, 4);
console.log(array) //[ 0, 1, 2, 3 ]

#4 Getting the Last Item/s of an Array

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)) // [ 9 ]

To get the last element from an array, you can again use .slicemethod, but here you need to pass just -1, which will return you the last item in an array.

Now, if you want to get more items from the last, you can add the number of items you want in negative.

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-2)) // [ 8, 9 ]

#3 Format JSON in console.logs

const person = {
    name: "Pavan",
    age: 21
}

console.log(JSON.stringify(person))
// {"name":"Pavan","age":21}

You can use JSON.stringify, which is provided by JavaScript by default to log JSON formats. But, it is not much readable if it’s huge data.

To make it prettier using some parameters to stringify.

console.log(JSON.stringify(person, null, "\t"))
// {
//     "name": "Pavan",
//     "age": 21
// }

#2 Exponential Operator for Powers

To get the powers of any numbers you can use the .pow JavaScript default Math function.

console.log(Math.pow(2, 3))
//8

But ES7 launched a new shorthand method to get power, you can use double asterisks **.

console.log(2 ** 3)
//8

#1 Filtering Unique values from an Array

const array = [1, 1, 2, 3, 4, 6, 7, 2];

const uniqueArray = [...new Set(array)];
console.log(uniqueArray)
// [ 1, 2, 3, 4, 6, 7 ]

To filter out unique values by using …new Set(), a class-based method. Which takes the array and returns a new array with unique items.

These were the few JavaScript tips and tricks that might help you to write better, fast, and more efficient code. I hope these were helpful, if they were, make sure to let us know in the comments.