Mastering JS Shorthand Techniques Part-5: Async/Await, Arrow Function, and Exports and Imports
Tags: javascript, productivity, webdev, codenewbie
Published: 2023-08-10 01:21:14

> _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](https://devwebbytes.blogspot.com/2023/08/essential-js-shorthand-technique-for-arrow-function-async-await-and-array-finds.html)

## 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.
```javascript
// 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.
```javascript
// 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.
```javascript
// 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.
```javascript
// 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"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--n7XsGLsY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy-me-a-coffee" loading="lazy" width="545" height="153"></a>

Connect with me on <a href="https://twitter.com/abidullah_786">Twitter</a>, <a href="https://www.linkedin.com/in/abidullah786/">Linkedin</a> and <a href="https://github.com/abidullah786">GitHub</a> to stay updated and join the discussion!