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.

What Are JavaScript Arrow Functions?

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:

• The function keyword is removed
• The return keyword is optional
• Curly braces are optional

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

How to Use Arrow Functions

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 Function Features

Arrow functions have many different uses and features included.

Regular Functions

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.

Using This

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; //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--;
   }
}
//A pizza object with 5 toppings
>pizza
>>{toppings: 5, removeToppings: f}

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

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

Working With Arrays

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.

Creating Object Literals

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});

JavaScript Arrow Functions and Beyond

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? Our JavaScript cheat sheet provides valuable information and learning more about how JavaScript works can make you a better developer.

Read the full article: JavaScript Arrow Functions Can Make You a Better Developer

Read Full Article