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;
}

Shorthand:

const isAdmin = user.role === 'admin' ? true : false;

Shorterhand thanks @jonrandy

const isAdmin = user.role === 'admin';

2. Object Property Shorthand:

Use Case: Creating Objects with Variables

Normal JavaScript:

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

const person = {
  name: name,
  age: age
};

Shorthand:

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

const person = {
  name,
  age
};

3. Default Parameter Values:

Use Case: Providing Default Values to Function Parameters

Normal JavaScript:

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

Shorthand:

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

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';

Shorthand:

const username = getUsernameFromAPI();
const displayName = username || 'Anonymous';

5. Array Destructuring:

Use Case: Swapping Variables

Normal JavaScript:

let a = 5;
let b = 10;

const temp = a;
a = b;
b = temp;

Shorthand:

let a = 5;
let b = 10;

[a, b] = [b, a];

6. Template Literals:

Use Case: Dynamic String Concatenation

Normal JavaScript:

const name = 'Leandro';
const greeting = 'Hello, ' + name + '!';

Shorthand:

const name = 'Leandro';
const greeting = `Hello, ${name}!`;

7. Arrow Functions:

Use Case: Concise Function Definitions

Normal JavaScript:

function add(a, b) {
  return a + b;
}

Shorthand:

const add = (a, b) => a + b;

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';

Shorthand:

const data = fetchUserData();
const username = data ?? 'Guest';

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;

Shorthand:

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

const { name, age, country } = user;

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);

Shorthand:

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

11. Logical OR Assignment:

Use Case: Assigning a Default Value to a Variable

Normal JavaScript:

let count;
if (!count) {
  count = 0;
}

Shorthand:

let count;
count ||= 0;

12. Short-Circuit Evaluation for Function Call:

Use Case: Avoiding Unnecessary Function Execution

Normal JavaScript:

function fetchData() {
  if (shouldFetchData) {
    return fetchDataFromAPI();
  } else {
    return null;
  }
}

Shorthand:

function fetchData() {
  return shouldFetchData && fetchDataFromAPI();
}

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! 🚀

Comments

[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

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

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") // 

[Leandro Nuñez]

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

[Jon Randy 🎖️]

Shorthand:

const isAdmin = user.role === 'admin' ? true : false;

Shorterhand:

const isAdmin = user.role === 'admin';

[Leandro Nuñez]

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

[fruntend]

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

[Raja MSR]

Thanks for sharing!

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

[Leandro Nuñez]

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

[Jon Randy 🎖️]

The examples in 12 are not equivalent