JavaScript is a powerful programming language for web development. If we know its useful feature then we can improve our coding speed and productivity. Lets learn these powerful feature.
Table of Contents
#1. Default Parameter Values:
In JavaScript we can pass default value to a parameter in function definition that can help to reduce a few number of lines.
// Looooooong way function xyz(b, c, a) { if (!a) { a = "singhak"; } // TODO }
At below code we pass default value to the parameter. The default value will be used when no value pass for this parameter.
// Short way function xyz(b, c, a = "singhak") { //TODO }
#2. Short Circuit Evaluation
We can use our logical operator OR (||) and AND (&&) to avoid any unnecessary if-else check.
// Looooooong way let age, year; if (year) { age = year; } else { age = 30; }
// Short way let age, year; age = year || 30
Like OR operator we can use AND operator to avoid some if-else
// Looooooong way let age, year = 1 if (year) { age = 30; }
// Short way let age, year = 1 age = year && 30; // age = 30
#3. Merging
There are several way to merge array Each way has there own prone and cons.
// Looooooong way let cars = [1,2,3,4]; let num = ['c','a','r','s'] // cloning let a = cars.slice(); // merging let canum = cars.concat(num);
// Short way let cars = [1,2,3,4]; let num = ['c','a','r','s'] // cloning let a = [...cars]; // merging let canum = [...cars,...num];
We can use spread operator on object also
car = {'h':1, 'M':2} bike = {'H':3,'D':4} bica = {...car, ...bike, 'HP':5}
#4. Destructuring:
Using this feature of JavaScript we can write elegant and more readable code.
let about = { name:'Singhak', age:'30', location:'India', place:'Earth', education:'Graduate', status:'engaged' } // normal way function aboutYou(about) { `I am ${about.name} and age is ${about.age} lived in ${about.location}.` }
// better way function aboutYou({name, age, location}) { `I am ${name} and age is ${age} lived in ${location}.` } //OR function aboutYou(about) { const {name, age, location} = about `I am ${name} and age is ${age} lived in ${location}.` }
let about = ['singhak', '30','India'] //Long way let name = about[0] let age = about[1] let location = about[2] // Short way const {name, age, location} = about
#5. Convert String to number:
//Normal way let num = "1232"; num = parseInt(num); // better way num = +num; // OR num = num * 1;
#6. Converting To Boolean:
Many time we want to convert string, number, undefined or null value to boolean.
s = "singhak"; n = 0; u = undefined; !!s; // true !!n; // false !!u; // false
#7. Object Property Shorthand:
let x = 10; let y = 3; // normal way let obj = {x:x,y:y} //{x: 10, y: 2} console.log(x,y) //10,2 // Better way let obj = {x,y} //{x: 10, y: 2} console.log({x,y}) //{x: 10, y: 2}
#8. Optional Chaining (?.):
This is a new feature of JavaScript 2020 which helps to access the value of an object without checking the object is undefined of null.
// normal way let user = {} // without any name property if(user.name.lastname) { console.log(user.name.lastname) }
//Better way console.log(user?.name?.lastname) //undefined#9.
#9. Nullish coalescing operator (??):
This is also a new operator. It help to assign a default value if value is null or undefined
function sum(a,b) { a = a ?? 10; b = b ?? 20; return a+b } sum();
These are my learning of JavaScript. As I will learn more trick, I will update this. Use above tips and take benefit of it.