An advanced guide of Arrow Function JavaScript: Part 1

JavaScript , , 0 Comments

An Arrow Function in JavaScript also called a “Fat arrow” function is a syntactically compact alternative to a regular function expression. It allows us to write shorter function syntax. Arrow functions are anonymous and change the way this binds in functions.

Arrow functions doesn’t support its own bindings to the this, arguments, super, or new.target keywords.

JavaScript Arrow function were introduced in ES6.

#1 Basic Example

var materials = [
  'JavaScript',
  'HTML',
  'CSS',
  'Buginit.com'
];
// before 
console.log(materials.map(function (material) { return material.length}));
// with arrow function
console.log(materials.map(material => material.length));
// expected output: Array [10, 4, 3, 11]

#2 Basic syntax

(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression
// equivalent to: => { return expression; }

#2.1 Optional Parentheses

Parentheses are optional when there’s only one parameter present:

(singleParam) => { statements }
singleParam => { statements }

#2.2 Without Parameters

If you do not have any parameters then it should be written with a pair of parentheses like the example below:

() => { statements }

#3 Advanced syntax

#3.1 Object literal expression

Parenthesize the body of a function to return an object literal expression. like an example below:

params => ({foo: bar})

#3.2 Rest and Default Parameter

Arrow function supports Rest and default parameters.

#3.2.1 Rest Example

Easily receive N number of parameters by using rest parameters:

// rest example
(param1, param2, ...rest) => { statements }

#3.2.2 Default Value Example

You can easily assign a default value to any parameter during receiving it. like an example below:

(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { 
	statements 
}

#3.3 Destructuring

Destructuring within the parameter list is also supported by Arrow functions:

var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f(); // 6

To understand Destructuring please read this article: JavaScript Destructuring ES6: The Complete Guide

Basically there are two main reasons to introduce the Arrow functions: The need for shorter functions and the behavior of the this keyword.

As you already saw the shorter syntax above. But anyway I’ll show you one more comparison example:

#3.4 Using Normal Function

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

// Using normal function 
// This statement returns the array: [8, 6, 7, 9]
elements.map(function(element) {
  return element.length;
});

#3.5 Using Arrow Function

As we have a single parameter and single statement to return, so we can use arrow function like below:

elements.map(element => element.length); // [8, 6, 7, 9]

Do you think its cool?

Well, hang on!! Buddy

We are going to use Destructuring within the parameter with the above example:

I am gonna break it into 2 steps to make it easy.

#3.5.1 Step 1:

Because we only need the length property, we can use destructuring parameter, Notice that the length corresponds to the property we want to get whereas the obviously non-special fooLength is just the name of a variable which can be changed to any valid variable name you want

elements.map(({ length :fooLength }) => fooLength); // [8, 6, 7, 9]

In the above example, we are taking the length property of the elements array and assigning it to the fooLength using JavaScript Destructuring, then returning it to map() method using a single returning statement of arrow function.

#3.5.2 Step 2:

This destructuring parameter assignment can also be written as seen below. However, let’s try to remove our variable fooLength that we were assigned to the length property in the previous example.

Hold On!!!

elements.map(({ length }) => length); // [8, 6, 7, 9] 

Boom!! what did I just saw?

Yes, we can do this, we don’t really have to assign the variable when using destructuring. So now, destructuring takes the length from the array element and arrow function treat it like a parameter then we used a single returning statement of arrow function to return the length in the above example.

Arrow Function JavaScript buginit.com
just a meme for you!

That’s all?

No, as this post has become long we will cover the rest of it in PART 2.

An Advanced Guide Of Arrow Function JavaScript: Part 2

Browser Support

Chrome 45Edge 12Firefox 22Safari 10Opera 32
Sep, 2015Jul, 2015May, 2013Sep, 2016Sep, 2015
Spread the love
  • 1
    Share

Leave a Reply

avatar
  Subscribe  
Notify of