Muhammad Asim
The Crazy Programmer

The Crazy Programmer

Top 7 JavaScript Tips You Should Know!

Top 7 JavaScript Tips You Should Know!

Useful JavaScript Tips

Muhammad Asim's photo
Muhammad Asim
·Apr 26, 2021·

5 min read

As we all know, the JavaScript is changing swiftly, which is also providing different cool features. This article will give a glimpse of the top 7 valuable tips that JavaScript developers can use to make their code simple and easy to understand. There are several ways to write the code, and sometimes the developer knows about how to code smartly but couldn't manage that. Writing a clean and shorter code also needs knowledge with skills. So here is the list of some valuable tips that JavaScript developers can add to their knowledge and write clean code smartly.

1. Ternary Operator

So here comes the first tip which includes the ternary operator which is a conditional operator. The normal way is to use if-else statements for applying conditions that can be shorthand by using the ternary operator.

The normal way of writing conditional statements with if-else

let marks = 90

if(marks >= 90){
      console.log('Your grade is A+')
} else{
      console.log('Your grade is A')
}

A shorthand way to write the above code using ternary operator

let marks = 90;
marks >= 90 ? console.log('Your grade is A+') : console.log('Your grade is A')

2. Destructuring

Let say there is an object with multiple properties like name, age, gender, etc. To access the values of the properties from this object, the traditional way is object.propertyname. So if there are numbers of properties, the code of lines increases to get the values. To avoid this, destructuring can be used to avoid extra lines of code. See the example below.

// persons object
const person ={
     name: 'John Doe',
     age: 30,
     gender: 'male',
     address: {
          homeAddress: 'xyz'
     }
}

The normal way of getting values

const name = person.name
const age = person.age
const gender = person.gender
const address = person.address

With destructuring

const {name, age, gender} = person

// for nested address property
const {address: {homeAddress}} = person

3. Short-Circuit Conditions

The short circuit conditions include && and || operator. Let say there is an if statement that is calling a function if a user is logged in. In that case, && and operator can be used to avoid extra lines of code. See the example below

With normal if statements

if(isLoggedIn){
     gotoDashboard()
}

With short circuit && operator

isLoggedIn && gotoDashboard()

In the above statement if the value of isLoggedIn is false then it will return from here. And if the value is true it will proceed with executing the gotoDashboard() function.

In a similar way || can be used to assign the value to a variable on the basis of provided argument, instead of using if-else statements.

With If-else statement

const data = null
let result

if(data){
     result = data
} else{
     result = 'Data not available'
}

With short circuit || operator

const result = data || 'Data not available'

So in the above short circuit statement, if there is any value in data it will return to result or If data is empty the 'Data not available' will be returned to result.

4. Null Coalescing Operator ??

So now, suppose if there is a statement which result has to be shown if the given value is null, this can be easily achieved by using Null coalescing ??

null ?? 'Good Morning' // Good Morning
undefined ?? 'Good Morning' //Good Morning

Please note that this will only work for null and undefined values

false ?? 'Good Morning' // false
0 ?? 'Good Morning' // 0

In the above statements, the values are false and 0, which is not acceptable by the Null Coalescing Operator so the same value will be returned and this condition will never work for the true case.

5. Truncating Arrays

Let say there is an array that will be truncated

let array = [0, 1, 2, 3, 4, 5]

Now if the first three elements need to be truncated we can achieve this by following the normal way like

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

The length of the array is changed to three, when the array is printed it will always show the first three elements only. This is a destructive way to truncate an array.

To increase get the faster runtime, array can be truncated by using slice() method.

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

By using slice() method, it will start from the 0 index and will contain 3 elements.

6. Quick Power (ES7 exponential operator)

** is an exponential power operator provide with ES7 as a shorthand for the default Math.pow() method. Let's take a look at the example below

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

With ES7 exponential operator for power, the same can be achieved like this

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

7. Avoiding Multiple Conditions

So if there is a need run a part of the code on the basis of a conditional statement where the variable can have some specific value. If any of the values matched with the variable condition will return true and execute the code inside the conditional statement. To get a more clear picture lets have a look at the example.

By Using If statement

// following arrow function's way
const myFunction = (parameter) => {
     if(parameter === 'a' || parameter === 'b' || parameter === 'c'){
           // execute the code
     }
}

So instead of using multiple || operators,.includes() method can be used to simplify the above condition.

// following arrow function's way
const myFunction = (parameter) => {
     if(['a','b','c'].includes(parameter)){
           // execute the code
     }
}

The .includes() method will check if the value of the parameter is matched with any value given in the array.

Thanks for reading this article

I hope it would help the JavaScipt developers to write their code in a simpler way. There are many other tips which would be the part of my next blog. If you enjoy reading this article like, share, and comment.

 
Share this