Due to the amazing quantity of libraries, tools and all kinds of things that make your development easier, a lot of programmers start building applications without having the deep understanding of how something works under the hood. JavaScript is the poster boy of this exact behavior. While it is one of the most complicated languages and most widely spread, many developers are attracted to using higher level tools and abstracting away the “bad parts” of the language. While you will still be able to do build amazing applications doing that, going into the JavaScript maelstrom can be quite beneficial to you. Understanding the “weird parts” is what separates the average grunt coder from the senior developer and while the JS ecosystem is ever-changing, the fundamentals are those on top of which all other tools are built. Understanding those gives you a broader perception and changes the way you look at the development process. Another topic that has been the reason for a lot of discussion is the keyword. More specifically — it’s unexpected behavior at times. About an year ago, a colleague of mine asked me to have a look at her JS code because she was having strange bugs. As a Java developer just starting to play around with JavaScript she had done the mistake of thinking she could understand the language before actually studying it — like many people do. this How many other developers going into JS have problems with , I do not know but I expect the number to be quite high. In fact this is probably the easiest concept of JavaScript that you have to understand. If I have to explain it with my own words I would probably spit out something in the lines of: this The this keyword does not refer to the function in which it is used or it’s scope. It refers to the object on which a function is being executed and depends entirely on the call-site of the function. Let’s create a really basic example to illustrate what is going on: function testThisKeyword() {console.log(this) // [object Window]} testThisKeyword() Let me give you another one which will question your understanding on JavaScript even more: function testThisKeyword() {console.log(this.name) // Alex} var name = 'Alex'testThisKeyword() What? How on earth does that input the name variable? It’s not even created in the function’s scope! This is one of the reasons that developers get really sad. It just doesn’t work the way you expect it to. Contrary to popular belief there is no black magic going on underneath. What is happening here is that the name variable is declared in the global object, therefore it can be accessed as a property on it. If we look at the call-site of the function we will see that we are not implicitly calling it on an object so this will reference the global object. The keyword gets automatically defined in the scope of every function and it’s binding happens in three ways — , and . The example with the standalone function invocation has already shown you how the works. Something to have in mind is that that is the fallback binding if another is not specified. Let’s get into more details about the and binding. this default implicit explicit default binding implicit explicit Implicit Binding const person = {name: 'Alex',greet() {console.log('Hey my name is ' + this.name)}} person.greet() // Hey my name is Alex In order to understand what value this will hold you need to look at where it is called. the function in which it is used but the call-site. In this example the owner or containing object is the person object. A trick that I like to use is to look at the left side of the function call. The object that is standing before the dot is what the this keyword will be bound to. Not Something to have in mind is that this binding can get “lost” if you start passing functions as reference. Even if you are referencing a function that is a property on an object, if you call it separately it won’t have the binding you expect and it will use the default binding. This is why the only thing that matters for is the of the function. A better and more in-depth example of this can be read in , so I won’t go into details here. this call-site Kyle Simpson’s book on this and object prototypes Explicit Binding In the example of implicit binding we have to use an owner object in order to achieve the binding that we want. But what if we don’t want to have a reference to the function on the object or we are unable to mutate it? There is a solution to explicitly say to a function what object it should use for this — using functions such as and . Using explicit binding is so common that those two functions are available from the function prototype, however there are differences between them. call, apply bind The function allows you to pass in the object to which the keyword should be bound to. It also allows you to pass arguments for the function as additional parameters. call this function greet() {console.log( this.name );} var person = {name: 'Alex'}; greet.call( person, arg1, arg2, arg3, ... ); // Alex The function is similar to with the difference that the function arguments are passed as an array or an array-like object. apply call function greet() {console.log( this.name );} var person = {name: 'Alex'}; greet.apply( person, [args]); // Alex The function is a little bit different than the first two. It function that will call the original one with bound to whatever was passed in. bind creates a new this function greet() {console.log( this.name );} var person = {name: 'Alex'}; var greetPerson = greet.bind( person );greetPerson(); // Alex A little bit earlier in the article I told you that those were the main bindings for the keyword. Well I may have lied to you, because there is also a binding that is happening when you use the keyword. However, I’m planning on writing a small article on that so I’ll skip the explanation for now. this new If you’re interested in more JS related content you can subscribe to my newsletter from or you can take a look at the other articles from the same series: here _Due to the amazing quantity of libraries, tools and all kinds of things that make your development easier, a lot of…_hackernoon.com Understanding JavaScript: Scope _Due to the amazing quantity of libraries, tools and all kinds of things that make your development easier, a lot of…_hackernoon.com Understanding JavaScript: Prototype and Inheritance _Due to the amazing quantity of libraries, tools and all kinds of things that make your development easier, a lot of…_hackernoon.com Understanding JavaScript: This Keyword _Due to the amazing quantity of libraries, tools and all kinds of things that make your development easier, a lot of…_hackernoon.com Understanding JavaScript: New Keyword _Due to the amazing quantity of libraries, tools and all kinds of things that make your development easier, a lot of…_hackernoon.com Understanding JS: Coercion _Due to the amazing quantity of libraries, tools and all kinds of things that make your development easier, a lot of…_hackernoon.com Understanding JS: The Event Loop
