JavaScript Amazing Tips and Tricks

Photo by Lautaro Andreani on Unsplash

There are many frontend developers who commonly use JavaScript frameworks, and even I am one of them. Was really excited to work on JavaScript. So today I will showcase some of the best tricks or I can say super power shortcut to write code in JavaScript

1. Nullish coalescing operator (??)

Nullish coalescing operator ?? returns the RHS value, only if LHS value is either null or undefined , If value is 0 or'' then it will return LHS value not RHS value.

null ?? true   // output: true
undefined ?? true   // output: true
0 ?? true   // output: 0
'' ?? true   // output: ''
false ?? 0   // output: false

Now here many developer is confused between ?? and || operator. So here || will always return RHS value if LHS value is false value like 0 , '' , false , null , undefined .

2. Optional chaining operator (?.)

Optional chaining operator ?. is used to add check, that the property or method, we are trying to access, that is actually present or not. if it is not then it will return undefined .

let student = { name: 'Akshay', college: { name: 'UTU' } }
const schoolName = student.school.name
// Error: Cannot read properties of undefined (reading 'name')
const schoolName = student.school?.name    // Output: undefined
const collegeName = student.someUnknownMethod?.()
// Output: undefined

3. Number to String conversion and visa versa

Many time their is a case where we need to convert number to string and sometimes string to number . Unfortunately many developers who are working with many technology, need to google the syntax to do the conversion (Many times I use to do :D). Finally we see something like parseInt() to convert string to number and toString() to convert number to string. Today I’m going to let you know the easiest way to do the conversion and you will remember forever.

let strToNumber = +'5';   // Output: 5 
let numberToStr = 5+'';   // Output: '5'

4. Object creation

Many of us creates object once we have data in out respective variable to send them as method parameter or it can be to pass as a props.

// Something like this
let name = 'Akshay';
let college = 'UTU';
let student = { name: name, college: college };
// Output: {name: 'Akshay', college: 'UTU'}

So with this, I definitely say that you sometimes waste your valuable time to write code like this. Lets me show some pretty nice way achieve above code in very simpler way.

let name = 'Akshay';
let college = 'UTU';
let student = { name, college};
// Output: {name: 'Akshay', college: 'UTU'}

The result is same as above. So now you can decide what to use from the next time.

5. 2-D array to 1-D array conversion

Many time we need to convert 2-D array into 1-D array and for that either we write complex code or google into to find the code and we find the code something like:

let data = [
  ["abc", "def"],
  ["pqr", "xyz"]
];
let newData = data.reduce(function(prev, next) {
  return prev.concat(next);
});
// Output: ['abc', 'def', 'pqr', 'xyz']

But really I don’t think this much line of code is good for just do the conversion. So let me tell you a simple and very efficient way to achieve the same output in just 1 single line of code. And one amazing thing is that I’m going to show you the 2 different ways to achieve this kind of thing.

let data = [
  ["abc", "def"],
  ["pqr", "xyz"]
];
// 1st Way
let newData = [].concat(...data); 
// 2nd way
let newData = data.flat();
// Output: ['abc', 'def', 'pqr', 'xyz']

Just think how simple it is, but we have made it more complex. Even many senior developer are not aware about this conversion.

Thanks a bunch for giving your valuable time to read this article. Now I’m sure you will going to save you much time to write code in JavaScript and not saving the time but it also looks pretty good coding strategy.