Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Getting Started With ES2015

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Basic Arrow Syntax

3:43 with Andrew Chalkley

In this video we'll cover the basic syntax for arrow functions.

Benefits of Arrow Functions

The first benefit of arrow functions, as discussed in this workshop, is it's shorter syntax.

const sayHello = () => {
  console.log("Hello");
}

The advanced technical benefit with arrow functions comes with using callbacks in object orientated programming and using this.

In this example we're increasing a person's age by 1 ever one second.

function Person() {
  this.age = 0;

  var self = this;

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

}

You have to assign this to a variable, in this case self because whenever you create a function a new this value is defined.

Arrow functions do not have a this value defined. You can write the above code in the following way.

function Person() {
  this.age = 0;

  setInterval(() => {
    this.age ++;
  }, 1000);

}

Not worrying about this in your code is less frustrating. For more reading check the MDN documentation on Arrow Functions

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    [SOUND] Hello, world. 0:04
    Andrew here. 0:04
    Lifelong learner and teacher here at Treehouse. 0:05
    In this workshop, we're going to take a look at one method for 0:08
    writing functions that was was introduced in ECMAScript 2015. 0:12
    This syntax has been widely adopted by JavaScript developers. 0:16
    And you're going to come across it. 0:20
    The arrow syntax is used because it's concise. 0:22
    Arrow function syntax also solves common JavaScript gotchas surrounding scope 0:25
    when used in callbacks. 0:30
    The language problems are beyond the scope of this workshop. 0:32
    However, if you're interested now, 0:35
    I've added some reading material in the teacher's notes. 0:37
    If you would like to follow along, open up the workspace with this video. 0:41
    There are several JavaScript files. 0:45
    We're going to focus on the first three. 0:47
    Each file has some functions. 0:49
    In the first file we have two functions with no arguments, 0:51
    sayName and sayBye. 0:56
    The second file contains two functions with a single argument, square and cube. 0:59
    The third file contains three functions with multiple arguments, 1:07
    multiply, add, and Subtract. 1:12
    Before ECMAScript 2015, 1:16
    we generally declared functions in JavaScript in one of two ways. 1:18
    As a function declaration or a function expression. 1:23
    The functions in all of these three files are function declarations. 1:27
    A function declaration starts with the keyword function and 1:32
    the name you want to give to that function. 1:36
    A pair of parentheses, and curly braces 1:39
    containing the block of code you want to execute when the function runs. 1:43
    Rewriting a function declaration 1:47
    to a function expression is similar to writing an arrow function. 1:50
    Why don't we change sayName 1:55
    from a function declaration to a function expression first. 1:57
    And then to an arrow function. 2:02
    With a function expression, you assign a function to a variable. 2:04
    For example, to change the sayName function here, I simply would create 2:08
    a variable named sayName and then assign the function to it. 2:13
    Notice I removed the name of the function. 2:21
    I can still call sayName like this. 2:24
    We're using ECMAScript 2015. 2:29
    And the best practice for 2:32
    declaring a variable is to make it a constant with the keyword const. 2:33
    Using const doesn't change the functionality of the sayName function. 2:39
    But prevents us from reassigning what's inside the sayName variable. 2:44
    sayName is now a function expression. 2:49
    Arrow functions are expressions similar to function expressions. 2:52
    To covert the sayName function expression to an arrow function expression, 2:56
    we simply need to remove the keyword function. 3:01
    And after the parenthesis, 3:04
    we add an arrow which is an equal sign and a greater than sign. 3:06
    We've written our first arrow function expression. 3:12
    Let's assign this sayBye function to the constant variable sayBye. 3:15
    Remove the function name and the function keyword. 3:26
    Finally, after the parentheses, add an arrow, which is an equal sign and 3:30
    a greater than symbol. 3:35
    In the next video, we'll see how to work with single or 3:37
    multiple arguments with arrow functions. 3:41

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up