Mastering JS Shorthand Techniques Part-5: Async/Await, Arrow Function, and Exports and Imports

This blog is originally published on my Blog website, where you can find the full version with detailed insights and examples. Click the link below to read the complete article and explore more tech-related content!
👉 Click Here

Introduction:

In the world of JavaScript, writing concise and expressive code is highly valued by developers. Shorthand techniques are a powerful way to achieve this goal, simplifying code and making it more readable. In this blog, we will explore some essential shorthand techniques that can level up your JavaScript coding skills and make your code more elegant. From arrow functions to async/await, let's dive into the world of efficient coding!

1. Arrow Function with Implicit Return

For single expression functions, you can use arrow functions with implicit return for more concise code.

// Longhand
const multiply = (a, b) => {
  return a * b;
};

// Shorthand
const multiply = (a, b) => a * b;

2. Default Exports and Imports

For modules with a single export, you can use default exports and imports for shorter syntax.

// Longhand (module.js)
const sum = (a, b) => a + b;
export default sum;

// Shorthand (module.js)
export const sum = (a, b) => a + b;

// Longhand (main.js)
import { default as sum } from './module';

// Shorthand (main.js)
import sum from './module';

3. Array.find() and Array.findIndex()

The Array.find() and Array.findIndex() methods allow you to find elements in an array based on a condition.

// Longhand
const numbers = [1, 2, 3, 4, 5];
let foundNumber;
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 3) {
    foundNumber = numbers[i];
    break;
  }
}

// Shorthand
const numbers = [1, 2, 3, 4, 5];
const foundNumber = numbers.find((number) => number > 3);
const foundIndex = numbers.findIndex((number) => number > 3);

4. Async/Await

async/await is a modern approach to handle asynchronous code, making it look more synchronous and easier to read.

// Longhand
function fetchData() {
  return fetch('https://api.example.com/data')
    .then((response) => response.json())
    .then((data) => {
      console.log(data);
    })
    .catch((error) => {
      console.error(error);
    });
}

// Shorthand
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

Conclusion:

Mastering shorthand techniques in JavaScript is a valuable skill that can significantly improve your coding efficiency and readability. By using arrow functions with implicit return, default exports and imports, Array.find(), Array.findIndex(), and async/await, you can write more concise and expressive code, reducing unnecessary verbosity and improving the overall quality of your projects. Incorporate these shorthand techniques into your coding practices to become a more proficient and effective JavaScript developer.

a href="https://www.buymeacoffee.com/abidullah786">

Connect with me on Twitter, Linkedin and GitHub to stay updated and join the discussion!