An advanced guide of Arrow Function JavaScript: Part 2
JavaScript 0 CommentsThis 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
Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
Sep, 2015 | Jul, 2015 | May, 2013 | Sep, 2016 | Sep, 2015 |
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.