DEV Community

loading...
Cover image for 10 Awesome JavaScript Shorthands

10 Awesome JavaScript Shorthands

Palash Mondal
A passionate programmer & front-end developer. I like to share HTML, CSS, JavaScript and web development tips & tricks and try to explain them in a simple manner.
Originally published at iampalash.hashnode.dev ・Updated on ・6 min read

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 and do more.

Let's start!

1. Merge Arrays

Longhand:

We usually merge two arrays using Array concat() method. The concat() method is used to merge two or more arrays. This method does not change the existing arrays but instead returns a new array. Here is a simple example:

let apples = ['🍎', '🍏'];
let fruits = ['πŸ‰', '🍊', 'πŸ‡'].concat(apples);

console.log( fruits );
//=> ["πŸ‰", "🍊", "πŸ‡", "🍎", "🍏"]
Enter fullscreen mode Exit fullscreen mode

Shorthand:

We can shorten this a bit by using ES6 Spread Operator (...) like this:

let apples = ['🍎', '🍏'];
let fruits = ['πŸ‰', '🍊', 'πŸ‡', ...apples];  // <-- here

console.log( fruits );
//=> ["πŸ‰", "🍊", "πŸ‡", "🍎", "🍏"]
Enter fullscreen mode Exit fullscreen mode

and we are still getting the same output as before. πŸ˜ƒ


2. Merge Arrays (but at the start)

Longhand:

Let's say we want to add all the items from the apples array at the start of fruits array, instead of at the end like we have seen in the last example. We can do this using Array.prototype.unshift() like this:

let apples = ['🍎', '🍏'];
let fruits = ['πŸ₯­', '🍌', 'πŸ’'];

// Add all items from apples onto fruits at start
Array.prototype.unshift.apply(fruits, apples)

console.log( fruits );
//=> ["🍎", "🍏", "πŸ₯­", "🍌", "πŸ’"]
Enter fullscreen mode Exit fullscreen mode

Now the two red & green apples are at the start instead of the end after merging.

Shorthand:

We can shorten this long code again using ES6 Spread Operator (...) like this:

let apples = ['🍎', '🍏'];
let fruits = [...apples, 'πŸ₯­', '🍌', 'πŸ’'];  // <-- here

console.log( fruits );
//=> ["🍎", "🍏", "πŸ₯­", "🍌", "πŸ’"]
Enter fullscreen mode Exit fullscreen mode

3. Clone Array

Longhand:

We can easily clone an array using the Array slice() method like this:

let fruits = ['πŸ‰', '🍊', 'πŸ‡', '🍎'];
let cloneFruits = fruits.slice();

console.log( cloneFruits );
//=> ["πŸ‰", "🍊", "πŸ‡", "🍎"]
Enter fullscreen mode Exit fullscreen mode

Shorthand:

Using ES6 Spread Operator (...) we can clone an array like this:

let fruits = ['πŸ‰', '🍊', 'πŸ‡', '🍎'];
let cloneFruits = [...fruits];  // <-- here

console.log( cloneFruits );
//=> ["πŸ‰", "🍊", "πŸ‡", "🍎"]
Enter fullscreen mode Exit fullscreen mode

4. Destructuring Assignment

Longhand:

While working with arrays, we sometimes need to "unpack" arrays into a bunch of variables like this:

let apples = ['🍎', '🍏'];
let redApple = apples[0];
let greenApple = apples[1];

console.log( redApple );    //=> 🍎
console.log( greenApple );  //=> 🍏
Enter fullscreen mode Exit fullscreen mode

Shorthand:

We can achieve the same result in a single line using Destructuring assignment like this:

let apples = ['🍎', '🍏'];
let [redApple, greenApple] = apples;  // <-- here

console.log( redApple );    //=> 🍎
console.log( greenApple );  //=> 🍏
Enter fullscreen mode Exit fullscreen mode

5. Template literals

Longhand:

Usually, when we have to add an expression to a string we do it like:

// Display name in between two strings
let name = 'Palash';
console.log('Hello, ' + name + '!');
//=> Hello, Palash!

// Add & Subtract two numbers
let num1 = 20;
let num2 = 10;
console.log('Sum = ' + (num1 + num2) + ' and Subtract = ' + (num1 - num2));
//=> Sum = 30 and Subtract = 10
Enter fullscreen mode Exit fullscreen mode

Shorthand:

With Template literals we can use backticks (`), which allow us to embed any expression into the string, by wrapping it in ${...} like this:

// Display name in between two strings
let name = 'Palash';
console.log(`Hello, ${name}!`);  // <-- No need to use + var + anymore
//=> Hello, Palash!

// Add two numbers
let num1 = 20;
let num2 = 10;
console.log(`Sum = ${num1 + num2} and Subtract = ${num1 - num2}`);
//=> Sum = 30 and Subtract = 10
Enter fullscreen mode Exit fullscreen mode

6. For Loop

Longhand:

Using the for loop we can loop through an array like this:

let fruits = ['πŸ‰', '🍊', 'πŸ‡', '🍎'];

// Loop through each fruit
for (let index = 0; index < fruits.length; index++) { 
  console.log( fruits[index] );  // <-- get the fruit at current index
}

//=> πŸ‰
//=> 🍊
//=> πŸ‡
//=> 🍎
Enter fullscreen mode Exit fullscreen mode

Shorthand:

We can achieve the same result using the for...of statement but with very little code like this:

let fruits = ['πŸ‰', '🍊', 'πŸ‡', '🍎'];

// Using for...of statement 
for (let fruit of fruits) {
  console.log( fruit );
}

//=> πŸ‰
//=> 🍊
//=> πŸ‡
//=> 🍎
Enter fullscreen mode Exit fullscreen mode

7. Arrow Functions

Longhand:

To loop through an array we can also use Array forEach() method. But we have to write a bit more code, which is less than the most common for loop we have seen above, but still a bit more than the for...of statement :

let fruits = ['πŸ‰', '🍊', 'πŸ‡', '🍎'];

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

//=> πŸ‰
//=> 🍊
//=> πŸ‡
//=> 🍎
Enter fullscreen mode Exit fullscreen mode

Shorthand:

But with Arrow function expressions we can write the full loop code in a single line like this:

let fruits = ['πŸ‰', '🍊', 'πŸ‡', '🍎'];
fruits.forEach(fruit => console.log( fruit ));  // <-- Magic ✨

//=> πŸ‰
//=> 🍊
//=> πŸ‡
//=> 🍎
Enter fullscreen mode Exit fullscreen mode

I mostly use forEach loop with arrow functions, but I wanted to show you both the shorthand for looping: for...of statement and forEach loop. So that you can use whichever code you like based on your preference. πŸ˜ƒ


8. Find an object in an array

Longhand:

To find an object in an array of objects by one of its properties, we usually use for loop like this:

let inventory = [
  {name: 'Bananas', quantity: 5},
  {name: 'Apples', quantity: 10},
  {name: 'Grapes', quantity: 2}
];

// Get the object with the name `Apples` inside the array
function getApples(arr, value) {
  for (let index = 0; index < arr.length; index++) {

    // Check the value of this object property `name` is same as 'Apples'
    if (arr[index].name === 'Apples') {  //=> 🍎

      // A match was found, return this object
      return arr[index];
    }
  }
}

let result = getApples(inventory);
console.log( result )
//=> { name: "Apples", quantity: 10 }
Enter fullscreen mode Exit fullscreen mode

Shorthand:

Wow! We have to write so much previously, to implement this logic. But with Array find() method and arrow function =>, we can easily achieve this in one line like this:

// Get the object with the name `Apples` inside the array
function getApples(arr, value) {
  return arr.find(obj => obj.name === 'Apples');  // <-- here
}

let result = getApples(inventory);
console.log( result )
//=> { name: "Apples", quantity: 10 }
Enter fullscreen mode Exit fullscreen mode

9. Convert String to Integer

Longhand:

The parseInt() function is used to parse a string and return an integer:

let num = parseInt("10")

console.log( num )         //=> 10
console.log( typeof num )  //=> "number"
Enter fullscreen mode Exit fullscreen mode

Shorthand:

We can achieve the same result by adding a + prefix before the string like this:

let num = +"10";

console.log( num )           //=> 10
console.log( typeof num )    //=> "number"
console.log( +"10" === 10 )  //=> true
Enter fullscreen mode Exit fullscreen mode

10. Short-circuit Evaluation

Longhand:

Mostly if-else statement is used if we have to set a value based on another value is not a falsy value like this:

function getUserRole(role) {
  let userRole;

  // If role is not falsy value
  // set `userRole` as passed `role` value
  if (role) {
    userRole = role;
  } else {

    // else set the `userRole` as USER
    userRole = 'USER';
  }

  return userRole;
}

console.log( getUserRole() )         //=> "USER"
console.log( getUserRole('ADMIN') )  //=> "ADMIN"
Enter fullscreen mode Exit fullscreen mode

Shorthand:

But using short-circuit evaluation (||), we can do this in one line like this:

function getUserRole(role) {
  return role || 'USER';  // <-- here
}

console.log( getUserRole() )         //=> "USER"
console.log( getUserRole('ADMIN') )  //=> "ADMIN"
Enter fullscreen mode Exit fullscreen mode

Basically, expression1 || expression2 is short-circuit evaluated to the truthy expression. So, it's like saying that if the first part is true don't bother evaluating the rest of the expression.


Finally, I would like to end this article by sharing one quote by Jeff Atwood:

Code is only our enemy because there are so many of us programmers writing so damn much of it. If you can’t get away with no code, the next best thing is to start with brevity.

If you love writing code β€” really, truly love to write code β€” you’ll love it enough to write as little of it as possible.

If you liked this article, be sure to ❀ it.

You can also checkout my previous blog:

Happy Coding!


Community Input

Arrow Functions

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

let fruits = ['πŸ‰', '🍊', 'πŸ‡', '🍎'];
fruits.forEach(console.log);
Enter fullscreen mode Exit fullscreen mode

Find an object in an array

You can use object destructure and arrow functions to make it leaner:

// Get the object with the name `Apples` inside the array
const getApples = array => array.find(({ name }) => name === "Apples");

let result = getApples(inventory);
console.log(result);
//=> { name: "Apples", quantity: 10 }
Enter fullscreen mode Exit fullscreen mode

Short-circuit Evaluation Alternatives

const getUserRole1 = (role = "USER") => role;
const getUserRole2 = role => role ?? "USER";
const getUserRole3 = role => role ? role : "USER";
Enter fullscreen mode Exit fullscreen mode

Thank you for your feedbacks! ❀️

Discussion (16)

Collapse
jessycormier profile image
Jessy Cormier • 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 Author

Thanks for sharing! 😊

Collapse
lukeshiru profile image
LUKESHIRU • Edited

A few things to consider:

  • Merge shorthand: The ... is smaller, but is also sometimes less performant than Array.prototype.concat.
  • Array.prototype.unshift mutates the original array, while the ... doesn't. I prefer the immutable approach of course, but worth mentioning.
  • For the for loop I was expecting this, based on your previous examples, which is actually shorter:
let fruits = ["πŸ‰", "🍊", "πŸ‡", "🍎"];

fruits.forEach(fruit => console.log(fruit));
Enter fullscreen mode Exit fullscreen mode
  • With "find an object in an array", I was also expecting a shorter version. You can use object destructure and arrow functions to make it leaner:
// Get the object with the name `Apples` inside the array
const getApples = array => array.find(({ name }) => name === "Apples");

let result = getApples(inventory);
console.log(result);
//=> { name: "Apples", quantity: 10 }
Enter fullscreen mode Exit fullscreen mode
  • For the number conversion, I saw that "hack/trick" in a few posts already, and is not recommended at all to use the + operator as a parser. You should be more explicit about what you want to do. I know the + is shorter, but you're butchering readability, so is not worth it.
const num = parseInt("10", 10); // Decimal: 10
const bin = parseInt("10", 2); // Binary: 2
const float = parseFloat("10.5"); // 10.5
Enter fullscreen mode Exit fullscreen mode
  • Similar to the previous item, short-circuiting is not as readable as better alternatives like just using if, or using a ternary. In your particular case is even better to use a default value, or even nullish coalescing ??:
const getUserRole1 = (role = "USER") => role;
const getUserRole2 = role => role ?? "USER";
const getUserRole3 = role => role ? role : "USER";
Enter fullscreen mode Exit fullscreen mode

Cheers!

Collapse
palashmon profile image
Palash Mondal Author

Thanks for sharing your feedback! πŸ˜ƒ

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 Author

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
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 Author

Glad you liked it. Have fun adding it to a PR! πŸ˜„

Collapse
kanakamvinaykumar profile image
kanakamvinaykumar

Thanks for sharing shorthands

Collapse
palashmon profile image
Palash Mondal Author

Thank you so much. Glad you liked it! πŸ˜ƒ

Collapse
retr0c0de profile image
Anguram Shanmugam

Good one 🐨

Collapse
palashmon profile image
Palash Mondal Author

Thank you so much! πŸ˜ƒ

Collapse
palashmon profile image
Palash Mondal Author

Thanks for sharing!

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

me too