JavaScript Arrow Functions Can Make You a Better Developer

JavaScript ES6 brought exciting changes to the world of web development. New additions to the JavaScript language brought new possibilities.

One of the more popular changes was the addition of arrow functions into JavaScript. Arrow functions are a new way to write JavaScript function expressions, giving you two different ways to create functions in your app.

Arrow functions take a little bit of adjusting if you’re an expert in traditional JavaScript functions. Let’s take a look at what these are, how they work, and how they benefit you.

Arrow functions are a new way to write function expressions that were included in the release of JavaScript ES6. They are similar to the JavaScript function expressions you've been using, with some slightly different rules.

Arrow functions are always anonymous functions, have different rules for

this

, and have a simpler syntax than traditional functions.

These functions use a new arrow token:

=>

If you’ve ever worked in Python, these functions are very similar to Python Lambda expressions.

The syntax for these functions is a little cleaner than normal functions. There are a few new rules to keep in mind:

There are a lot of little changes to go over, so let's begin with a basic comparison of function expressions.

Arrow functions are easy to use. Understanding arrow functions is easier when compared side by side with traditional function expressions.

Here is a function expression that adds two numbers; first using the traditional function method:

 let addnum = function(num1,num2){
return num1 + num2;
};

addnum(1,2);
>>3

It's a pretty simple function that takes two arguments and returns the sum.

Here is the expression changed to an arrow function:

let addnum = (num1,num2) => { return num1 + num2;};

addnum(1,2);
>>3

The function syntax is quite different using an arrow function. The function keyword is removed; the arrow token lets JavaScript know you're writing a function.

The curly braces and the return keyword are still there. These are optional with arrow functions. Here's an even simpler example of the same function:

let addnum = (num1,num2) => num1 + num2;

The return keyword and the curly braces are now gone. What is left is a very clean one-line function that is nearly half the code as the original function. You get the same result with much less written code.

There’s more to arrow functions. let’s dive deeper so you get a better feel for what they can do.

Arrow functions have many different uses and features included.

Arrow functions can use one or more arguments. If you're using two or more arguments you must enclose them in parenthesis. If you only have one argument, you don't need to use parenthesis.

let square = x => x * x

square(2);
>>4

Arrow functions can be used with no arguments. If you're not using any arguments in your function, you must use empty parenthesis.

let helloFunction = () => Console.log("Hello reader!");

helloFunction();
>>Hello reader!

Simple functions like these use much less code. Imagine how much easier a complex project like a JavaScript slideshow becomes when you have a simpler way to write functions.

The concept of

this

tends to be the trickiest part of using JavaScript. Arrow functions make

this

easier to use.

When you use arrow functions

this

will be defined by the enclosing function. This can create problems that come up when you create nested functions and need

this

to apply to your main function

Here's a popular example that shows the workaround you have to use with regular functions.

function Person() {
var that = this; http://You have to assign 'this' to a new variable
that.age = 0;

setInterval(function growUp() {
that.age++;
}, 1000);
}

Assigning the value of

this

to a variable makes it readable when you call a function inside of your main function. This is messy, here's a better way to do this using arrow functions.

function Person(){
this.age = 0;

setInterval(() => {
this.age++; // Now you can use 'this' without a new variable declared
}, 1000);
}

While they are great for functions, they should not be used to create methods inside an object. Arrow functions don't use the right scoping for

this

.

Here's a simple object that creates a method inside using an arrow function. The method should reduce the toppings variable by one when called. Instead, it does not work at all.

let pizza = {
toppings: 5,
removeToppings: () => {
this.toppings--;
}
}
http://A pizza object with 5 toppings
>pizza
>>{toppings: 5, removeToppings: f}

pizza.removeToppings(); http://The method will not do anything to the object

>pizza
>>{toppings: 5, removeToppings: f} http://Still has 5 toppings

Using arrow functions you can simplify the code used to work with array methods. Arrays and array methods are very important parts of JavaScript so you will use them a lot.

There are some useful methods like the map method which runs a function on all elements of an array and returns the new array.

let myArray = [1,2,3,4];
myArray.map(function(element){
return element + 1;
});

>> [2,3,4,5]

This is a pretty simple function that adds one to every value in the array. You can write the same function with less code by using an arrow function.

let myArray = [1,2,3,4];
myArray.map(element => {
return element + 1;
});

>> [2,3,4,5]

It's much easier to read now.

Arrow functions can be used to create object literals in JavaScript. Regular functions can create them, but they're a little longer.

let createObject = function createName(first,last) {
return {
first: first,
last: last
};
};

You can make the same object with an arrow function using less code. Using arrow notation you will need to wrap the function body in parenthesis. Here's the improved syntax with arrow functions.

let createArrowObject = (first,last) => ({first:first, last:last});

You now know some different ways JavaScript arrow functions make your life easier as a developer. They shorten syntax, give you more control using

this

, make objects easier to create and give you a new way to work with array methods.

The introduction of arrow functions, along with many other features, in JavaScript ES6 shows just how important JavaScript has become in web development. There's so much more you can do though.

Want to learn more about JavaScript? Learn these JavaScript frameworks. Plus, our JavaScript cheat sheet provides valuable information and learning more about how JavaScript works can make you a better developer.