JavaScript and Scope III - Arrow Functions

As you saw in the JavaScript and Scope I - Intro and JavaScript and Scope II - Functions, functions create a new scope which will hide or shadow the value of variables in a higher scope, such as global scope.

What about arrow functions? Let's go back to our first ever code example and change it to an arrow function.

var bar = () => {  var foo = 2;
  console.log(foo); // logs 2
}

bar();

// Edit and run the code if you don't remember
// what the next line results in.
console.log(foo);

If you run the code above, you'll see that scope behaves the same as a regular function declaration: The foo variable only exists inside the function scope, and does not exist in the global scope.

The same is true of all the other examples given so far. If you want to see for yourself and have a few minutes, go ahead and edit every code example from the previous two articles and change them to use only arrow functions. Use the example above as a guide for how to change a regular function declaration to an arrow function. In each case, you will need to declare a variable to give the arrow function a name. Here are all the examples from the last two articles.

There are a couple of exceptions to how scope works in arrow functions. Arrow function scope does not include its own this or its own argument object, which will be covered in another post. For now we are focusing on the scope of declared variables.

In summary you can count on arrow functions to have their own scope for declared variables, just like regular function declarations.