Mastering JavaScript Shorthands In 2023

Hey there, fellow JavaScript enthusiasts!

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:

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

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 fetchUserData = () => {
    return 'leandro' // change to null or undefined to see the behavior
};

const data = fetchUserData();
const username = data !== null && data !== undefined ? data : 'Guest';

Shorthand:

const fetchUserData = () => {
    return 'leandro' // change to null or undefined to see the behavior
};

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

9. Object Destructuring:

Use Case: Extracting Object Properties into Variables

Normal JavaScript:

const user = {
  name: 'Cristain',
  age: 21,
  country: 'Bangladesh'
};

const name = user.name;
const age = user.age;
const country = user.country;

Shorthand:

const user = {
  name: 'Cristain',
  age: 21,
  country: 'Bangladesh'
};

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!