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: Conditional Assignment Use Case: 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: Creating Objects with Variables Use Case: 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: Providing Default Values to Function Parameters Use Case: Normal JavaScript: function greet(name) {
  name = name || 'Guest';
  return `Hello, ${name}!`;
} Shorthand: function greet(name = 'Guest') {
  return `Hello, ${name}!`;
} be careful with this one. Check out this comment by Caution: here 4. Short-Circuit Evaluation: Fallback for Undefined or Null Values Use Case: Normal JavaScript: const username = getUsernameFromAPI();
const displayName = username ? username : 'Anonymous'; Shorthand: const username = getUsernameFromAPI();
const displayName = username || 'Anonymous'; 5. Array Destructuring: Swapping Variables Use Case: 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: Dynamic String Concatenation Use Case: Normal JavaScript: const name = 'Leandro';
const greeting = 'Hello, ' + name + '!'; Shorthand: const name = 'Leandro';
const greeting = `Hello, ${name}!`; 7. Arrow Functions: Concise Function Definitions Use Case: Normal JavaScript: function add(a, b) {
  return a + b;
} Shorthand: const add = (a, b) => a + b; 8. Nullish Coalescing Operator: Providing Default Values for Null or Undefined Variables Use Case: 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: Extracting Object Properties into Variables Use Case: 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: Merging Arrays or Objects Use Case: 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: Assigning a Default Value to a Variable Use Case: Normal JavaScript: let count;
if (!count) {
  count = 0;
} Shorthand: let count;
count ||= 0; 12. Short-Circuit Evaluation for Function Call: Avoiding Unnecessary Function Execution Use Case: 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!

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Mastering JavaScript Shorthands

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Quick and Friendly Python 3 Guide For Beginners

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

A Quick and Friendly Python 3 Guide For Beginners

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps