DEV Community

Cover image for Mastering JavaScript Shorthands
Leandro Nuñez for Digital Pollution

Posted on • Updated on

Mastering JavaScript Shorthands

Hey there, fellow JavaScript enthusiasts!

Leandro Nuñez, your trusty software engineer, is back with some JavaScript magic.

Today, we'll explore the art of JavaScript shorthands - nifty techniques that make your code more concise and elegant.
We'll dive into real use case examples in both vanilla JavaScript and the shorthand form.

So buckle up, and let's elevate your JavaScript skills to new heights!

1. The Ternary Operator:

Use Case: Conditional Assignment

Normal JavaScript:

let isAdmin;
if (user.role === 'admin') {
  isAdmin = true;
} else {
  isAdmin = false;
}
Enter fullscreen mode Exit fullscreen mode

Shorthand:

const isAdmin = user.role === 'admin' ? true : false;
Enter fullscreen mode Exit fullscreen mode

Shorterhand thanks @jonrandy

const isAdmin = user.role === 'admin';
Enter fullscreen mode Exit fullscreen mode

2. Object Property Shorthand:

Use Case: Creating Objects with Variables

Normal JavaScript:

const name = 'Leandro';
const age = 30;

const person = {
  name: name,
  age: age
};
Enter fullscreen mode Exit fullscreen mode

Shorthand:

const name = 'Leandro';
const age = 30;

const person = {
  name,
  age
};
Enter fullscreen mode Exit fullscreen mode

3. Default Parameter Values:

Use Case: Providing Default Values to Function Parameters

Normal JavaScript:

function greet(name) {
  name = name || 'Guest';
  return `Hello, ${name}!`;
}
Enter fullscreen mode Exit fullscreen mode

Shorthand:

function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}
Enter fullscreen mode Exit fullscreen mode

Caution: be careful with this one. Check out this comment by @efpage here

4. Short-Circuit Evaluation:

Use Case: Fallback for Undefined or Null Values

Normal JavaScript:

const username = getUsernameFromAPI();
const displayName = username ? username : 'Anonymous';
Enter fullscreen mode Exit fullscreen mode

Shorthand:

const username = getUsernameFromAPI();
const displayName = username || 'Anonymous';
Enter fullscreen mode Exit fullscreen mode

5. Array Destructuring:

Use Case: Swapping Variables

Normal JavaScript:

let a = 5;
let b = 10;

const temp = a;
a = b;
b = temp;
Enter fullscreen mode Exit fullscreen mode

Shorthand:

let a = 5;
let b = 10;

[a, b] = [b, a];
Enter fullscreen mode Exit fullscreen mode

6. Template Literals:

Use Case: Dynamic String Concatenation

Normal JavaScript:

const name = 'Leandro';
const greeting = 'Hello, ' + name + '!';
Enter fullscreen mode Exit fullscreen mode

Shorthand:

const name = 'Leandro';
const greeting = `Hello, ${name}!`;
Enter fullscreen mode Exit fullscreen mode

7. Arrow Functions:

Use Case: Concise Function Definitions

Normal JavaScript:

function add(a, b) {
  return a + b;
}
Enter fullscreen mode Exit fullscreen mode

Shorthand:

const add = (a, b) => a + b;
Enter fullscreen mode Exit fullscreen mode

8. Nullish Coalescing Operator:

Use Case: Providing Default Values for Null or Undefined Variables

Normal JavaScript:

const data = fetchUserData();
const username = data !== null && data !== undefined ? data.username : 'Guest';
Enter fullscreen mode Exit fullscreen mode

Shorthand:

const data = fetchUserData();
const username = data ?? 'Guest';
Enter fullscreen mode Exit fullscreen mode

9. Object Destructuring:

Use Case: Extracting Object Properties into Variables

Normal JavaScript:

const user = {
  name: 'Leandro',
  age: 30,
  country: 'USA'
};

const name = user.name;
const age = user.age;
const country = user.country;
Enter fullscreen mode Exit fullscreen mode

Shorthand:

const user = {
  name: 'Leandro',
  age: 30,
  country: 'USA'
};

const { name, age, country } = user;
Enter fullscreen mode Exit fullscreen mode

10. Spread Operator:

Use Case: Merging Arrays or Objects

Normal JavaScript:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = arr1.concat(arr2);
Enter fullscreen mode Exit fullscreen mode

Shorthand:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = [...arr1, ...arr2];
Enter fullscreen mode Exit fullscreen mode

11. Logical OR Assignment:

Use Case: Assigning a Default Value to a Variable

Normal JavaScript:

let count;
if (!count) {
  count = 0;
}
Enter fullscreen mode Exit fullscreen mode

Shorthand:

let count;
count ||= 0;
Enter fullscreen mode Exit fullscreen mode

12. Short-Circuit Evaluation for Function Call:

Use Case: Avoiding Unnecessary Function Execution

Normal JavaScript:

function fetchData() {
  if (shouldFetchData) {
    return fetchDataFromAPI();
  } else {
    return null;
  }
}
Enter fullscreen mode Exit fullscreen mode

Shorthand:

function fetchData() {
  return shouldFetchData && fetchDataFromAPI();
}
Enter fullscreen mode Exit fullscreen mode

There you have it!

JavaScript shorthands continue to impress with their elegance and efficiency.
Incorporate these concise examples into your codebase, and watch your JavaScript skills soar to new heights.

Happy coding and enjoy unleashing the power of JavaScript shorthands in your projects! 🚀

Top comments (8)

Collapse
 
efpage profile image
Eckehard

Version 3 may cause trouble, as shorthand behaves differently:

function test(name1, name2 = 'Guest') {
   name1 = name1 || 'Guest';
   console.log(name1, name2)
}
    test("test", "test") // -> test test
    test() // -> Guest Guest
    test(false, false) // -> Guest false
    test(null, null) // -> Guest null
    test(0, 0) // -> Guest 0
Enter fullscreen mode Exit fullscreen mode

Default function parameters are used, if the argument is undefined, while the || checks for false. In Javascript, any nullish value is treated as false.

It work better, if you use nullish coalescing operator (??), but even that fails if you provide null as an argument (which usually does not happen accidentially):

    function test(name1, name2 = 'Guest') {
      name1 = name1 ?? 'Guest';
      console.log(name1, name2)
    }
    test(null, null) // -> Guest null
Enter fullscreen mode Exit fullscreen mode

In most cases the default parameters are the better solution, but there are situations where you need to set defaults in your code. It seems, there is no shorthand for all cases:

   name1 = typeof(name1) !==='undefined' ?  name1 : 'Guest';
   if (typeof(name1) !==='undefined' ) name1  =  'Guest'
  // ----- use a default() function --------
   const default = (val, def) => 
        (typeof(val) === 'undefined') ? def : val

   val = default(val, "Guest") // 
Enter fullscreen mode Exit fullscreen mode
Collapse
 
leandro_nnz profile image
Leandro Nuñez

Thanks! I linked a caution to this excellent explained comment.

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Shorthand:

const isAdmin = user.role === 'admin' ? true : false;
Enter fullscreen mode Exit fullscreen mode

Shorterhand:

const isAdmin = user.role === 'admin';
Enter fullscreen mode Exit fullscreen mode
Collapse
 
leandro_nnz profile image
Leandro Nuñez

I added this to the post. Thank you so much!

Collapse
 
fruntend profile image
fruntend

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

Collapse
 
onlinemsr profile image
Raja MSR • Edited

Thanks for sharing!

Ternary operator is best choice for simple statements. If we go for nested ternary, it leads to confusion.

Collapse
 
leandro_nnz profile image
Leandro Nuñez

IME, anything can lead to confusion 😂😂😂. One should never stop learning.
Thanks for your comment!

Collapse
 
jonrandy profile image
Jon Randy 🎖️

The examples in 12 are not equivalent