Forem: Nishant Ranjan

What happens when you run Javascript code?

Nishant Ranjan — Sat, 21 Jan 2023 14:56:35 +0000

Hello again 👋,

There are a lot of things that happen behind the scenes inside the JavaScript engine.

Remember in the last blog I discussed that everything in JavaScript happens inside an Execution Context.

How Javascript works & execution context?

and JavaScript isn't possible without this beautiful Execution Context.

So what happens when you run a JavaScript program?

Yes, you are right An execution context is created.

Let's now understand how this beautiful execution context is created with the help of a JavaScript program.

1. var n=2;
2. function square (num){
3.   var ans = num * num;
4.   return ans;
5. }
6.
7. var square2 = square(n);
8. var square3 = square(4);

Now let us see how this whole JavaScript code is run behind the scenes.

When you run this whole code, A global execution context is created.

This execution context is created in two phases.

The first phase is known as the creation phase. This is also known as the memory creation phase. This is the critical phase.

In the first phase, JavaScript will allocate memory to all the variables and functions.

As soon as JS encounters this line 1, it will allocate memory to n.

Now the question is how will it allocate?

It will reserve a memory space here for n. Similarly, now JavaScript goes to line 2. It allocates some memory to the square.

Let me tell you what it stores.

When it allocates memory to n, it stores a special value. Which is known as undefined.

In the first phase and in the case of functions, it literally stores the whole code of the function inside this memory space.

and now it will also allocate memory to square2 and square4, it will again store undefined for them.

Let us see what happens in the second phase, which is the code execution phase.

The second phase is the code execution phase

Let's see how this code is executed after the memory allocation.

JavaScript once again runs through this whole JS program line by line and it executes the code now. So this is the point when all these functions and every calculation in the program are done.

as soon as it encounters the first line, n=2, it actually places the '2' inside the 'n'. Till now, the value of n was undefined. Now in the second phase of the creation of Execution Context, i.e. the Code execution phase,.

After finishing line one, it goes to line two and sees that We have nothing to do here. So line number two to five, there is nothing to execute literally. It moves to line number 6.

Here, we invoke a function. Whenever a function is invoked you know a mini program invoked.

Altogether new execution context is created inside the global execution context.

And It will be similar to the first phase of Global execution. Memory creation and code execution. See the below image and you will understand the whole thing. This is very very important to understand how this execution context works and Javascript code runs.

One more thing to understand here when the whole function is executed, _this whole execution context, for that instance of that function, will be deleted.
_

So now there won't be the execution context as soon as we return the value.

In line number 7 we are again invoking a function, right, and just the difference is, we are now passing in 4 over here as an argument directly. That's it.

Again, a brand new execution context will be created, the same process will happen.

But don't you think that all this is too much to manage for the JS engine?

Execution context is created one by one, inside one, and all these things are very tough to manage, right? And suppose there was a function invocation inside the function, so what would have happened is, you would have created an execution context INSIDE an execution context over here, and maybe again an invocation so it can go to any deep level right?
So it is very difficult for the JS engine to manage, and it does it very beautifully.

It handles everything to manage this execution context creation, deletion, and control, It manages a stack.

This is known as the call stack.

It has its own call stack. At the bottom of the stack, we have our global execution context. That means, whenever any JS program is run, this call stack is populated with this Global execution context. This whole execution context is pushed inside this stack.

Remember this. Whenever a function is invoked, or a new execution context is created.

That's all for today. I will explain more execution context in upcoming blogs with some visual examples.

How Javascript works & execution context?

Nishant Ranjan — Mon, 16 Jan 2023 17:03:07 +0000

Hello 👋 , In this blog, I am going to cover

How Javascript works and how the code is executed?
Is Javascript synchronous or asynchronous?
Is Javascript single-threaded or Multithreaded?

Everything in Javascript happens inside an execution context.

You can assume this execution context to be a big box or a container in which the whole JavaScript code is executed.

So execution context is like a big box and it has two components in it. The first component is memory component. This is the place where all the variables and functions are stored as key-value pairs. The memory component is also known as Variable environment.

As you can see in the image, the Key value, if suppose we have a variable 'a' which is equivalent to 10, will be stored in memory and similarly, functions are stored over here in this memory component.

The second component of this execution context is the code component. This is the place where code is executed one line at a time. The code component is also known as Thread of Execution.

Thread of execution is like a thread in which the whole code is executed one line at a time.

so here's the time for another core fundamental.

JavaScript is a synchronous single-threaded language.

What does it mean?
JavaScript can only execute one command at a time and when I say synchronous single-threaded that means that JavaScript can only execute one command at a time and in a specific order. That means it can only go to the next line once the current line has been finished executing.

I know that you must be thinking then, we have heard of something known as AJAX, right? A Stands for Asynchronous, so what does that mean? Don't worry I will explain this in upcoming blogs.

For now, just remember JavaScript is not possible without this beautiful execution context.

What is WebdriverIO?

Nishant Ranjan — Sun, 05 Apr 2020 22:12:03 +0000

WebdriverIO is a custom implementation for selenium's W3C webdriver API. It is written in Javascript and packaged into 'npm' and runs on Node.js.

Main Features of WebdriverIO:

WebdriverIO is a good automation tool which can automate both web applications and native mobile Apps.
It has integrated test runner which helps us to write asynchronous commands in a synchronous way so that we don’t need to care about how to handle a Promise to avoid racing conditions.
It has 'wdio setup wizard' which makes our project setup very easy.
We can write our own javascript functions test.
The test runner also comes with a variety of hooks that allow us to interfere into the test process in order to e.g. take screenshots if an error occurs or modify the test procedure according to a previous test result.
WebdriverIO services will be helpful to integrate our test to third party tools like 'Appium'.

Installation steps:

To install webdriverIO, you will need node to be installed in your system. Please go through below mentioned post to install it.

Install node in mac and windows

Setup your project Before installing dependencies, we will need to initialize a new NPM project. This will allow us to use the CLI to install dependencies in your project.

$ mkdir webdriverio-test && cd webdriverio-test
$ npm init -y

The -y will answer 'yes' to all the prompts, giving you a standard NPM project. Feel free to omit the -y if you'd like to specify your own project details.

Install WebdriverIO CLI

$ npm i --save-dev @wdio/cli

Generate configuration file Next, we will generate a configuration file to store our WebdriverIO settings.

To do that, just run the configuration utility:

$ npx wdio config -y

That's it! The configurator will install all required packages for you and create a config file called wdio.conf.js.

In next post we will run our first spec using webdriverIO.

Thanks for reading. Please share your thoughts.