Arrow Functions

Key Points

1. An arrow function expression has a shorter syntax compared to function expressions

2. Lexically binds the this value. (We'll discuss when we look at React)

3. Arrow functions are always anonymous.

File Location

We will be working in the following file:

    javascript-library
        └── 1-Fundamentals
            └── 4-Functions
                08-arrow.js <----You will be working in this file.

Shorter Syntax

When we study React, you'll see arrow functions all over the place. One big benefit is that they make the code more terse and compact. Let's look at an example. Here's a regular addition function. Notice that we declare the function, we call it and store the value in the exampleOne variable.

function addNumbers(x, y) {
    return x + y;
}
var exampleOne = addNumbers(2, 6);
console.log(exampleOne);

Here's that same function written with arrow syntax.

var addTwoNumbers = (x, y) => x + y
var exampleTwo = addTwoNumbers(2,1);
console.log(exampleTwo);

Notice a couple things: 1. The function is shorter syntax. 2. It's an anonymous function expression. 3. It uses the => operator. With

One Param Rule

A good rule to know when using Arrow Functions is the one parameter rule. If you only have one parameter, you don't need parenthesis:

var sayHey = name => "Hey " + name;
var exampleThree = sayHey("Kenn"); 
console.log(exampleThree);

More Practice

You'll see that there is a lot more to know about arrow functions, especially when you start using React. For now, it's best to just get some practice under your fingers with the syntax. Try to write 3-5 more Arrow Functions. It can be as simple as writing more math operations or another function or two that concatenates a string like sayHey. The purpose of the function is not important here. It's you getting practice with the syntax of an arrow function.