Javascript. The “this” variable

An introduction to the variable “this” and how it takes its value

The global execution environment

window === this; // true
global === this; // true

Functions

Image for post
Image for post
Photo by Artem Sapegin on Unsplash
function foo() {
console.log(this);
}
foo(); // Window
function Person(name, email) {
this.name = name;
this.email = email;
}
const person = Person('Gerardo', 'gerardo@latteandcode.com');
console.log(person);
function Person(name, email) {
this.name = name;
this.email = email;
}
const person = new Person('Gerardo', 'gerardo@latteandcode.com');
console.log(person);

New

const person = new Person('Gerardo', 'gerardo@latteandcode.com');
console.log(person);

Methods

const person = {
name: 'Gerardo',
surname: 'Fernández',
fullname: function() {
console.log(`${this.name} ${this.surname}`);
}
};
person.fullname(); // Gerardo Fernández
const person = {
name: 'Gerardo',
surname: 'Fernández',
fullname: function() {
return function() {
console.log(`${this.name} ${this.surname}`);
};
}
};
person.fullname()(); // undefined
name = 'Chrome'; 
surname = 'Window';
const person = {
name: 'Gerardo',
surname: 'Fernández',
fullname: function() {
return function() {
console.log(`${this.name} ${this.surname}`);
};
}
};
const printFullname = person.fullname();
printFullname(); // Chrome Window

Bind, call and apply

const person = {
name: 'Gerardo',
surname: 'Fernández',
fullname: function() {
const printFullname = function() {
console.log(`${this.name} ${this.surname}`);
};
return printFullname.bind(this);
}
};
const printFullname = person.fullname(); // bound
printFullname(); // `Gerardo Fernández`
const book = {
currentPage: 1,
gotoPage: function(page) {
this.currentPage = page;
console.log(`Current page: ${this.currentPage}`);
}
}
const gotoPage = book.gotoPage;gotoPage.call(book, 10); // Current page: 10
gotoPage.apply(book, [10]); // Current page: 10

Arrow functions

const book = {
currentPage: 1,
readPage: function() {
setInterval(function() {
this.currentPage += 1;
console.log(this.currentPage);
}, 1000);
}
}
book.readPage();
var callback = function() { 
this.currentPage += 1;
console.log(this.currentPage);
}
callback(); // cada 1 segundo
const book = {
currentPage: 1,
readPage: function() {
setInterval(() => {
this.currentPage += 1;
console.log(this.currentPage);
}
, 1000);
}
}
book.readPage();
const book = {
currentPage: 1,
readPage: function() {
setInterval(() => {
this.currentPage += 1;
console.log(this.currentPage);
}, 1000);
}
}
const readPage = book.readPage;
readPage();

Classes

class Person {
constructor(name, surname) {
this.name = name;
this.surname = surname;
}
printFullname() {
console.log(`${this.name} ${this.surname}`);
}
}
const person = new Person('Gerardo', 'Fernández');
person.printFullname(); // Gerardo Fernández ✅
const foo = person.printFullname;
foo(); // Uncaught Type Error cannot read 'name' of undefined ❌

Final thoughts

Do you want to read more articles like this?

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store