What the beep is ‘this’ in JavaScript

Watch on YouTube

link to codepen if you want to follow along

The ‘this’ keyword in JavaScript can be a confusing topic for a lot of new developers. In fact, it’s a question I happened to get wrong in a job interview and as a result I’ve put some effo…

Watch on YouTube

link to codepen if you want to follow along

The ‘this’ keyword in JavaScript can be a confusing topic for a lot of new developers. In fact, it’s a question I happened to get wrong in a job interview and as a result I’ve put some effort into studying and understanding it (don’t want to make the same mistake twice). This blog post will go through the 4 principles of ‘this’ and how each one is applied in JavaScript.

Let’s start by talking about what ‘this’ means in english. If I were to tell you “Hey! Look at this” – what is this? You really have no idea what ‘this’ refers to unless I give you some context. If I pick up an object and point to it and say “look at this” you will quickly be able to understand that ‘this’ refers to the object in which I am pointing to. It’s the same in JavaScript. If we give this no context at all it will return the window to us, the global object in node and undefined in strict mode. This brings us to our first principle of ‘this’



1. Window Binding

Window binding is not something we aim to use. It’s what happens when we do not give context for the ‘this’ keyword. If we don’t tell JavaScript what ‘this’ is it will return the window to us, the global object in node or undefined in strict mode.
Here’s an example:

function sound(){
console.log(this.bark);
}

sound() // we will get back the window in the console

This brings us to our next principle:



2. Implicit binding

Implicit binding is probably the most common principle of ‘this’, it apply to objects with methods and it says when the function is invoked, look to the left of the dot. That’s what ‘this’ refers to.
Let’s see an example:

const ada = {
name: 'Ada',
breed: 'Bali dog',
bark: 'woof woof'
sound: function(){
    console.log(this.bark);
  }
}

ada.sound(); // invoking the function. This bark refers to ada's bark because ada is the left of the dot when the function is invoked

A good way to remember implicit binding is that it’s IMPLIED that whatever is to the left of the dot when the function is invoked that’s what ‘this’ will refer to.



3. Explicit Binding

With explicit binding we explicitly pass in as an argument what we want ‘this’ to refer to. We do that using .call(), .apply(), or .bind(). There are some differences with how we use these.
.call() – will immediately invoke the function, with .call you pass in the arguments 1 by 1
.apply() – will immediately invoke the function, with .apply you would pass in the arguments as an array
.bind() – you will pass in your arguments 1 by 1 but it does not immediately invoke the function, instead it returns a brand new function that can be invoked later.
Let’s see an example of .call:

function sound(){
console.log(this.bark);
}

const ada = {
name: 'Ada',
breed: 'Bali Dog',
bark: 'woof woof'
}

sound.call(ada); // invoking the function here and binding this bark to Ada's bark - we will get back woof woof in the console.

Let’s see an example of .bind:

function sound(){
console.log(this.bark);
}

const ada = {
name: 'Ada',
breed: 'Bali Dog',
bark: 'woof woof'
}

const goodDog = sound.bind(ada); // creating a new function called goodDog that can be invoked later

goodDog(); // we will get back bark bark in the console



4. New Binding

New binding is used with constructor functions. It says that when a function is invoked as a constructor function using the ‘new’ keyword ‘this’ points to the newly created object. At this point you may be asking “what is a constructor function?” Great question! A constructor function constructs other objects, that’s it’s whole life’s purpose. Some things you may notice about a constructor function is that it has a capitalized function name, there is an assignment of the ‘this’ keyword and it may be missing a return statement.
Let’s see an Example:

function Pet(name, breed, bark){
this.name = name;
this.breed = breed;
this.bark = bark;
}
Pet.prototype.sound = function(){ //here we are using the prototype keyword to abstract out the sound method so that we can pass it across newly created objects without if affecting memory
  console.log(this.bark);
}

const ada = new Pet('Ada', 'Bali Dog', 'woof woof'); // creating my new object - this.name will be 'Ada' this.breed will be 'Bali Dog' and this.bark will be 'woof woof' - 'this' is pointing to my newly created object which is ada. 

ada.sound()// will log 'woof woof'

I hope this was helpful for you! Let me know in the comments <3


Print Share Comment Cite Upload Translate
APA
Brit Hemming | Sciencx (2024-03-29T06:31:51+00:00) » What the beep is ‘this’ in JavaScript. Retrieved from https://www.scien.cx/2021/05/07/what-the-beep-is-this-in-javascript/.
MLA
" » What the beep is ‘this’ in JavaScript." Brit Hemming | Sciencx - Friday May 7, 2021, https://www.scien.cx/2021/05/07/what-the-beep-is-this-in-javascript/
HARVARD
Brit Hemming | Sciencx Friday May 7, 2021 » What the beep is ‘this’ in JavaScript., viewed 2024-03-29T06:31:51+00:00,<https://www.scien.cx/2021/05/07/what-the-beep-is-this-in-javascript/>
VANCOUVER
Brit Hemming | Sciencx - » What the beep is ‘this’ in JavaScript. [Internet]. [Accessed 2024-03-29T06:31:51+00:00]. Available from: https://www.scien.cx/2021/05/07/what-the-beep-is-this-in-javascript/
CHICAGO
" » What the beep is ‘this’ in JavaScript." Brit Hemming | Sciencx - Accessed 2024-03-29T06:31:51+00:00. https://www.scien.cx/2021/05/07/what-the-beep-is-this-in-javascript/
IEEE
" » What the beep is ‘this’ in JavaScript." Brit Hemming | Sciencx [Online]. Available: https://www.scien.cx/2021/05/07/what-the-beep-is-this-in-javascript/. [Accessed: 2024-03-29T06:31:51+00:00]
rf:citation
» What the beep is ‘this’ in JavaScript | Brit Hemming | Sciencx | https://www.scien.cx/2021/05/07/what-the-beep-is-this-in-javascript/ | 2024-03-29T06:31:51+00:00
https://github.com/addpipe/simple-recorderjs-demo