An advanced guide of Arrow Function JavaScript: Part 2

This is an advance guide of JavaScript Arrow Function and If you directly visited this page so I’ll suggest you first read part 1 here.

Let’s continue,

#4 This Keyword

#4.1 No separate this

Every function in Javascript defined its own this value, but that’s the beauty of arrow function it doesn’t do that.

Let’s understand with an example:

#4.1.1 Function Example for this keyword

function Person() {
  // The Person() constructor defines `this` as an instance of itself.
  this.age = 0;

  setInterval(function growUp() {
    // In non-strict mode, the growUp() function defines `this`
    // as the global object (because it's where growUp() is executed.), 
    // which is different from the `this`
    // defined by the Person() constructor.
    this.age++;
  }, 1000);
}

var p = new Person();

In the above example this defined inside the growUp() function is different from the this defined inside the Person() function.

In ECMAScript 3/5, the this issue was fixable by assigning the value of this to a variable that could be closed over.

function Person() {
  var that = this;
  that.age = 0;

  setInterval(function growUp() {
    // The callback refers to the `that` variable of which
    // the value is the expected object.
    that.age++;
  }, 1000);
}

In the above example, we assigned this to the variable called that, so we can use easily Person() function this inside growUp() function.

Well, get to the point, An arrow function does not have its own this. The this value of the enclosing lexical scope is used; arrow functions follow the normal variable lookup rules. So while searching for this which is not present inside the current scope, it will end up finding this from its enclosing scope. For example:

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| properly refers to the Person object
  }, 1000);
}

var p = new Person();

In the above example this inside the arrow function will refer to the Person() function because of arrow function doesn’t have its own this.

#5 No binding of arguments

As normally a function has its own arguments object in javascript, like and example below:

var arguments = [1, 2, 3];
function arr(){ return arguments[0]};

arr(2); // it will return 2

Arrow function doesn’t have its own arguments object. So, in the example below, arguments is simply a reference to the arguments of the enclosing scope:

var arguments = [1, 2, 3];
var arr = () => arguments[0];

arr(2); // it will return 1

#6 Arrow function with new operator

Arrow functions cannot be used as constructors and will throw an error when you trying to use new operator with them.

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

#7 Arrow function with prototype property

Arrow function also doesn’t have prototype property. So, if you used it anyway It will be undefined.

var Foo = () => {};
console.log(Foo.prototype); // undefined

#8 Arrow Function body

Arrow function can have two types of body “concise body” or the usual “block body“. let’s understand with an example:

#8.1 Concise body

Inside a concise body of arrow function you can only use an expression, which becomes the implicit return value.

// Concise body example
var func = x => x * x;                  
// concise body syntax, implied "return"

#8.2 Block body

When using a block body, you must have to use an explicit return statement. For example below:

// Block body example
var func = (x, y) => { return x + y; }; 
// with block body, explicit "return" needed

#9 Returning object literals

Note that, when using the concise body of an arrow function and returning object literals syntax params => {object:literal} will not work as expected. For example below:

var func = () => { foo: 1 };
// Calling func() returns undefined!

var func = () => { foo: function() {} };
// SyntaxError: function statement requires a name

This is because the code inside braces ({}) is parsed as a sequence of statements (i.e. foo is treated like a label, not a key in an object literal).

If you want to use it, you must wrap the object literal in parentheses:

var func = () => ({ foo: 1 });

#10 Line breaks

An arrow function cannot contain a line break between its parameters and its arrow. For example below:

var func = (a, b, c)
  => 1;
// SyntaxError: expected expression, got '=>'

However, you can use it in the following ways below:

var func = (a, b, c) =>
  1;

var func = (a, b, c) => (
  1
);

var func = (a, b, c) => {
  return 1
};

var func = (
  a,
  b,
  c
) => 1;
 
// no SyntaxError thrown

Browser Support

Here is this link of Part 1

An Advanced Guide Of Arrow Function JavaScript: Part 1

Thank you for reading and support. Please share it with love.