Why console logging this in an arrow function inside a method logs the object and when set as a value of an object property it shows {}?

Frequently Asked Questions JavaScript FAQ
1

Question

Why console logging this in an arrow function inside a method logs the object and when set as a method object it shows {}?

Answer

Being based on the review task

  • Find the value of this in a function inside of a method.

Remember what was mentioned in this lesson and this topic, the meaning of this on a method or a declared function will relate to the calling object and if it is an arrow function, it will always be the lexical context where the function exists, for example:

const obj = {
  name: 'boop',
  showTime(){
    (() => console.log(this))();
///here we have a method showtime calling an anonymous arrow function that is also
//just being made
  },
  logger: () => console.log(this), // here there is a property that is
//storing an arrow function
  loging(){
    console.log(this) // and here a method calling the console.log method
//which could count as a function
  }
}

obj.showTime() //calling the first one will give us the following as a result:
//{ name: 'boop',
 // showTime: [Function: showTime],
 // logger: [Function: logger],
 // loging: [Function: loging] }

Here’s why: the method’s meaning of this is the calling object (obj) and since we are creating and calling the anonymous arrow function inside the method, its enclosing lexical context (ie, its global scope is the object obj where the method that is calling it exists. what about:

obj.logger() // it will return:
// {}

The reason is the same as before the arrow function will resonate with the global scope of the object obj therefore the space the file is being processed will be the global scope object ( commonly, that global scope will be the browser window, the object is called window). This is why your arrow function assigned to a property will return {}. it is the Window object.


obj.loging() // this one will return the same as the first:
//{ name: 'boop',
 // showTime: [Function: showTime],
 // logger: [Function: logger],
 // loging: [Function: loging] }

This is because the method logging is console logging the calling object, which is obj.

6 Likes
2

What about if ShowTime method actually called a non arrow function inside the method? I got some weird result in that case…

1 Like
3

Why does adding a parenthesis around the anonymous function and putting a opening and closing parenthesis at the end of it made this work but if you don’t put those parenthesis it wont work?

3 Likes
4

Hoping for an answer on this too if anyone can help, thanks!

1 Like
5

That is a special function expression called IIFE, the Immediately-Invoked Function Expression.

It will be invoked immediately after its creation.

It is a common pattern for creating Local Scope.

It is to preventing function to affecting the Global Scope.

I hope this can help.

1 Like
6

() is a way to call the anonymous function
The code below is an alternative with a function variable name

const obj = { name: 'boop', showTime(){ temp = () => console.log(this) temp(); } } obj.showTime()

temp() can be thought of as the equivalent of the parentheses in the original code
Putting it in a new line can help for better understanding:

const obj = {
  name: 'boop',
  showTime(){
    (() => console.log(this))
    ();
  }
}
obj.showTime()