• Janarthanan Soundararajan

Learn JavaScript Tips & Tricks.

Updated: Sep 1

Welcome to another JavaScript blog post. In this article, we are going to look at something interesting to learn. I am going to share some of the useful JavaScript tips & tricks; I hope this will help to improve your productivity. I may miss any important tips. Please mention in the comment section if I missed any useful tips.


Okay, Let's get started!




1. Use "===" for logical comparision.

I think I don't need to give more explanation for triple equal to logical operation(===). The "==" will only compare the values. We need to use "===" operator to compare the type and value of the variables. I recommend using "===" for most cases, which is safer than "==" operator.

"73" == 73
// true

"73" === 73
// false

0 == false
// true

0 === false
// false

null == undefined
// true

null === undefined
// false

typeof null
// 'object'

typeof undefined
// 'undefined'
The type of the 'null' is an 'object'.


2. Convert Values to Boolean

We can use the Boolean function to convert the value to boolean, or we can use the "!" operator.

let a = 0

Boolean(a)
// false

!!a
// false

let b = "JavaScript"

Boolean(b)
// true

!!b
// true

let c = ""

Boolean(c)
// false

!!c
// false

3. Convert string to Number

Like the conversion of value to boolean, JavaScript has a Number function to convert the string to a number. Otherwise, we can use arithmetic "+" and "-" operator.

let value_1 = "100"

typeof value_1
// 'string'

let num_1 = Number(value_1)

num_1
// 100

typeof num_1
// 'number'

let num_2 = +value_1

num_2
// 100

typeof num_2
// 'number'

4. Remove Duplicate in an Array

Sometimes we need to remove the elements that occur more than one time in an array. It is easy to remove the duplicate elements in modern JavaScript.

let array_1 = [1, 2, 2, 3, 3, 3, 4, 5, 6, 7, 7, 8]

[...new Set(array_1)]
// [ 
//    1, 2, 3, 4,
//    5, 6, 7, 8
// ]


5. Exponential Operator

We can use the exponential operator(**) to find the square values.

4**2
// 16

8**3
// 512


6. Function Calls Itself

In JavaScript, we can call the function using the self calling syntax instead of defining the function with name and calling it using the name of the function.

(function() {
    let a = 10
    let b = 10
    
    console.log(a + b)
})()
// 20

// ---- or -----

(() => {
    let a = 10
    let b = 10
    
    console.log(a + b)
})()
// 20

7. Using Spread Operator

The spread operator is one of the useful features to do multiple kinds of tasks. We can do utility operations in Array and Object using the spread operator.

let arr_1 = [2, 3, 4]
let arr_3 = [8, 9]
let obj_1 = {one: 1, two: 2}

// copy array and object
let arr_2 = [ ...arr_1 ]
let obj_2 = { ...obj_1 }

// Append and Prepend one or more than one elements in array
[...arr_1, 5, 6]
// [2, 3, 4, 5, 6]

[1, ...arr_1]
// [1, 2, 3, 4]

// Add value in object
{ ...obj_1, three: 3 }
// { one: 1, two: 2, three: 3 }

// Modify value for particular key in object
{ ...obj_1, two: 4 }
// { one: 1, two: 4 }

// Join arrays
[...arr_1, ...arr_3 ]
// [2, 3, 4, 8, 9]

8. Deep Copy Using JSON.parse/stringify

We can use JSON.parse/stringify to deep copy the object. But it will have data loss if the object has function, infinity, and date.

let obj_1 = { one: 1, two: 2, three: { one: 1 } }
let obj_2 = { ...obj_1 }

obj_1
// { one: 1, two: 2, three: { one: 1 } }

obj_2
// { one: 1, two: 2, three: { one: 1 } }

obj_2.three.one = 4

obj_2
// { one: 1, two: 2, three: { one: 4 } }

obj_1
// { one: 1, two: 2, three: { one: 4 } }

In the above example, you can see copying using the spread operator didn't make the deep copy. When we change the nested object value in "obj_2" it will also change the nested object values in "obj_1". Now we are going to copy using the JSON.parse/stringify and check the results.


let obj_1 = { one: 1, two: 2, three: { one: 1 } }
let obj_2 = JSON.parse(JSON.stringify(obj_1))

obj_1
// { one: 1, two: 2, three: { one: 1 } }

obj_2
// { one: 1, two: 2, three: { one: 1 } }

obj_2.three.one = 4

obj_2
// { one: 1, two: 2, three: { one: 4 } }

obj_1
// { one: 1, two: 2, three: { one: 1 } }

Now it doesn't affect the nested object of "obj_1".


9. Effective Use of Logical Operators

We can use logical operators such as "&&" and "||" in a smart way in coding. See the following example.

let show_name = true

if (show_name) {
    console.log("Techaaroorian")
}
// Techaaroorian

show_name && console.log("Techaaroorian")
// Techaaroorian

let val_1 = ""
let val_2 = ""
let val_3 = "Techaaroorian"

let name = val_1 || val_2 || val_3

name
// Techaaroorian

10. Optional Chaining

Optional chaining helps to prevent writing nested conditions to handle the undefined in JavaScript. It is a new syntax for JavaScript.

let data = {
    fruits: {
        favoriteFruit: "Orange"
    }
}

// before
data.fruits ? data.fruits.favoriteFruit ? 
    console.log(data.fruits.favoriteFruit) : null : null;
// Orange

// after
data?.fruits?.favoriteFruit ? 
    console.log(data.fruits.favoriteFruit) : null;

To learn more about conditional operators check the following blog post: https://www.techaaroorian.com/post/smart-way-to-handle-conditional-statement-in-javascript



©2020 by Techaaroorian.

  • Pinterest
  • Twitter Social Icon
  • Facebook
  • YouTube