DEV Community

Amitav Mishra
Amitav Mishra

Posted on • Updated on • Originally published at jscurious.com

JavaScript shorthand tips and tricks

Let's checkout some shorthand tips and other tricks.

Remember, some of these are not readable and might not seems relevant to use in a project, but my intensions here is to make you aware that these tricks exist.

Assigning values to multiple variables

We can assign values to multiple variables in one line with array destructuring.

//Longhand
let a, b, c;

a = 5;
b = 8;
c = 12;

//Shorthand
let [a, b, c] = [5, 8, 12];

Enter fullscreen mode Exit fullscreen mode

Assigning a default value

We can use OR(||) short circuit evaluation or nullish coalescing operator (??) to assign a default value to a variable in case the expected value is found falsy.

//Longhand
let imagePath;

let path = getImagePath();

if (path !== null && path !== undefined && path !== '') {
    imagePath = path;
} else {
    imagePath = 'default.jpg';
}

//Shorthand
let imagePath = getImagePath() || 'default.jpg';
// OR
let imagePath = getImagePath() ?? 'default.jpg';
Enter fullscreen mode Exit fullscreen mode

AND(&&) Short circuit evaluation

If you are calling a function only if a variable is true, then you can use the AND(&&) short circuit as an alternative for this.

//Longhand
if (isLoggedin) {
    goToHomepage();
 }

//Shorthand
isLoggedin && goToHomepage();

Enter fullscreen mode Exit fullscreen mode

Swap two variables

To swap two variables, we often use a third variable. We can swap two variables easily with array destructuring assignment.

let x = 'Hello', y = 55;

//Longhand
const temp = x;
x = y;
y = temp;

//Shorthand
[x, y] = [y, x];
Enter fullscreen mode Exit fullscreen mode

Template Literals

We normally use the + operator to concatenate string values with variables. With ES6 template literals, we can do it in a more simple way.

//Longhand
console.log('You got a missed call from ' + number + ' at ' + time);

//Shorthand
console.log(`You got a missed call from ${number} at ${time}`);

Enter fullscreen mode Exit fullscreen mode

Multiple condition checking

For multiple value matching, we can put all values in one array and use indexOf() or includes() method.

//Longhand
if (value === 1 || value === 'one' || value === 2 || value === 'two') {
  // Execute some code
}

// Shorthand
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {
   // Execute some code
}

// OR
if ([1, 'one', 2, 'two'].includes(value)) { 
    // Execute some code 
}
Enter fullscreen mode Exit fullscreen mode

Object Property Assignment

If the variable name and object key name are the same then we can just mention the variable name in object literals instead of both key and value. JavaScript will automatically set the key same as the variable name and assign the value as the variable value.

let firstname = 'Amitav';
let lastname = 'Mishra';

//Longhand
let obj = {firstname: firstname, lastname: lastname};

//Shorthand
let obj = {firstname, lastname};
Enter fullscreen mode Exit fullscreen mode

String into a Number

We can convert string to number by simply providing an unary operator (+) in front of the string value.

//Longhand
let total = parseInt('453', 10);
let average = parseFloat('42.6', 10);

//Shorthand
let total = +'453';
let average = +'42.6';
Enter fullscreen mode Exit fullscreen mode

Exponent Power

We can use Math.pow() method to find the power of a number. There is a shorter syntax to do it with a double asterisk (**).

//Longhand
const power = Math.pow(4, 3); // 64

// Shorthand
const power = 4**3; // 64
Enter fullscreen mode Exit fullscreen mode

Double NOT bitwise operator (~~)

The double NOT bitwise operator is a substitute for Math.floor() method.

//Longhand
const floor = Math.floor(6.8); // 6

// Shorthand
const floor = ~~6.8; // 6
Enter fullscreen mode Exit fullscreen mode

The double NOT bitwise operator approach only works for 32 bit integers i.e (2**31)-1 = 2147483647. So for any number higher than 2147483647 and less than 0, bitwise operator (~~) will give wrong results, so recommended to use Math.floor() in such case.

Find max and min number in an array

const arr = [2, 8, 15, 4];
Math.max(...arr); // 15
Math.min(...arr); // 2
Enter fullscreen mode Exit fullscreen mode

Merging of arrays

let arr1 = [20, 30];

//Longhand
let arr2 = arr1.concat([60, 80]); // [20, 30, 60, 80]

//Shorthand
let arr2 = [...arr1, 60, 80]; // [20, 30, 60, 80]
Enter fullscreen mode Exit fullscreen mode

Remove falsey values from Array

let arr = [12, null, 0, 'xyz', null, -25, NaN, '', undefined, 0.5, false];

let filterArray = arr.filter(Boolean);
// filterArray = [12, "xyz", -25, 0.5]
Enter fullscreen mode Exit fullscreen mode

Note: Zero (0) is considered to be a falsey value so it will be removed in both the cases. You can add an extra check for zero to keep it.

Remove duplicates from Array

const arr = [10, 5, 20, 10, 6, 5, 8, 5, 20];
const unique = [...new Set(arr)];
console.log(unique); // [10, 5, 20, 6, 8]
Enter fullscreen mode Exit fullscreen mode

Create random string token

const token = Math.random().toString(36).slice(2);
// it will create a 11 character string. Ex: '3efstaz9g8a'
Enter fullscreen mode Exit fullscreen mode

Find number of arguments expected by a function

function func(a, b, c) {
  // code
}

console.log(func.length); // 3
// function with Rest parameter
function func(a, b, ...c) {
  // code
}
console.log(func.length); // 2
Enter fullscreen mode Exit fullscreen mode

Check if a key exists in an object

const ob = {x: 5, y: 10};
// using "in" operator
console.log('x' in ob); // true
console.log('abc' in ob); // false
// using Reflect object
console.log(Reflect.has(ob, 'x')); // true
console.log(Reflect.has(ob, 'abc')); // false
Enter fullscreen mode Exit fullscreen mode

You may also like


Thanks for your time ❀️
Find more of my writings on web development blogs at jscurious.com

Discussion (9)

Collapse
moopet profile image
Ben Sinclair

I have a few concerns about some of these.

This pattern:

let [a, b, c] = [5, 8, 12];
Enter fullscreen mode Exit fullscreen mode

is quite difficult to read, because in cases where you have proper variable names you have to dart your eyes left and right and count the position of each thing to know what's being assinged to what.

It also makes version control more difficult because if these were each on their own line then changes would be easier to spot.

Short circuits are popular in REPLs or shell scripts:

isLoggedin && goToHomepage();
Enter fullscreen mode Exit fullscreen mode

... but they make things harder to read in anything but trivial cases and it's easier to make mistakes. @mcsee has a good post about it -

I'm all for multiple value checking, but examples like this:

if ([1, 'one', 2, 'two'].includes(value)) { 
Enter fullscreen mode Exit fullscreen mode

imply that value could be different types, and that's usually a code smell in itself.

Converting to numbers with parseInt needs a second argument, the base that's going to be used. Otherwise you might get some unexpected results. Your shorthand version is better in that case, but using values like +'23' as a kind of cast is going to make the next person to look at the code wonder if you left something out.

let total = parseInt('453'); // No
let total = parseInt('453', 10);  // Yes
Enter fullscreen mode Exit fullscreen mode
Collapse
jonrandy profile image
Jon Randy • Edited on

Most of these are concerns due to what you consider to be readable, and readability is purely subjective.

Collapse
jonrandy profile image
Jon Randy • Edited on

It's important to note that ~~ is NOT the same as Math.floor - it will merely remove the decimal part of the number. Hence you will get a different result with negative numbers:

Math.floor(1.5) // 1
~~1.5 // 1

Math.floor(-1.5) // -2
~~-1.5 // -1
Enter fullscreen mode Exit fullscreen mode
Collapse
jonrandy profile image
Jon Randy

Check if a key exists in an object

Your examples here will check if the property exists in the object itself OR in its prototype chain. To check if the property is on the object itself, you could check if it appears in Object.keys(obj), or use .hasOwnProperty(key) on the Object itself

Collapse
jonrandy profile image
Jon Randy

If you're code-golfing, removing falsey values can be achieved with:

arr.filter(x=>x)
Enter fullscreen mode Exit fullscreen mode
Collapse
jonrandy profile image
Jon Randy

You also have a typo: legth should be length

Collapse
jonrandy profile image
Jon Randy

Find number of parameters accepted by a function

This should read 'arguments' not 'parameters', and 'expected' not 'accepted' - functions in JS will accept any number of arguments

Collapse
nicklane profile image
Nicholas Lane • Edited on

I often wonder how often I should sacrifice the "longhand" for "shorthand" knowing it might cause myself readability issues later on!
Even still, this is a great reference for all of these, thanks!