Arrow Function in Javascript

Arrow Function in Javascript

We always love shorter way don't we? It is more comfortable to either read or write code lines which is shorter and cleaner whilst also maintain clear semantic. I think that's why now people generally prefer to use Arrow Function(of course also because it is newer) instead of regular javascript's function. When it comes to performance though, arrow function and regular function seems to have no difference. See people comments here.

Standard Definition

// function definition
const function_name = (param1, param2, param3 /*and so on*/) => {
  //function body
}
//function calling
function_name();

Unlike regular function, the arrow function doesn't have function keyword. If you plan to use it later, you can hold it in a variable with whatever keyword const or let. Later when you want to call the function, you can call that variable like you call a regular function. In above example, the variable that hold the function is function_name so when you want to call the function, you call it with function_name.

Because the function name is variable that you want it to hold a function body, you of course put the assign = operator after it. Then you start to mention all your function's parameters inside ( and ). Next, the arrow which is combination of = and >, followed by open curly brace { and closing curly brace } to indicate your function body.

That's the standard definition but for some circumstances we can make the arrow function even shorter.

Function with one parameter

const printName = name => {console.log("The name is ", name)};

printName();

First situation is when you have only one parameter for your function. In this case, you can avoid the open and close brackets in parameter definition. See example above.

Function with no parameter

const sayaHello = () => {console.log("Hello world!")}

In above example is the situation where your function doesn't have a parameter at all. In this case, the open and close brackets in parameter definition must remain.

Function with single line body

If you have function with just single line in its body, you can avoid the open and close curly brackets that define the function's body. Since our examples above has just a single line of code, we can rewrite them this way:

const printName = name => console.log("The name is ", name);
const sayaHello = () => console.log("Hello world!")

If we have some parameters and the only line in the function's body is returning a value, we can even make the function definition more simple like this one:

const add = (a, b) => a+b;

Inline function definition

Actually the only structure of the arrow function is like this ()=>{}. Inside the () are the parameters place, and inside the {} are the function body. In our standard definition, we also has a variable that hold the function definition. Why? Because we plan to use it later in some other part of our code.

But there are also situations where you don't need to call the function later, may be because you only need to call it once when your HTML button is clicked for example

<button onClick={()=>{alert("I'm clicked")}}>Click me!</button>

On the example above, your event require a function for it's onClick event. A reference to function must be provided there. But instead of creating another variable that hold the function definition and then put the variable name inside {} of the event, you can directly put the arrow function definition there. See that template ()=>{} for the onClick event? that's the inline style in defining an arrow function.

Because above function definition only has one single line body it could be as simple as this:

<button onClick={()=>alert("I'm clicked")}>Click me!</button>