ES6 Arrow Function Is Simple, This Article Just Made It Simpler For JS Beginners

The first time I saw Arrow Function on Stack Overflow it got me thinking which programming language is this. I even checked my laptop keyboard for any arrow icon character in the first place. Lol. I couldn’t easily search Google because I don’t know what to type in search box except copy and paste => weird, right? But, I did just like that. I trust Google to understand my heart. May be Google knows am a JavaScript lover. Lol. Alas! I was not the only one.

Google search for Arrow function when you don’t know what it is.

So what are Arrow Functions in JavaScript?

Arrow function simply explained is an ES6 syntax for writing JS function expression. It is a minified function expression. At first, I thought it was just a replacement of function keyword with =>. Not a bad thought for a novice. Anyway, Arrow function is beyond replacement of function keyword with =>. It is a simplified expression pattern for writing function expression.

Why Use Arrow Function?

Declare functions in a simple and more concise way: With => you write less code, less keyword, less expression, less curly braces and more readable syntax.

Make the this keyword behave more intuitively: Yes! with Arrow Functions the this keyword works as you expect within its scope because Arrow functions do not have their own this value.

That’s the trend, don’t be left: This sounds funny, but, it is a serious reason to learn and use Arrow functions. When you don’t implement latest industry pattern for your stack, you will definitely be left out or feel awful in workflows and team projects. Oh! even on Open Source projects. You don’t need to be the old lady who still loves the old panties.

Basic Arrow Function Syntax:

//traditional function expression
var testJs = function(x){
 return x + x;
}
//Arrow function 
var testJs = x => x+x;

Note the following:
- You don’t need the function keyword. It is replaced by =>
- You don’t need the return keyword. JS already knows you need to return a value. Except you exceptionally want to return a value or log a value to the console.

You don’t need the expression block curly braces {} if your function contains one expression like the one above. But, you need the curly braces for function block of more than one expression. For instance:

//Single expression function
var checkMe = name => console.log(alert(name));
//Multiple expression function
var checkMe = firstNname => {
 var fullName = firstNname + “ “ + “Ibeh”;
 console.log(“My name is” + “ “ + fullname);
};

• You don’t need parentheses in naming the function parameter. That’s why we used x instead of (x). However, where you have more than one or no parameter you need parentheses. For instance:

//Use parentheses where you have more than one parameter.
var testJs = (x, y, para…) => x+y;
//Use empty parentheses where you have no parameter
var testJs = () 3 + 5;

Arrow Function and the this keyword

The second important reason for introduction of Arrow function apart from the concise expression is to make the this keyword and argument binding more intuitive. In traditional JS function, any time you set the this keyword for a function block, it takes its own value usually from the function parameter of its immediate function block. It makes the this keyword more difficult to understand, throws surprises during run time and flaws Object Oriented Programming. Arrow function this keyword binds lexically, hence takes care of the stress. For instances:

//Traditional Js function expression
function Person(name){
 this.name = name;
 setTimeout(function(){
   console.log(this.name);
 }, 100);
}
var me = new Person(‘Alex’); //prints “undefined”

Because the this keyword needs a value as an argument binding on it by setTimeout function. This is undefined.

//Arrow function expression
function Person(name){
 this.name = name;
 setTimeout(() => {
 console.log(this.name);
}, 100);
}
var me = new Person(‘Alex’); //prints “Alex”

Note: In traditional function expression the this keyword dynamically binds to the argument of its immediate function while in the Arrow function the this keyword binds lexically to the parent function.

Thanks for reading. I wrote this to understand Arrow functions because I learn faster by teaching. If you find errors, please hint me in the comment box. Am a newbie, so, I don’t get worried if you weren’t polite in correcting my error. It makes me learn.

To learn more about Arrow functions read these resources:

Read MDN Resource
Read SitePoint

Or Watch this concise Youtube Video on Arrow Functions- An Introduction