DEV Community

Cover image for Javascript Shorthand Coding Techniques

Javascript Shorthand Coding Techniques

Ayekple Clemence on January 26, 2020

In this blog post, I have compiled some helpful javascript shorthand coding techniques. Javascript shorthands are good coding techniques that can h...
Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt • Edited

12 and 15 is well-known to be quite dangerous, that is why rather than

let c = a || b  // All falsy value is short circuited.

This is safer

let c = a ?? b  // Does not short circuit '', 0, NaN; only null and undefined

Without ??, I do have to write my own utility function sometimes.

Collapse
 
ayekpleclemence profile image
Ayekple Clemence

Thanks

Collapse
 
getanwar profile image
Anwar Hussain

For #1: if(isGirl) is not a shorthand for if(isGirl === true) because the first condition will always pass if the value is truthy whereas later will only pass if the value is boolean true.

For #3: Arrow function is not a shorthand for the traditional function. Because arrow functions are lexical meaning this inside an arrow function will only have lexical scope. So it can not be bind, call or applied against another context.

For #12 and #15 see this commented

Collapse
 
kostagon profile image
Kosta Goncharov

Also, the arrow function in this case isn't hoisting,
function expressions (aka the longhand) will hoist.

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

For #5, why not Array.prototype.forEach?

animals.forEach(animal => console.log(animal));
Collapse
 
getanwar profile image
Anwar Hussain

Because forEach does not return anything. You might need to use the returned value somewhere out of your callback.

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

I'm not sure I understand. A regular for loop doesn't return anything either. This is equivalent to the examples he gave, but it's more legible and compact.

Thread Thread
 
eth2234 profile image
Ebrahim Hasan

Both forEach and for of can be used, forEach is used in arrays while for of can be used in arrays,maps,set or any iterable member objects.

Thread Thread
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

forEach can also be used with arrays, maps, and sets. To my knowledge, the only advantage that a traditional for loop has is the ability to traverse objects.

Thread Thread
 
eth2234 profile image
Ebrahim Hasan • Edited

But note that this is not a traditional for loop, this is a "for of", it even can loop through Strings (instead of converting a string to an array or using a for with the length)

I think the only advantage that I see to use the for loop is having one common way to loop through elements, or if you have a function that can have different iterable object types, example:


const loopThrough = (object) => {
for(const n of object) {
console.log(n);
}
};
loopThrough("hello");
loopThrough(["h","e","l","l","o"]);
loopThrough(new Set([1, 2, 3, 4, 5]));

Collapse
 
miteshkamat27 profile image
Mitesh Kamat

// Longhand
const quantity = parseInt("250")
const price = parseFloat("432.50")

// Shorthand
const quantity = +"250" // converts to int
const price = +"432.50" // converts to float

I have a habbit of using parseInt parseFloat everytime.I would surely follow this shorthand.

Collapse
 
meg_gutshall profile image
Meg Gutshall

This is fire!! 🔥🔥🔥 I've bookmarked this and will share it out for sure! Appreciate all the edit suggestions in the comments as well! Great work Ayekple!

Collapse
 
tolomei69 profile image
tolomei

I guess 10. should be

checkOut = (quantity, price, discount = 0) => (quantity * price + discount)
Collapse
 
ayekpleclemence profile image
Ayekple Clemence

Thanks

Collapse
 
meg_gutshall profile image
Meg Gutshall

Also logically, wouldn't you want to subtract the discount?