DEV Community

Valentino Gagliardi
Valentino Gagliardi

Posted on

JavaScript: Creeping into this (Exercise)

#webdev #javascript #es6 #beginners

For each exercise try to guess the output. What this points to, and more important, why? (Assuming the code is running in a browser).

Ex. #1:

function outer() {
  const arrow = () => console.log(this);
  arrow();
}

outer();
Enter fullscreen mode Exit fullscreen mode

Ex. #2:

function outer() {
  const obj = {
    init: () => console.log(this)
  };

  obj.init();
}

outer();
Enter fullscreen mode Exit fullscreen mode

Ex. #3:

const obj = {
  nested: {
    init: () => console.log(this)
  }
};

obj.nested.init();
Enter fullscreen mode Exit fullscreen mode

Ex. #4:

const object = {
  init: function() {
    (() => console.log(this))();
  }
};

object.init();
Enter fullscreen mode Exit fullscreen mode

Ex. #5:

const object = {
  init: function() {
    setTimeout(function() {
      const arrow = () => console.log(this);
      arrow();
    }, 5000);
  }
};

object.init();
Enter fullscreen mode Exit fullscreen mode

Ex. #6:

const object = {
  init: function() {
    setTimeout(function() {
      fetch("https://jsonplaceholder.typicode.com/todos/").then(function() {
        const arrow = () => console.log(this);
        arrow();
      });
    }, 5000);
  }
};

object.init();
Enter fullscreen mode Exit fullscreen mode

Ex. #7:

const object = {
  init: function() {
    setTimeout(function() {
      const object = {
        whoIsThis: function() {
          console.log(this);
        }
      };
      object.whoIsThis();
    }, 5000);
  }
};

object.init();
Enter fullscreen mode Exit fullscreen mode

Put your solutions in the comments below!

Top comments (7)

Collapse
 
karataev profile image
Eugene Karataev •

That was a tough adventure. Couple of my answers were wrong for the first time.
After some thinking here are my solutions.
Two things to keep in mind:

  1. Arrow functions are lexical scoped (i.e. don't have their own this)
  2. Take a look at who called a function to find out it's this. Usually it's an object to the left of a dot.

Ex 1
When a function is defined in global scope, it's defined in window object. outer() is the same as window.outer(), so the caller is window object. arrow function have the same this as outer, so the answer is window.

Ex 2
New execution contexts (including this) are created on function calls. Objects don't create new execution contexts, so the execution contexts stack here is the same as in Ex1, and the answer is window.

Ex 3
window again!

Ex 4
init function is called by object, so this for init is object.

Ex 5
This example is slightly harder than the previous one. setTimeout delays a callback execution. When it's time for the function to execute, who is the caller of this function? Right, it's window object!

Ex 6
Again, the anonymous function in then is executed by window, and the answer is window.

Ex 7
This example can be simplified to

(function() {
  const object = {
    whoIsThis: function() {
      console.log(this);
    }
  };
  object.whoIsThis();
})()

And based on the previous examples, it's clear that the answer is inner object.

Collapse
 
valentinogagliardi profile image
Valentino Gagliardi •

well done!

Collapse
 
jackieli123723 profile image
Jackieli •

nice

Collapse
 
jijii03 profile image
lincey.J •

Only be able to guess the first second and third one 😂 (I'm still learning JavaScript)

Collapse
 
valentinogagliardi profile image
Valentino Gagliardi •

keep at it! :-)

Collapse
 
cyprian_dev profile image
Cyprian •

Nice one sir, though everything seems 👽 to me here..lol

Collapse
 
valentinogagliardi profile image
Valentino Gagliardi •

That's a good sign! :-)