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;

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

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

1. 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!

Comments

[Jon Randy 🎖️]

Your shorthand example for import is LONGER than the longhand version! Although I suspect you've messed up the comments.

Better:

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

// Shorthand (module.js) - not really shorter, just different - allows for shorter import statement
export default sum = (a, b) => a + b;

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

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

It's also important to note that unless you're using a bundler of some kind, or import maps - then the paths in the from part will need to be full paths.

[ABIDULLAH786]

Thank you for adding your point, yes the comments are altered for long and shor hands examples.

I will undate accordingly.