Forem: Pawan Bhatt 👨‍💻

What is "this"?

Pawan Bhatt 👨‍💻 — Tue, 03 Aug 2021 13:30:52 +0000

"this" is probably one of the most confusing topics for every JavaScript learner, mainly because of its weird behavior. But today, Iets try to get a basic understanding of the this keyword.

What is this?

this, is nothing but a special variable that is created for every Execution Context. It generally points to the owner of the function. Value is assigned to this when the function is actually called. I know you're like Whaaaaaaat?

Not to worry, lets dive a bit deeper and you'll see everything starts making sense.

this in different scenarios:

In the Global Scope:

In the Global Scope i.e. outside any function, the this keyword points to the window object.

console.log(this);

In a method:

In a method i.e. for a function defined inside an object, the this keyword points to the object which is calling the method. For instance:

const myObj = {
  getName: function () {
    console.log(this);
  },
};

console.log(myObj.getName());

So, we can use this now like:

However, if we talk of arrow functions, we still get the window object for the simple reason that arrow functions do not have their own this. It simply inherits the this from its parent scope, which in this case, is the global scope.

const myNewObj = {
  name: 'Pawan',
  getName: () => {
    console.log(this);
  },
};
myNewObj.getName();

Simple function call:

For sloppy / "non-strict mode":

In a simple function / function expression which is defined in the Global Scope, the this keyword again points to the window object, since, by default, it is the object which is calling the function.

const myFun = function(){
  console.log(this);
}
myFun();

function myfun(){
  console.log(this);
}
myfun();

** For strict mode: **

For strict mode though, the behaviour of this is a bit different as in this case, it contains a value undefined. This is because in strict mode, JavaScript checks if the this is bound to any object (as it does not automatically bind it to the global object), and hence we get undefined.

'use strict';

const myFun = function () {
  console.log(this);
};
myFun();

function myfun() {
  console.log(this);
}
myfun();

Arrow functions: For arrow functions, the this keyword picks up the value of its parent scope / parent function. This is because the arrow functions do not have their own this. This inherited this is known as lexical this because it is inherited from the owner of the function, which in our case in the window object.

const myFun = () => {
  console.log(this);
};
myFun();

Conclusion

Understanding this is a must if one is getting into JavaScript. However, only reading the articles won't help much, unless you get your hands dirty. Remember, practice is the key. So make up your own examples and analyze the value of this for different scenarios. Feel free to use the comments section if you got something to add.

Thanks a lot for reading this article. Stay Safe & Happy Learning 🙌

Liked what you read? do click that "Follow" button for more such writeups.

Find me on Twitter.

JavaScript Behind The Scenes: Hoisting & The Temporal Dead Zone

Pawan Bhatt 👨‍💻 — Sun, 01 Aug 2021 14:44:55 +0000

After being comfortable with Scope and The Scope Chain, lets spend some time understanding Hoisting, which is one of the most important yet misunderstood concepts of JavaScript. So without wasting any more time, lets jump right in.

Lets define Hoisting

Hoisting is a phenomena in JavaScript because of which some variables can be accessed/used before they are actually declared. So is hoisting any type of magic or something? Its actually not. Hoisting seems no more like a magic once we are aware of JavaScript Execution Context. Let us see hoisting in practice.

Consider the code snippet below:

console.log(`My name is ${name}`);
var name = 'Pawan';

// Output: My name is undefined

Ideally, the code above should have thrown an error stating that the variable is not defined, but it doesn't and this is because of Hoisting. Let us see what actually happens.

When the code is run, during the creation phase of Execution Context, the whole code is scanned before any line is executed and every variable is assigned a special value i.e., undefined and it is during the Execution Phase that the variables are actually assigned the values. [More Details on Execution Context Here]

Hoisting: Different Scenarios

Though hoisting may seem very straightforward, it does have some things to be taken care of:

1. Function Declarations:

Hoisted -✔
Initial Value - Actual Function
Scope - Block Scoped in case of strict mode & Function Scoped is sloppy/normal mode

2. Var Declarations:

Hoisted -✔
Initial Value - undefined
Scope - Function Scoped

3. let and const:

Hoisted -❌
Initial Value -
Scope - Block Scoped

For let and const, hoisting is not applicable so if we try to execute the following code

console.log(`My name is ${name}`);
const name = 'Pawan'; // same for let

// Output: ReferenceError: Cannot access 'name' before initialization

So, for let and const declarations, we have something as the Temporal Dead Zone which is defined as an area of code in which a variable is defined but cannot be used. This is primarily because the variable has an initial value set as 'uninitialized'. The temporal dead zone lasts from the beginning of the scope to the point where the variable is declared.

Let us see the code snippet below and make it even clearer:

function myFun() {
  const greeting = 'Hi';
  console.log(`${greeting} ${name}`);
  const name = 'Pawan';
}
myFun();

// Output: ReferenceError: Cannot access 'name' before initialization

The figure below shows the Temporal Dead Zone for the snippet:

So if we try to access the variable in the Temporal Dead Zone, we get ReferenceError and this is why using let and const is recommended so as to avoid issues due to hoisting in case of var.

4. Function Expressions and Arrow Functions:
In case of function expressions and arrow functions, the hoisting rules depend on the type of declaration used i.e., var or let/const.

This was all we had on Hoisting and The Temporal Dead Zone. In case of any queries, feel free to use the comments section.

Stay Safe and Happy Learning. 🙌

JavaScript Behind The Scenes: Scope & The Scope Chain

Pawan Bhatt 👨‍💻 — Sat, 31 Jul 2021 17:40:59 +0000

Hey fellow developers, so now that we are well verse with The Execution Context and Call Stack, its now time to dive a little deeper into JavaScript and understand what The Scope and Scope Chain is.

What do we mean by 'Scope'?

Scope is an environment in which a variable is accessible. It determines the visibility of a variable. We cannot access a variable outside its scope. JavaScript follows Lexical Scoping , which determines the scope of a variable by how the functions and blocks are placed in our code. Following are the different types of scopes in JavaScript:

1. Global Scope: Variables defined in global scope are defined outside any function or block. These variables can be accessed anywhere throughout the code.

2. Function Scope: Variables which are defined inside a function, have their visibility limited to inside the function. If we try to access them outside the function, we get a ReferenceError.

3. Block Scope: Block Scope was introduced with ES6 and only the variables defined with let and const have their scope limited to the block they are defined in. A block is any section of code between two curly braces {} (like in if, for and switch statements). However, the variables defined with var have their scope limited to the execution context i.e., global scope if the block is defined in global context and function scoped if the block is defined inside a function.

Here is a code snippet to explain the same:

    const myName = 'Pawan Bhatt';
    // Globally Scoped, can be accessed anywhere throughout the code

    function myFunc() {
    const age = 20;
    // Function Scoped, can be accessed inside the function only
    if (age > 18) {
        const teenager = false;
        // Block scoped, cannot be accesses outside the if block
        var student = 'No';
        // Function scoped, can be accessed outside if but not outside myFunc()
    }
    console.log(`${myName} is aged ${age} and is teenager? ${teenager}`);
    // ReferenceError: teenager not defined
    }
    myFunc();
    console.log(student); // ReferenceError: student is not defined

Understanding the Scope Chain:

Scope chain is what helps JavaScript to resolve the value for a variable. Scope Chain enables JavaScript to look for a particular variable or value and inherit it from the parent if it is not found in the current scope. For instance:

function a() {
  const x = 5;

  function b() {
    console.log(x);
    // Value picked up from parent scope
  }
  b();
}
a();

Let us consider the below code example and try to understand Scope Chain in a better way:

const name = 'Pawan';

function first() {
  const marks = 90;

  if (marks > 35) {
    var result = 'Pass';
  }

  function second() {
    const rank = 1;
    console.log(`${name} has marks ${marks} and result is ${result}`);
  }
  second();
}

first();

For the code snippet above, if we try to build the scope chain, it will look like:

And the scope chain flow goes like:

This means that: "Every scope has access to all the variables from its outer scope".
However, "The outer scope cannot access the variables defined in inner scope".

That was all we had to cover about Scope and The Scope Chain. For any queries or suggestions, feel free to use the comment section.

Stay Safe and Happy Learning🙌

JavaScript Behind The Scenes: The Execution Context & Call Stack

Pawan Bhatt 👨‍💻 — Sun, 25 Jul 2021 18:09:32 +0000

Hey fellow developers, in the last blog, we learnt about The JavaScript Engine & The Runtime . The topic for today will be The Execution Context and Call Stack. So without much of an ado, lets begin.

What is an Execution Context?

Execution Context is an environment that executes our JavaScript Code. In addition to this, it also stores all the necessary information that is needed for execution like the variable names or the argument names passed to a function.
"Everything in JavaScript happens inside the Execution Context"

Execution Context made easy....

To understand Execution Context in a better way, let us take an example of us ordering a burger from our favorite store. So, when we get our burger, we get the following things:

Burger (of course)
The Polybag / Paperbag (containing our order)
Ketchup, Tissues, Fries, Cola and other add-ons, which enhance our burger eating experience.

So considering our order, we can draw the following comparisons:

Burger -> Our JavaScript Code
The Polybag / Paperbag -> Execution Context
Ketchup, Tissues, Fries etc -> The functions, variables or arguments passed to the function which help/enhance our JavaScript code execution.

Here is an illustration for the same:

What's inside an Execution Context?

An Execution Context primarily consists of:

Variable Environment: The variable environment consists of the following:
- let, const and var declarations
- functions
Scope Chain (will be covered later)
this keyword (will be covered later)

So, for now, lets just forget that we know anything like the scope chain & this keyword (we'll cover it later, don't worry), and focus on the variable environment.

If we consider code example below:

const name = 'Hello World';

function sayHello(){
console.log('Hello People');
}

The Execution Context will look like:

Before moving on to how the JavaScript code is executed, let us have a look at what the Call Stack is.

The Call Stack:

The Call Stack is a place that stacks execution context on top of each other in order to keep track of the execution order. The Execution Contexts are processed in LIFO manner i.e., Last-In-First-Out.
Here is an illustration:

How is the code actually Executed?

So now that we are aware of the terminologies, let us see how our code gets executed. Take the following code snippet for instance:

const name = 'Pawan';

function sum(a, b){
let s = a + b;
return s;
}
const getSum = sum(2, 3);

The code execution takes place mainly in two phases:

The Creation Phase: In which the variables, functions are declared in the variable environment.
The Execution Phase: In which the code is executed.

1. The Creation Phase
During the creation phase, the variables and functions defined in global scope are allocated memory and assigned an initial value. For the code snippet above, the global execution context in creation phase will look like.

2. The Execution Phase:
During the execution phase, the variables are assigned values and the code is executed one-line-at-a-time. The execution context changes as follows:

So now you must be thinking, for multiple functions we would have hundreds of execution contexts, so how would JavaScript track its execution? The answer is The Call Stack. Below is how the call stack will be populated for our code:

When the code is run for the first time, the call stack looks like:
Creation Phase

Execution Phase
When the function, sum gets called, it gets its own execution context and now our call stack looks like:

Creation Phase:

Execution Phase:

Now that our function execution context has completed its execution, it gets removed from the call stack ( for now lets suppose that it does) and our getSum variable gets populated. So now our call stack will be:

After our global execution context is done executing all the statements, it will just remain like that waiting for any explicit calls/instructions including the click events or hover events etc. The execution context remains active so long as our browser window is active.

So, I hope I was able to explain how the Execution Context and the Call Stack works together to execute our JavaScript code. To summarize it:

Execution Context executes the JavaScript code.
Call Stack maintains a stack of execution contexts to maintain an order of execution.

That's all for now. Any queries and recommendations can be posted in the comment box below.

Stay Safe & Happy Learning 🙌.

JavaScript Behind The Scenes: The JavaScript Engine & Runtime

Pawan Bhatt 👨‍💻 — Sat, 17 Jul 2021 16:25:33 +0000

Hey fellow developers, so as I started learning JavaScript, I came across some really important topics that every JavaScript developer must know. So in the "JavaScript Behind The Scenes" series, we will be covering these important topics. So without any further delay, let's jump right in.

What is a JavaScript Engine?

JavaScript Engine is nothing but a program that executes JavaScript code. Every browser has its own JavaScript engine. Some of the well known JavaScript engines are V8, SpiderMonkey, Chakra etc.

Components of a JavaScript Engine

Every JavaScript Engine has two components:

The Call Stack: It is the portion of JavaScript Engine where our code is actually executed.
The Heap: The heap section of JavaScript Engine is a memory pool that stores all the objects which out application needs.

Below is a diagram to depict the same:

How is the code compiled to Machine Code?

JavaScript uses Just-in-time-compilation technique to execute the code which mainly consists of converting all of the code into machine code at once and then executing the code immediately.
So, it is a hybrid between compilation and interpretation (both the concepts are explained in detail later). For now, just note that in compilation, all the code is converted into machine code at once and is then executed later when needed. However, in interpretation the interpreter converts and executes each line of code simultaneously. Below diagram illustrates the just-in-time execution procedure:

Steps involved in 'Just-In-Time-Compilation' of JavaScript

Following are the steps involved in JavaScript's JIT compilation when any piece of JS code executes in JavaScript Engine:

Parsing: Parsing means reading the code. During this process, the code is parsed and converted to a AST(Abstract Syntax Tree). This is done by splitting the code into small meaningful pieces and then saving them all in the form of a tree. This is the step where syntactical errors are checked. This AST is later used to generate the machine code.
Compilation: In this step, the generated AST is compiled to a machine code.
Execution: The generated machine code is executed immediately.

Below figure depicts the process:

Bonus: What is the difference between Compilation and Interpretation?

Both Compilation and Interpretation convert our source code to machine code, however the way in which they do it differs. So here goes the detailed explanation for the same.

Compilation:

In compilation, the entire source code is converted into machine code at once, and is written into a file that can be executed by the computer. After the file is created, there is no need of the source code to run the code, the file created after compilation is used for running the code. In case of compilation, the code execution can take place way after the code has been compiled. For instance, when we run any application on our system, the file we run is actually an executable file that is made after compiling the source code required to perform the operation which our application is performing. Also, you don't even know when the file (say the .exe file) was actually compiled. It may have been compiled an year ago but still can be executed after such a long time. The below diagram explains compilation process:

Interpretation:

An Interpreter, works differently as compared to a compiler. Instead of compiling all the code at once, it executes the source code line by line. So that means, we do not have any concept of intermediate file creation here. Simply put forward, it just takes the source code one-line-at-a-time, and executes the code i.e., performs the function that the code is suppose to perform. So in interpretation, we will require the source code every time we need to run our code. Following is the diagram of how a interpretation works:

So that's pretty much it about the JavaScript Engine & Runtime. We will cover more such interesting topics in upcoming blogs.

Stay Safe & Happy Learning 🙌.