Why “this” is undefined inside a fat arrow function definition? [duplicate]

by

Unlike regular functions, Arrow functions does not have a this of their own, only regular functions and global scope have this of their own.

Which would mean that whenever this would be referred in arrow function, it will start looking up the scope to find the value of this, or in this case, during lookup it found, that the object is not having a this of its own, hence, it went up to global scope and bound the value of this with global scope, where it won’t find anything. These two examples will solve your doubt.

var obj = {
    a : 'object???',
    foo : () => { console.log(this.a) }
};

var a="global!!!";

obj.foo();              // global!!!

Wrapping arrow within a function

var obj = {
    a : 'object???',
    foo : function() {
        return (() => {
            console.log(this.a)
        })();
    }
};

var a="global!!!";

obj.foo();

Here, I have tried to explain the behaviour of this for arrow in depth.

https://github.com/anirudh-modi/JS-essentials/blob/master/ES2015/Functions/Arrow%20functions.md#how-this-is-different-for-arrow-functions

More Related Contents:

  1. Understanding members of Symbol – function constructor
  2. Find list of strings that matches a pattern that start with a special character « and end with a special character »
  3. Unable to access React instance (this) inside event handler [duplicate]
  4. Javascript object literal: what exactly is {a, b, c}?
  5. Why does babel rewrite imported function call to (0, fn)(…)?
  6. ES6 Modules: Undefined onclick function after import
  7. Spread Syntax ES6
  8. Async function not returning value, but console.log() does: how to do? [duplicate]
  9. ES6 Object Destructuring Default Parameters
  10. Using _ (underscore) variable with arrow functions in ES6/Typescript
  11. How to convert a plain object into an ES6 Map?
  12. Javascript ES6 TypeError: Class constructor Client cannot be invoked without ‘new’
  13. Why are ES6 classes not hoisted?
  14. Javascript ES6 cross-browser detection
  15. How to find duplicate values in a JavaScript array of objects, and output only unique values?
  16. How do I make a “public static field” in an ES6 class?
  17. comparing ECMA6 sets for equality
  18. Mixins for ES6 classes, transpiled with babel
  19. Get list of duplicate objects in an array of objects
  20. What is the difference between importing a function expression or a function declaration from a ES6 module?
  21. destructuring falsy and null with default parameters
  22. What can we do with ES6 Generator that we cannot with for loop?
  23. Update one of the objects in array, in an immutable way
  24. How to namespace es6 classes (for React components)
  25. JavaScript asynchronous programming: promises vs generators
  26. Unnecessary ‘else’ after ‘return’. (No-else-return)
  27. using await on global scope without async keyword
  28. How to understand JS realms
  29. ES6 arrow function and lexical scope inside a function [duplicate]
  30. ESLint: “error Parsing error: The keyword ‘const’ is reserved”

Leave a Comment