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!
Top comments (2)
Your shorthand example for import is LONGER than the longhand version! Although I suspect you've messed up the comments.
Better:
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.Thank you for adding your point, yes the comments are altered for long and shor hands examples.
I will undate accordingly.