How to write an arrow function in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Arrow functions are a modern ES6 feature that provides a more concise syntax for writing functions, especially useful for callbacks and functional programming.
As the creator of CoreUI, a widely used open-source UI library, I’ve used arrow functions extensively throughout the codebase for cleaner and more readable code.
From my expertise, arrow functions are perfect for simple operations and callbacks due to their concise syntax and lexical this binding.
This approach reduces boilerplate code and improves code readability significantly.
Use the arrow syntax => to write concise functions in JavaScript.
const add = (a, b) => a + b
const result = add(5, 3) // 8
Here the arrow function (a, b) => a + b takes two parameters and returns their sum. The => syntax eliminates the need for the function keyword and return statement for single expressions. For single parameters, parentheses are optional: x => x * 2. For multiple statements, use curly braces and explicit return.
Best Practice Note:
Arrow functions don’t have their own this context, making them perfect for callbacks but unsuitable for object methods. This is the same approach we use throughout CoreUI components for event handlers and array methods.
