‘this’ in JavaScript

Photo by Gastro Editorial on Unsplash

The keyword ‘this’ in JavaScript looks scary for many but it is actually gets easier if you remember these two lines.

The ‘this’ keyword in a function of an object refers the object.
The ‘this keyword in a function of not an object refers to global object.

Yes, theory is good to read hence lets some examples to help you understand.

let personObj = {
  firstName: "Shiljo",
  lastName: "Paulson",
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
};

console.log(personObj.fullName());// Shiljo Paulson

we have object name personObj and function fullName used it hence as per the statement

The ‘this’ keyword in a function of an object refers the object.

it outputed it as expected.

var firstName = "Mohan";
var lastName = "Lal";

function congrats() {
  return `Congrats ${this.firstName} ${this.lastName}`;
}

let personObj = {
  firstName: "Shiljo",
  lastName: "Paulson",
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
};

console.log(personObj.fullName());// Shiljo Paulson
console.log(congrats());// Congrats Mohan Lal

we added two variables firstName, lastName and function congrats outside the object hence as per the statement

The ‘this’ keyword in a function of not an object refers to global object.

Here the variables firstName, lastName are part of global object hence it printed as expected.

It’s so easy isn’t it? actually here comes the twist.

let firstName = "Mohan";
var lastName = "Lal";

function congrats() {
  return `Congrats ${this.firstName} ${this.lastName}`;
}

let personObj = {
  firstName: "Shiljo",
  lastName: "Paulson",
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
};

console.log(personObj.fullName());// Shiljo Paulson
console.log(congrats());// Congrats undefined Lal

I just changed the variable firstName from ‘var’ to ‘let’ and because of that it changed the output to undefined but then why is it so?

‘let’ and ‘const’ were introduced for this same reason “to not attach it as part of the global object”. So if you use ‘var’ it gets attached to the global object else not.

Get Shiljo Paulson’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

want some more twist?

let firstName = "Mohan";
var lastName = "Lal";

function congrats() {
  return `Congrats ${this.firstName} ${this.lastName}`;
}

let personObj = {
  firstName: "Shiljo",
  lastName: "Paulson",
  fullName: ()=> {
    return `${this.firstName} ${this.lastName}`;
  }
};

console.log(personObj.fullName());// undefined Lal
console.log(congrats());// Congrats undefined Lal

I just changed the fullName function from regular function to an arrow function.

Arrow functions isn’t is an modern replacement for regular functions.

• Using arrow functions blindly inside an object breaks the fundamental behaviour of the JavaScript.
• Arrow functions basically solves the lexical ‘this’.

If you are testing this refactored code using browser use window.congrats() and it will return an error and if you using non refactored code it will return “Congrats undefined Lal”.

Here is the screenshot from the web browser’s console

See here when I access ‘window’ object which is a ‘global’ object (when you run it in web browser).

window.firstName; // undefined
window.lastName; // Lal

lets refactor the code then.

let firstName = "Mohan";
let lastName = "Lal";

const congrats = function () {
  return `Congrats ${this.firstName} ${this.lastName}`;
};

const fullName = function () {
  return `${this.firstName} ${this.lastName}`;
};

let personObj = {
  firstName: "Shiljo",
  lastName: "Paulson"
};

let employeeObj = {
  id: 996633,
  firstName: "Ajith",
  lastName: "Kumar"
};

console.log(fullName.bind(personObj)()); // Shiljo Paulson
console.log(congrats.bind(personObj)()); // Congrats Shiljo Paulson

console.log(fullName.bind(employeeObj)()); // Ajith Kumar
console.log(congrats.bind(employeeObj)()); // Congrats Ajith Kumar

In order to not pollute the global object with unnecessary functions it is better to use ‘const’ or ‘let’ so that it doesn’t get attached to the global object.

Yes, we have modern ways to solve the above mentioned issues using ‘class’ and TypeScript but then be aware of ‘this’.

Here is the screenshot if I execute the refactored code in web browser

Note:

In web browser global object is named ‘window’.

In Node JS global object is named ‘global’.

In Web Worker global object is named ‘self’.

ECMAScript2020 standardised global object with common name ‘globalThis’ & now this is the best practice to go forward.

Let me know your thoughts and comments. Please do like (clap) and follow me to know more these kinds of concepts.