Some Useful Js Shorthand
As a programmer, I’m always looking for ways to improve my code quality and write clean code. Writing clean code doesn’t come easy. It requires lots of practice and experimentation. One easy way to start writing cleaner code in js is to use some common shorthand. Here I’ve listed some basic js shorthand to make your code cleaner.
1. Short Circuit Assignment
When you want to assign a value to a variable and you want to make sure that it is not set to null you can use this shorthand that’s popularly known as short circuit assignment.
// longer version
let name = "user"; // default value
let someRandomName = null;
if(someRandomName !== null ) {
name=someRandomName;
}// shorter version
let name = someRandomName || "user";
As you can see that using the || to conditionally assign a default value can make our code much more clean and readable.
You can even add multiple checks before assigning a default value. For instance
let name = null || someRandomName || false || "user"While assigning the value, the first truthy value will be assigned and the circuit will break.
2. String to number conversion(Unary + Operator)
When you have to convert a string to a number there are several options that you can use. Some methods you can use are parseInt(), parseFloat(), Math.floor(), Math.ceil() depending on your desired output. But one shorthand you can use to achieve is by using the “+” while assigning the value. For Instance,
let a = "2";
let b = +a;
console.log(b); // 2
console.log(typeof b); // numberlet c = "2.3";
let d = +c;
console.log(d)// 2.3
console.log(typeof d)// number// if you add some alphabet the result will be NaN
a = "a3";
b = +a;
console.log(b); // NaN
3. Truthy/Falsy check
Sometimes in your applications, you might have a method that returns a boolean result based on whether some value is truthy or falsy. If you’re returning try for any value and false for falsy value. This shorthand will be very handy. For instance, if you’ve written a selector in Redux that returns a boolean value to check if the user is authenticated or not depending on whether the token is set or not, on way to do this would be,
let token = null;//longer version
const authCheck = () => {
if(token) {
return true;
}
else {
return false;
}
}// shorthand
const authCheck = () => {
return !!token;
}
Using the “!!” operator will return false for any falsy values and return true for any truthy values.
4. Avoiding “else” condition in a function
This one is not exactly a shorthand and It’s not just applicable to JS. This concept can be applied to any language.
If you are returning values from a function based on a condition like in the previous example, you can skip the final else condition.
const authCheck = () => {
if(token) {
return true;
}
else {
return false;
}
}//shorter versionconst authCheck = () => {
if(token) {
return true;
}
return false;
}
Conclusion
The tips mentioned above are pretty basic and can be very handy. Small changes like these in your code can help you write better code. When you’re coding always look for ways to improve the code and write clean code.
