Understanding this keyword in Javascript

Quick Note: If you don’t understand anything or have any questions or just want to talk about tech, you can connect with me on Instagram, Facebook or twitter

This keyword in Javascript

this in ES5

This keyword represents context of the function and it depends on how you call the function , not, how you defined it.

Inside a function, this refers to the object that function belongs to.

var value = 'HELLO';
function showValue(){}
console.log( this );
console.log( window );
console.log( 'window === this : ', window === this );
console.log( 'this.value : ', this.value );
console.log( 'this.showValue : ', this.showValue );

When you define a variable, in global scope, it belongs to window object. Since functions in JavaScript are first class citizens, they are also variables. Hence, any globally named belongs to (global scope)

this is just an object. So, in global scope, this refers to window

Consider another Example

var value = 'window-value';
var showValue = function( scope ){
console.log( 'this inside ' + scope + ' is : ', this );
console.log( this.value );
};
var object = {
value: 'object-value',
showValue: showValue
};
showValue( 'window' );
object.showValue( 'object' );

Here, console.log(this.value) will come undefined because object is calling showValue and since value of thisdepends on how you call the function and we don't have value defined for our object hence it will log undefined

Problem with this in ES5

Consider this code

var provider = 'yahoo.com';
var object = {
provider: 'gmail.com',
usernames: [ 'mike', 'john', 'nina' ],
getEmails: function() {
return this.usernames.map( function( username ){
return username + '@' + this.provider;
} );
}
};
var emails = object.getEmails();
console.log( emails );

This will console.log -> mike@undefined john@undefined nina@undefined

This is because our getEmails annynomous function have Object as parent and hence when we return this.username.map , this would refer to the object But .map is another function and hence it will refer to global window

Fixing Error of this in ES5

Using Bind

var provider = 'yahoo.com';
var object = {
provider: 'gmail.com',
usernames: [ 'mike', 'john', 'nina' ],
getEmails: function() {
return this.usernames.map( function( username ){
return username + '@' + this.provider;
}.bind( this ) );
}
};
var emails = object.getEmails();
console.log( emails );

Since this inside getEmails function points to the object, .bind(this) call on anonymous function forces it to points its this to the object as well.

Using that

var provider = 'yahoo.com';
var object = {
provider: 'gmail.com',
usernames: [ 'mike', 'john', 'nina' ],
getEmails: function() {
var that = this
return this.usernames.map( function( username ){
return username + '@' + that.provider;
}.bind( this ) );
}
};
var emails = object.getEmails();
console.log( emails );

Using call and Apply

var provider = 'yahoo.com';
var object = {
provider: 'gmail.com',
usernames: [ 'mike', 'john', 'nina' ],
getEmails: function() {
var that = this
return this.usernames.map( function( username ){
return username + '@' + that.provider;
} );
}
};
var emails = object.getEmails.call(object);
console.log( emails );

Almost Similar for Apply.

this in ES6

A big relief with ES6 is fat arrow function is, this inside fat arrow function points to whatever the value of this inside upper function is . Hence value of this inside arrow function is lexically scoped.

Hence the below code snippet would work

var provider = 'yahoo.com';
var object = {
provider: 'gmail.com',
usernames: [ 'mike', 'john', 'nina' ],
getEmails: function() {
return this.usernames.map( ( username ) => {
return username + '@' + this.provider;
} );
}
};
var emails = object.getEmails();
console.log( emails );

Important Questions

Understanding this keyword with bind

Using this vs using variable in JS

Quite simply, this means (in the more traditional sense) the current scope; however, in JavaScript, this means the object calling the function as opposed to the current scope.

Why Do we do this xyz inside the funciton?

If in case you are interested to connect with me or have any questions, here are my social profile Instagram, Facebook or twitter

Also don’t forgot to give a clap if you found this article useful