{"componentChunkName":"component---src-templates-post-js","path":"/blog/this-in-js","result":{"data":{"markdownRemark":{"html":"

I have only posted about CSS/Flexbox as of now. Today, I decided to post about Javascript and explaining this keyword is the best way to start.

\n

I have taken Colt Steel's Web Developer Bootcamp. In that course, Elie has explained this keyword pretty well. I am going to use his method or his rules to explain this keyword here.

\n

Let us start by asking what this keyword really is? Well, this is a reserved keyword in javascript whose value gives the context of the current scope. Its value can be determined using four rules (global, object/implicit, explicit, new).

\n

1 - Global Context

\n
\n

When this is not inside a declared object, it's value is the window object.

\n
\n

Let's take a look at below code sample to understand this:

\n
console.log(this); // window\n\nfunction whatIsThis() {\n  return this;\n}\n\nconsole.log(whatIsThis()); // window\n\nfunction workingWithThis() {\n  // since the value of this is window here\n  // person will be a global variable attached to window object\n  this.person = 'Anku';\n}\n\nworkingWithThis();\n\nconsole.log(person); // Anku
\n

2 - Implict/Object

\n
\n

When the this keyword is inside a declared object, it's value will always be it's closest parent object.

\n
\n
let person = {\n  firstName: 'Anku',\n\n  sayHi: function() {\n    return 'Hi! ' + this.firstName;\n  },\n\n  determineContext: function() {\n    return this === person;\n  }\n};\n\nperson.sayHi(); // Hi! Anku\nperson.determineContext(); // true
\n

Inside sayHi and determineContext functions we used this and its value was its closest parent object (person object). So far so good right? Let us have a look at nested objects.

\n
let person = {\n  firstName: 'Anku',\n\n  sayHi: function() {\n    return 'Hi! ' + this.firstName;\n  },\n\n  determineContext: function() {\n    return this === person;\n  },\n\n  // Hey look! An object inside an object\n  dog: {\n    sayHello: function() {\n      return 'Hello! ' + this.firstName;\n    },\n\n    determineContext: function() {\n      return this === person;\n    }\n  }\n};\n\nperson.sayHi(); // Hi! Anku\nperson.determineContext(); // true\n\nperson.dog.sayHello(); // Hello! undefined\nperson.dog.determineContext(); // false
\n

The context or the value of this inside the sayHello function object was it's closest parent object i.e. dog object. The dog object doesn't have any firstName property. Hence, it returned undefined. determineContext inside dog object also returned false because the value of this was dog and not person.

\n

3 - Explicit Binding

\n
\n

Choose what we want the context of this to be using call, apply, and bind.

\n
\n

We can set/change the value of this inside any function by using call, apply, and bind methods. The table given below gives us more information about these methods.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Name of MethodsParametersInvoke Immediately
CallthisArg, a, b, c, ...Yes
ApplythisArg, [a,b,c, ...]Yes
BindthisArg, a, b, c, ...No
\n

Working with call

\n

The call method takes the value of this and an infinite number of optional arguments. Above, when we called sayHello function inside dog object, it returned Hello! undefined. I want to change the value of this inside dog object to the person object and call the function.

\n
// I am passing person as the arugment to call\nperson.dog.sayHello.call(person); // Hello! Anku\nperson.dog.determineContext.call(person); // true
\n

Now, when we ask the value this.firstName inside dog object, it refers to the person.firstName and hence we get Hello! Anku as the output.

\n

Working with apply

\n

The apply method is exactly similar to call except that it only takes two arguments. First the value of this and second, a list of optional arguments. The apply method like call method invokes the function immediately.

\n
let Anku = {\n  firstName: 'Anku',\n\n  addNumbers: function(a, b, c, d) {\n    return this.firstName + ' just calculated ' + (a + b + c + d);\n  }\n};\n\nlet Nikhil = {\n  firstName: 'Nikhil'\n};\n\nAnku.addNumbers(1, 2, 3, 4);\nAnku.addNumbers.call(Nikhil, 1, 2, 3, 4);\nAnku.addNumbers.apply(Nikhil, [1, 2, 3, 4]);
\n

The difference between call and apply is obvious in above example. Also, notice how call and apply are changing the value of this to Nikhil in last two lines.

\n

Working with bind

\n

In bind parameters work just like the call but it returns a function with the context of this bound already! Let us have a look at the code example given below:

\n
let Anku = {\n  firstName: 'Anku',\n\n  addNumbers: function(a, b, c, d) {\n    return this.firstName + ' just calculated ' + (a + b + c + d);\n  }\n};\n\nlet Nikhil = {\n  firstName: 'Nikhil'\n};\n\n// Storing the returned function in NikhilCalc\nlet NikhilCalc = Anku.addNumbers.bind(Nikhil, 1, 2, 3, 4);\n// Calling NikhilCalc\nNikhilCalc();
\n

bind does not invoke the function immediately but rather returns a new function with passed context. We can then call the function later in our code.

\n

4 - The new keyword

\n
\n

The new keyword is used for the function and inside the function definition the keyword this refers to the new object that is created.

\n
\n
function Person(firstName, lastName) {\n  this.firstName = firstName;\n  this.lastName = lastName;\n}\n\nlet Nikhil = new Person('Nikhil', 'Jha');\n\nconsole.log(Nikhil.lastName); // Jha
\n

If you only consider the function Person then this keyword inside it refers to the window object but when a function is called in conjunction with the new keyword, this inside the function refers to the object that is created. Person function is also called constructor function in OOP.

\n

This seems like a lot of rules but after some practice, you won't need any rule to determine the value of this. It becomes obvious.

","timeToRead":5,"frontmatter":{"title":"this keyword in Javascript","date":"2017-10-28T00:00:00.000Z","tags":["Javascript"]}}},"pageContext":{"slug":"this-in-js"}},"staticQueryHashes":["3649515864","63159454"]}