Arrow Functions in JavaScript

The syntactic sugar of Arrows in JS

Photo by Nick Fewings on Unsplash

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.

// Declaring and defining a constant array 'superHeroes'.
const superHeroes = ["Superman", "Captain America", "Batman", "Ironman", "Wonder Woman"];
// This time, using an Arrow function in the context of the map().
console.log(superHeroes.map((eachElement) => eachElement.length ));
//Output expected: Array [8, 15, 6, 7, 12]

So, the above demonstrates logging with console.log() method of the map() method on the ‘superHeroes’ array. That’s cool but there’s more to it — even better! Let’s change the last bit of the above code and make the context of the arrow function more intact.

// Making the last code's console.log() to exhibit better arrow function syntax.
console.log(superHeroes.map(eachElement => eachElement.length));
//Output expected: Array [8, 15, 6, 7, 12]

Yeah!! That’s it, just like that. Two important distinctions to be made clear here:

• You don’t need parentheses “()” around a single argument (in case of multiple arguments, you need them around).
• When you have only the “return”, i.e. if you have the function body containing only a return statement, you can avoid “{}” and the “return” keyword (return is already implied in this case).

A very important construct of the Arrow function is “=>”. This is the building factor of an Arrow function. Look at it, it resembles an arrow after all!

Well, imagine this scenario: in a function, look at the arguments section and body section as blocks. The => is like the chain that holds the blocks together. That holds for an arrow function as the whole point is to make the function definition short and sweet.

To see that through, let’s compare the traditional functions with the arrow ones, by breaking down the traditional function into an arrow function:

/* This code sample is from the MDN Docs of Arrow functions */
// Traditional (Anonymous) Function
function (a){
  return a + 100;
}
// Arrow Function Break Down
// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
  return a + 100;
}
// 2. Remove the body brackets and word "return" -- the return is implied.
(a) => a + 100;
// 3. Remove the argument parentheses
a => a + 100;

In case of multiple arguments or no arguments, you’ll need the parentheses in the arguments section. Let’s see that breaking down into an Arrow function:

/* This code sample is from the MDN Docs of Arrow functions */
// Traditional (Anonymous) Function
function (a, b){
  return a + b + 100;
}
// Arrow Function
(a, b) => a + b + 100;
// Traditional Function (no arguments)
let a = 4;
let b = 2;
function (){
  return a + b + 100;
}
// Arrow Function (no arguments)
let a = 4;
let b = 2;
() => a + b + 100;

I, myself, see a great deal for arrow functions in case of the usage of anonymous functions. Specifically, as the Anonymous functions in JavaScript are a way to write a function with no name or identification so that after they execute, there’s no proof that such function existed, resulting in one less element in the execution stack. However, the Arrow functions can be used for non-Anonymous, i.e. named functions:

/* This code sample is from the MDN Docs of Arrow functions */
// Traditional Named Function
function bob (a){
  return a + 100;
}
// Arrow Function
let bob = a => a + 100;

Let’s wrap it up with the Syntax definitions from MDN Docs :

Basic Syntax

One param with simple expression return is not needed:

param => expression

Multiple params require parentheses. With simple expression return is not needed:

(param1, paramN) => expression

Multiline statements require body brackets and return:

param => {
  let a = 1;
  return a + param;
}

Multiple params require parentheses. Multiline statements require body brackets and return:

(param1, paramN) => {
   let a = 1;
   return a + param1 + paramN;
}

Advanced Syntax

To return an object literal expression requires parentheses around expression:

params => ({foo: "a"}) // returning the object {foo: "a"}

Rest parameters are supported:

(a, b, ...r) => expression

Default parameters are supported:

(a=400, b=20, c) => expression

Destructuring within params supported:

([a, b] = [10, 20]) => a + b;  // result is 30
({ a, b } = { a: 10, b: 20 }) => a + b; // result is 30

Just as with any other in this limited world, the pretty arrows have their own *limitations. The Arrow functions:

• Do not have their own bindings to this or super, and should not be used as methods.
• Do not have arguments, or new.target keywords.
• Are not suitable for call, apply and bind methods, which generally rely on establishing a scope.
• Cannot be used as constructors.
• Cannot use yield, within its body.
• limitations from the MDN Official Docs.

Conclusion

Thanks for reading my article, I hope you found it to be helpful!

Possible useful links:

• MDN Official Docs for Arrow functions
• W3 Schools JS Arrow function