0xCODE
Published in

0xCODE

Hello Fat Arrow Function

Basic ES6 Fat Arrow => Function Statements In Javascript

ES6 or ECMAScript 2015 introduced a new way of writing Javascript functions. This used the arrow function statement, also called the “fat arrow” denoted by the “ => “ notation. It is supported by various web browsers that are based on the Chromium engine (e.g. Google Chrome, Firefox), so it has wide reach among developers. It saves time and simplifies writing functions. What it provides is a short cut for developers, but requires learning a new way to write the code.

The Function Statement

The basic function statement is an expression that is a block of code that execute routines and methods contained within its scope. A function must be called or invoked in order to execute. It is written by declaring the function and its routines and methods contained between { }. Here is a simple example in traditional Javascript notation:

var addTwoNumbers = function(x, y) {
return x + y;
};

In its simplest form you are taking the sum of two numbers (integers by default) with a value of x and y and returning its result. This is how developers have been coding prior to ES6.

The Arrow Function Statement

When using ES6 notation syntax, fewer lines of code are required and appears much more simplified:

var addTwoNumbersArrow = (x, y) => { return x + y };

The ‘function’ keyword in the statement is removed and replaced by the “ ( ) “ and the “fat arrow” or “ => “. The statement fits in one line. Developers who need to code large applications can save time coding by issuing arrow functions rather than having to write out the entire statement with the ‘function’ keyword all the time.

Declaring Functions

There are two types of function declarations we can do. We can use a parameter as an argument or use no parameter in a function statement.

This is your example of a typical function statement with a simple parameter:

var hello = function(val) {
var val = "Everybody"
return "Hello " + val;
};
Hello Everybody

This can be written in ES6 like so:

hello = (val) => "Hello " + val;

Using the console, the ES6 code can be implemented like in this example:

> hello = (val) => "Hello " + val;
> var demo = hello("Man");
> demo
Hello Man

To see how arrow functions have simplified writing functions consider the next example. Here is a typical function statement with no parameter:

var greet = function() {
return "Hello World!";
};
Hello World

With an arrow function, all the developer needs to do is remove the function keyword like so:

var greet = () => {
return "Hello World!";
};
Hello World

The above code can be even further simplified in ES6. If the function has just one statement that returns a value, the brackets can be removed along with the “return” keyword. You don’t even need to include the “var” keyword but that would not be good practice when it comes to more complex programs. It can be written like in this example:

greet = () => "Hello World!";Hello World

Fat Arrow With Arrays

Here is a use case example of how to code more neatly using the ES6 arrow function. Let us say you are building a list of products using an array for an online retailer. First you build the array of elements with a name of the product and its unit price:

const products = [
{ name:'iPad Pro', unitPrice:799 },
{ name:'iPhone 11 Pro Max', unitPrice:1099 },
{ name:'AirPods', unitPrice:159 }
];

With ES5 and lower, to list the array by product name we would code it like so:

var productName = products.map(function(products) {
return products.name;
});
console.log(productName)
(3) ["iPad Pro", "iPhone 11 Pro Max", "AirPods"]

In ES6 it can be simplified into one line of code, making it more concise with less clutter:

var productName = products.map(products => products.name);console.log(productName)
(3) ["iPad Pro", "iPhone 11 Pro Max", "AirPods"]

Likewise you can list the product items by their unit prices:

var productPrices = products.map(products => products.unitPrice);console.log(productPrices)
(3) [799, 1099, 159]

Summary

Arrow function statements help simplify complex coding, reducing development time when building applications. They can be used in place of traditional syntax. It also makes the code easier to read, which looks organized and has less clutter.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store