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.
