We shall be discussing one among the recent developments in JavaScript and how it is getting goals easily achieved by programmers. Let's talk about JavaScript ES6 Arrow Functions. If you have always wondered what a JavaScript ES6 arrow function is and how it can be used in JavaScript programming then this article is for you.

Before we delve into what a JS arrow function is it is of essence to understand what function is all about

Functions

A function is simply a "chunk" of code that you can use over and over again rather than writing it out multiple times. Functions enable programmers to break down or decompose a problem into smaller chunks, each of which performs a particular task.

JavaScript function

There are three ways of writing a function in JavaScript:

1. Function declaration
2. Function expression
3. Arrow function

Function declaration

Function Declaration is the traditional way to define a function. It is somehow similar to the way we define a function in other programming languages. We start declaring using the keyword “function”. Then we write the function name and then parameters.

//function declaration
function height (l,b) {
console.log ('the height of this building is '+l*b);
}

//function call
height (4,6);

Function expression

Function Expression is another way to define a function in JavaScript. Here we define a function using a variable and store the returned value in that variable.

//function expression
var height = function (l,b) {
console.log ('the height of this building is '+l*b);
}

//function call
height (4,6);

Arrow function

In using JavaScript ES6 Arrow function, we dare to make our lines of code concise thereby reducing our lines of code to achieve our desired outcome. The JS ES6 Arrow function allows us to write a function without having to use the "function" keyword as used in the other ways of writing a function as highlighted above but we now use the arrow symbol "=>" in the place of the "function" keyword. Now we know where it has its name from. With the JS ES6 Arrow function you write a shorter syntax of code compared to function declaration and function expression.

Some varieties of syntaxes are available in arrow functions.

Single Expression

// //arrow function
height = (l,b) => l*b;

 //function call
 console.log ("the real height is "+height (4,6));

In the above expression, the arrow function has one expression, lb*, so it returns the value of the expression.

Block syntax or multiple expressions

It is a different case when using the block syntax. In using the block syntax in arrow function, you will need to use the return keyword.

// //arrow function
height = (l,b) => {

    l*b;
    return l*b;
} 
 //function call
 console.log ("the real height is "+height (4,6));

In a situation where the function body has more than one statement, you need to wrap the function body with curly braces and use the return keyword to return the result.

Conclusion

Although arrow functions help with writing short and concise code, it is not reader friendly for beginners. Most programmers are used to the traditional way of writing functions, and arrow functions change this completely. This makes code harder to read and might take a while for someone newer to grasp the code.

Therefore, in such circumstances, developers are advised to stay consistent on a particular method of writing JavaScript functions. The primary objective when you compose a function is to create the purest function practicable. Meaning that the function would still return its same value. If you’re using regular functions or arrow functions, stay consistent with it, it doesn’t matter. It should be about writing readable and cleaner code always. Arrow functions save you some keystrokes when working with the functions.

Thank you for reading through and I hope this article was able to clear your curiosity about JavaScript ES6 Arrow functions.

Be kind enough not to forget to share this article