Member-only story
Arrow Functions in JavaScript
The syntactic sugar of Arrows in JS
JavaScript is always surprising for beginner learners, especially if they are already familiar with other imperative or object-oriented programming languages. The features it offers are abundant and very interesting. Learning JavaScript doesn’t necessarily look just like an academic or a professional requirement. It’s a beautiful tool to design the algorithms over which you plan the flow to do things. Although there are other contemporary alternatives like Java and Python, JavaScript stands firm when it comes to web technologies; the community and framework/library support for JS is a plethora.
I liked Java before I really knew JavaScript. I programmed in Java quite a lot in my Bachelor’s; I used JSP (Java Server Pages) for a web project. Had I known enough about JavaScript back then, I’d surely have opted for it. I know Java is really strong, very efficient, and one of its own kind. And yet, it helps us to know to use the right tool for the job.
Well, intros and benevolence aside, the topic I want to explore here is about the arrow functions in JavaScript, an amazing feature that was added by ECMAScript6 in 2015. They are one of the best things I love about JS.
Alright now, let’s dive into it!
The official definition from the MDN says,
An arrow function expression is a compact alternative to a traditional function expression, but is limited and can’t be used in all situations.
So it sounds like a compact alternative, which means that it’s shorter and simpler compared to the traditional function syntax.
Syntax and usage:
// Declaring and defining a constant array 'superHeroes'.
const superHeroes = ["Superman", "Captain America", "Batman", "Ironman", "Wonder Woman"];// Using an Arrow function to log the above 'superHeroes' constant.
let arrowFunc = () => {
console.log(superHeroes);
}// Calling the function!
arrowFunc();
The above example is a raw and not a very efficient usage of the arrow function, given the tools that JS provides us to operate on arrays, like map(), filter(), and reduce(). Let’s see how we can go about this in a more JS way.
