Javascript part 16

6 min readMar 22, 2021

Today we talk about “this” keyword, hurray!

It’s going to get a bit messy, we have all have seen “this” in our code, and been like “what?”. I’m going to try to explain how to use it hopefully the right way.

When we use “this” not in a function or object but, by itself, it returns the window of the browser. It is attached to the global object, associated to the dom that is attached to the browser. (whatever that means!)

The “this” keyword is kinda like “sticky glue”, It binds itself to where it is in the program. “This” is in the window so it sticks to that and becomes it.

when we use this inside of a function “this” would be attached to the object that owns/uses it.

In this example, we use the “this” keyword to bind whatever information the user passes into the arguments. The “this” word in the example above is literally just a replacement for “Car”.

If for some reason you didn’t put anything but, just “this” statement inside a function, and it will not be set to the function but the default value would be the global object or “window”.

above example is showing you what “this” would be, so you see that if we call the “f1” function and compare it to the window object, then it returns true.

Let’s dive deeper!

More Methods.

call() method = whenever we use the “this” keyword in the body of a function, we can use the call method. The value will be bind to a particular object that we use the call method on.

A little bit more, above we are making a function called “add”, which takes in C and D arguments. We return “this. a” and “this. b ” plus c and d. We then create an object with the keys of a and b with some values.

Next, we use the “call” method on the “add” function. That takes in variable obj and some numbers of our choice which become c and d. but, since we are passing in the variable “obj” that is an object. The “this” keyword gets bound to that object, which we pass in with the keys of a and b. Lastly, we get a 16 back. (confusing I know, rarely use “this” in React so It kinda obsolete, kinda important.)

Anyways,moving on!

apply() method = apply method is like call method but instead of accepting argument list. “apply”, accepts an array of arguments.

Here we are using the same function, it only takes in two arguments that will be set when you call the function. so in our case will be 10 and 20. After that, the obj is bound to this keyword and extracts the value associated with a and b from the variable obj returning 34!

bind() method = when you use bind on a function it creates a new function with the same body and scope as the original function but, it gets permanently set to the first argument, which is set to bind.

Here we are making a function called “test”, and it returns “this. a”. We create a variable to “g” then call the function “test” with bind associated with it. That takes in an argument of an object with a key and value of “we in the function now”. Lastly, call the function “g()”.

There you go we made a new function that outputs “we in the function now”.

(Confusing stuff, I know! look at the details here)

Let's talk Arrow functions with “this”!

if you don’t know what arrow functions are read up here!

Lets go! We made a variable named newObj and it has two keys with functions attached to them. “tradFunc” will return to see if “this” is bound to the “newObj” we are creating. “arrowFunc” has two test with console.logs, one is seeing if “this” is bound to “newObj” or we are seeing if “this” is bound to the window object.

We call the tradFunc() function and it returns “ true ”, and yes, “this” is bound to newObj.

the arrowFunc() on the other hand returns false for newObj but, true for the window. That is because arrowFunc() was created in the scope of the window but, ran in the “newObj”. so the arrow function is forever bound to the scope of the window which where it was created.

Some more info about “this”

Here we created a variable named lastObj which has a prop key and a fun key . The prop is set to a number of 3000 and “fun” has a value of a function. which returns “this.prop”. when we console.log(), lasObj.fun() it will return 3000. When using “this.prop”, it sees it as lastObj.prop which has the value of 3000. so the fun() function would return 3000.

I hope that clarified some things out for you?! (Probably not, *shrug*)Keep looking at it, and practicing and you will get the hang of it.

check out some javascript….

Javascript 1 (variables and data types)

Javascript 2 (numbers and strings)

Javascript 3 (bracket notation and 20 diff string methods)

Javascript 4 (functions and how they work)

Javascript 5 (hoisting, comparison operators, and if-else statements)

Javascript 6 (diff. Equal signs, null, and undefined)

Javascript 7 (logical operator, &&, || and ternary operators)

Javascript 8 (switch statements and arrays)

Javascript 9 (10 commonly used arrays in javascript)

Javascript 10 (8 different Math. methods And parseInt Usage)