DEV Community

Cover image for 10 Awesome JavaScript Shorthands

10 Awesome JavaScript Shorthands

Palash Mondal on July 29, 2021

Hi everyone 👋 Today I wanted to share with you 10 awesome JavaScript shorthands that will increase your speed by helping you to write less code an...
Read full post
Collapse
 
jessyco profile image
Jessy • • Edited

If you don't need the this context you can shorten even further when you use arrow functions.

in your example

let fruits = ['🍉', '🍊', '🍇', '🍎'];
fruits.forEach(fruit => console.log( fruit ));
Enter fullscreen mode Exit fullscreen mode

it can be shortened to

let fruits = ['🍉', '🍊', '🍇', '🍎'];
fruits.forEach(console.log);
Enter fullscreen mode Exit fullscreen mode

The params of your forEach (item, index) will get passed to the console.log function :)

if you are using custom functions to pass into things like .forEach you can go from this example:

function printMessage(msg) { 
  console.log(msg); 
}
Enter fullscreen mode Exit fullscreen mode

to this

const printMessage = (msg) => console.log(msg);
Enter fullscreen mode Exit fullscreen mode

Hope that helps someone!

Edit: adding example of printMessage

['🍉', '🍊', '🍇', '🍎'].forEach(printMessage);
Enter fullscreen mode Exit fullscreen mode

Final note: doing this kind of extraction/abstraction of functionality can help better describe what's happening in your code without needing to add code comments and it can help you unit test your code later on with more context. When you build a larger system, you could have these type of helper functions extracted out of your main code as well. 🚀

Collapse
 
palashmon profile image
Palash Mondal •

Thanks for sharing! 😊

Collapse
 
crimsonmed profile image
Médéric Burlet •

I think this shorthand:

let fruits = ['🍉', '🍊', '🍇', '🍎'];

// Using forEach method
fruits.forEach(function(fruit){
  console.log( fruit );
});

//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎
Enter fullscreen mode Exit fullscreen mode

If you are logging it can be simplified like this:

let fruits = ['🍉', '🍊', '🍇', '🍎'];

// Using forEach method
fruits.map(fruit => console.log(fruit))

//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎
Enter fullscreen mode Exit fullscreen mode
Collapse
 
palashmon profile image
Palash Mondal •

Thanks for your feedback. ❤️

I have already mentioned that shorthand in the "7. Arrow Functions" section. I hope that is fine.

Happy Coding!

Collapse
 
efpage profile image
Eckehard •

Generally for .. of works fine, but was not supported on some older browsers on Android. So, referring to my personal experience, in a real application it can help to use for .. in to get better compatibility.

let fruits = ['🍉', '🍊', '🍇', '🍎'];

// Using for...of statement 
for (let i in fruits) {
  console.log( fruits[i]);
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
kanakamvinaykumar profile image
kanakamvinaykumar •

Thanks for sharing shorthands

Collapse
 
palashmon profile image
Palash Mondal •

Thank you so much. Glad you liked it! 😃

Collapse
 
palashmon profile image
Palash Mondal •

Thanks for sharing your feedback! 😃

Collapse
 
lukegarrigan profile image
Luke Garrigan •

Never seen the + prefix one, I look forward to adding this to a PR to confuse everyone. Cheers.

Collapse
 
palashmon profile image
Palash Mondal •

Glad you liked it. Have fun adding it to a PR! 😄

Collapse
 
heyprotagonist profile image
Anguram Shanmugam •

Good one 🐨

Collapse
 
palashmon profile image
Palash Mondal •

Thank you so much! 😃

Collapse
 
palashmon profile image
Palash Mondal •

Thanks for sharing!

Collapse
 
cucheng profile image
Trương Đình Chiến •

me too