paint-brush
Mastering JavaScript Shorthandsby@leandronnz
14,943 reads
14,943 reads

Mastering JavaScript Shorthands

by Leandro NuñezAugust 1st, 2023
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Today, we'll explore the art of JavaScript shorthands - nifty techniques that make your code more concise and elegant.

People Mentioned

Mention Thumbnail
featured image - Mastering JavaScript Shorthands
Leandro Nuñez HackerNoon profile picture

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

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 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 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: '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!