DEV Community: hariszulfiqar054

What the hell is 'this' in javascript?

hariszulfiqar054 — Fri, 05 Jan 2024 18:56:47 +0000

JavaScript, with its reputation for complexity, often leaves developers scratching their heads. Today, let's tackle one of its puzzling aspects – the notorious this keyword. Despite being vital, it tends to confuse even seasoned developers. Fear not, as we're about to unravel the mystery and make sense of what the heck this is all about in JavaScript.

Enough talk let's see how it works with some coding examples:

Hmm so what will be the output of this code 🤔
The answer is pretty simple the output will be a global object, but this pops another question that what is global object?

The value of global object depends on the environment where the javascript code will run, for example if this code runs on the browser the global object value will be window object and if this code runs in nodejs the value will be different and vice versa this type of behavior is called default binding of this.

let's take a look on few more examples to understand it more.

Take a moment and think what will be the value of this?
Yes you got it right the value will be a global object. But there is another mystery in this code example, what if we execute this code example in a strict mode of javascript?
Note: To read more about strict and non-strict mode
The output of this will be undefined but why the value of this is a global object in non-strict mode? The answer is pretty simple it's because of the this substitution in javascript which happens during the run-time.

Let's unfold how this works inside the methods.
FYI : Methods are the function which are associated with an object.

let's execute the code see the output.

As you can see the value of this is referring to it's parent object because the execution context is changed from global object to a javascript object this process is called implicit binding.

What if we replace the printName function with an arrow function?

In this case the output of this will be a global object as in arrow function javascript refers the value of this from the enclosing lexical context in this case the enclosing lexical context is global object. Let's take another example to clear the doubts about it.

As we know that in case of arrow functions the value of this is the enclosing lexical context in this case the enclosing lexical context is the function printName so as a result the value of this will be the following.

There is also one more topic where you can explicitly change the value of this during the runtime execution using some functions for example call, bind and apply. Let's leave this for another discussion. I hope you find this article helpful. :)

That's pretty much you can read more about this here.

Pop the bubble of JavaScript Closures.

hariszulfiqar054 — Sat, 15 Apr 2023 22:38:00 +0000

As a beginner in the world of JavaScript, you might have heard a lot about closures - those mysterious and somewhat intimidating creatures that seem to lurk in the shadows of your code. You might have heard stories of developers pulling their hair out, spending hours upon hours trying to debug an issue caused by a closure. But fear not, my friend, for closures are not as scary as they may seem!

In fact, closures are one of the most powerful features of JavaScript, allowing us to create functions that can retain access to variables that are defined outside of their own scope. This means that we can create functions that can access and manipulate variables from a higher scope, even after that higher scope has been closed.

Think of it like a treasure chest - once you close the lid, you might think that the treasure inside is out of reach. But with closures, you can create a secret key that allows you to open the chest and access the treasure even after it's been closed. Pretty cool, right?

Now, don't get me wrong - closures can be a bit tricky to wrap your head around at first. But once you understand how they work, you'll be able to create more powerful and flexible functions in your JavaScript code. So don't be afraid to dive in and explore the world of closures - who knows what kind of treasure you might find!

Before diving deep into closure let's understand what is lexical scope and how it relates to closures.

Lexical Scope :

Lexical scope is the set of rules that determines how a variable is accessed within a program. In JavaScript, when a function is defined, it creates its own scope, which is known as the local scope. This local scope contains all of the variables and functions that are defined within that function.

Let's see a code example of what the lexical scope of a variable looks like.

Now you have some idea about the lexical scope let's deep dive into the closure world.

Closures :

What the hell is a closure? The answer is very simple, function with its lexical scope forms a closure.

Let's see a simple code example to understand the concept of closure better.

Take a deep breath and look at the code. What will be the output? Does the code throw an error that the variable is not found? Let me break that bubble for you. The output will be hello world printed on the console. Pretty annoying right? No that's the beauty of javascript closures and you can utilize this pattern to write powerful functional programming code.

Let me show a real-life example to understand it better.

How we will look for room 5? We will go to the ground floor we will not find room 5 then we will go to the 1st floor we will not find room 5 then we will go to the 2nd floor where we will find room 5.

Let's map this on the code example :

The output will be room5 printing on the console.

How it's working ?
The room service function is looking for the room5 variable. It will start looking at its current local scope (roomService function) if the variable is not found it will jump to the parent scope (groundFloor function) if the variable is not found it will jump to one level more parent scope (firstFloor function) if the variable is not found it will jump to one level more parent scope (scopeBuilding function) where it will find the room5 variable.

Now you have a clear understanding of how closures work behind the scenes let's look at some advanced patterns of closures that you will see in the code that you have written but maybe don't know about it.

Let's look at a code example:

If you see the code I created a function adder which is returning another function which is utilizing the value of adder function and adding that value to whatever value is passed to that function. I called the function adder with 2 and store the returned value of the adder function which is also a function into a variable called twoAdder. When I called the twoAdder function with 5 value the output printed on the console is 7 but why is that? Because the twoAdder function is creating a closure and holds the lexical scope of its parent function even after its execution is ended. Same case with the fiverAdder function.

Now you have a pretty good understanding of how closures are created and how it works now you can use and point out this pattern in your code pretty easily.

Previous Article :
https://dev.to/hariszulfiqar054/javascript-hoisting-behind-the-scenes-5b6j

JavaScript hoisting behind the scenes.

hariszulfiqar054 — Sat, 18 Mar 2023 16:43:37 +0000

Do you ever wonder how the javascript engine works behind the scene and how it manages variable hoisting? If not no worries we will dive deep into it and see how all this magic happens behind the scene.

First, let's understand how javascript code runs. Consider the following code to start things.

Although there is a myth that javascript is interpreted language that's incorrect, Javascript compiles the code before the execution. Javascript engine is v8 in the case of chrome tokenized the code and converted it into the machine understandable code.

Code execution

When the compiler sees var a = 2; it creates memory space with the label a in the call stack and assigned the value undefined to it as a placeholder. After the compilation ends undefined during the runtime value is replaced with 2.
When the console.log(a); is executed during the runtime that's how the conversation between the engine and execution context looks like.

Engine : Hey context! do you know a variable named a?
Execution context : Hey! Yes I have a variable with a name.
Engine : Great! I have a LHS reference of the variable a. Can you provide me with the RHS of it?
Execution context : Yes no problem , there you go.

Result in the console: Displays 2.

Now you have a bit of an understanding of how javascript code run and how it interacts with the call stack.

As you all know there are several ways you can declare and initialize the variables. Let's look at the difference and understand the difference between them.

Let's look at the var first.

Consider the above code what should be the expected output take a minute and think......... is it an error or it outputs the value 2?
Surprisingly undefined will be printed on the browser console but why is that? As we discussed above before the execution javascript engine tokenizes the code and compiles it so during the compilation time a namespace labeled variable will be created in the call stack with the placeholder undefined. When the javascript engine runs the code console.log(variable); line occurs before the variable declaration and at that time call stack has the placeholder value undefined for the variable so the console output that value undefined and after that when the javascript engine reaches to var variable = 2; line it replaces the undefined value with the value 2 but at that time console.log(variable); is already executed.

You can also use let and const keywords to initialize and declare variables in javascript and let's look at these and how these are different from var.

Consider the above code what should be the expected output take a minute and think again......... is it an error or it outputs the value hello world!!! or it outputs the value undefined?
So the wait is over the output will be Reference error. But why is that? isn't should display undefined? Javascript engine starts to tokenize the code during the compilation time when the javascript engine sees the variable declared with let keyword i.e let helloworld = 'hello world!!!'; it creates a memory space in the temporal dead-zone not in the call stack and the temporal dead-zone is not accessible to the execution context so instead of undefined reference error is thrown by the engine.

As you have heard that the let is blocked scope and var is function scope. Let's look at it with an example.

Consider the two same code blocks the only difference is the variable initialization.

What will be the output of the first code block? Think about it.....Think hard....Alright so the output will be 10 because the variable declared with var is scoped with the function in which the variable is declared. And there is a drawback of using var because as we see it is polluting the scope and it can create conflicts if we use variable i in another place. And the execution of for loop is completed so there is no need for the variable i but due to the var behavior, it's still there and accessible.

If we look at the second code example what will be the output take a deep breath and think......Alright, I will tell you. The output will be a Reference error but why is that ? As we see the let variable limits itself within its scope. And after the for loop execution the garbage collector frees up the memory so no i variable exists after the for loop block scope.

NOTE: The let and const are the same thing the only difference is that const cannot be reassigned.

Keep following I will be adding more blogs related to javascript.