More JavaScript Questions 101(MJSQ 101): this

More JavaScript Questions 101(MJSQ 101):

Continuing from my original blog post, I give you more javascript 101 questions!:

Today's blog will be dedicated to answering how this works.

this can produce many different results and a lot of it is case dependent. Because you're in the world of JS, a great way to determine what this is, is to console.log(this) to check. BUT, if you want to understand the background work that is happening, please read on.

Arnav Aggarwal has a great blog explaining how this works. Much of the examples below are taken directly from his blog.

The highest rule of all is that this is determined when a function is invoked (it's call site) The remaining rules in order of precedence is showcased below:

1. If new keyword is used when calling a function, this is a brand new object.

function forExample() {
    console.log(this);
    this.value = "football";
    console.log(this);
}

new forExample();
//output: {}
//output: {value: 'football}

2. If apply, call, or bind are used to call a function, this inside the function is the object(in this case, touchdown) that is passed in as the argument.

function score() {
    console.log(this);
}
var touchdown = {
    value: 6
};
var bindscore = score.bind(touchdown);
bindscore();     // output: -> { value: 6 }
score.call(touchdown);  // output:  { value: 6 }
score.apply(touchdown); // -> output: { value: 6 }

3. If a function is called as a method, this is the object. When a dot is to the left of the function invoked, this is the object to the left of the dot.

var obj = {
    value: 6,
    printThis: function() {
        console.log(this);
    }
};

obj.printThis(); 
//output: {value: 5, printThis: function()}

4. If a function is invoked as a free function invocation, (global), this is the global object. In a browser, it's the window.

function fn() {
    console.log(this);
}
// If called in browser:
fn(); // output: Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

To note: If multiple scenarios exist, the order of the previous mentioned conditions are important in establishing this.

5. If the function is an ES2015 arrow function, all rules are thrown out the window. To determine this, go a line above the arrow function's creation and see what this is there. It will be the same in the arrow function.

const obj = {
    value: 'Chiefs win superbowl.',
    createArrowFn: function() {
        return () => console.log(this);
    }
};
const arrowFn = obj.createArrowFn();
arrowFn(); 
// output: { value: 'Chiefs win superbowl.', createArrowFn: ƒ }

Hope this explains this better for you!

That's all for today, please leave any comments/questions/corrections in the comments. Thanks!

Sources:

Huge huge thanks to github user: yangshun for aggregating the most popular JS, CSS and HTML questions and giving us his answers to it. My weekly blog posts are to go over several questions at a time to reinforce my knowledge of fundamental javascript as I grow my expertise in it. Many of my blog will be paraphrasing if not direct quote from his github. Find his tech interview handbook here and please support him!

And an additional thank you to Flatiron alum: Marissa O. who is a badass developer at Forbes magazine for directing me to his blog!

Other sources:
https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3