DEV Community: Zoran Stankovic

Execution Context in JavaScript (Part 1.)

Zoran Stankovic — Mon, 29 Nov 2021 17:40:37 +0000

In this blog post I will try to give answers to these questions:

What is the execution context in JavaScript?
What type of execution context exists?
What is Hoisting?

One of the essential concepts in JavaScript is learning about “Execution Context.” Once we understand what it is, it will be much easier for us to understand more advanced topics like Hoisting, Scope chains, and Closures.

Execution Context is a concept that describes the environment in which your code is running. Also, it allows the JavaScript engine to manage the complexity of interpreting and running your code.

Now let us see how we can create an Execution Context. When we run our JavaScript application, even if that is an empty JavaScript file, JavaScript creates the first Execution Context called “Global Execution Context.”

Global Execution Context

Initially, this Global Execution Context comprises two things:

a global object and
a variable called this

If we execute code in the browser outside of any function, this refers to a global object, which in this case is the window. It doesn’t matter if we are in strict mode.

If we execute this code in Node, at the top level, this is equivalent to the global object which is called global.

Global Execution Context in Browser and Node REPL

I won’t go into any details here, but in Node this is only true for the REPL. If we execute this code,

this === global; // returns true

inside of Node REPL, we will get true.

But inside of the Node module, execution of the code below will return false.

console.log(this === global); // returns false

It is because inside of node module, this refers to module.exports. In this blog post, we will focus on Execution Context inside of Browser.

Execution Context has two phases: Creation and Execution phase. We can see that in the picture below.

var x = 2;
var y = 3;
function add(x, y) {
  return x + y;
}

In Global Creation phase, JavaScript engine, as we mentioned earlier, will create a global and this objects, and also will allocate memory space for variables and functions. In this phase, the JavaScript engine will assign to the variable declarations a default value of undefined but will place whole function declarations in memory. This brings us to one term mentioned at the beginning of this blog post, and that is Hoisting. We call assigning default value of undefined to variable declarations in the Creation phase Hoisting.

Tip: It’s always better to first define your variables and then use them, don’t rely on Hoisting.

Then JavaScript engine starts to parsing and executing your code line by line. We call this process of code execution thread of execution. In this phase, the JavaScript engine also assigns the actual values to already declared variables.

Besides the Global Execution Context, there is Functional Execution Context. In the next blog post, I will tell you more about Functional Execution Context and the differences between them.

Recap

Execution context in JavaScript is a concept that describes the environment in which your code is currently running.
Execution context has two phases:
- Creation and
- Execution
There are two execution contexts in JavaScript:
- Global and
- Functional (or local)
JavaScript engine creates Global Execution Context once it runs JavaScript application.
JavaScript creates two objects for us inside of Global Execution Context:
- global object and
- a variable, this that, in the Browser, points to the same global object which is window.
Hoisting is assigning a default value of undefined to variable declarations in the Creation phase.

How to set up nvm to work with fish shell?

Zoran Stankovic — Tue, 23 Nov 2021 18:24:30 +0000

Recently, I switched from oh-my-zsh to a fish shell, and I didn’t regret it. Fish is a nice and user-friendly command-line shell. fish supports powerful features like syntax highlighting, autosuggestions, and tab completions that work, with nothing to learn or configure.
But when I tried to install nvm (Node Version Manager) I had a problem, the shell didn’t recognize the nvm command. After some investigation, I found the solution.
First, you need to install a fisher. Fisher is a package manager for the fish shell. Download fisher.fish to your functions directory or any directory on your function path.

curl https://git.io/fisher --create-dirs -sLo ~/.config/fish/functions/fisher.fish

Your shell can take a few seconds before loading newly added functions. If the fisher command is not immediately available, launch a new session or replace the running shell with a new one.
After installing the fisher, you need to add the Bass package. Bass makes it easy-to-use utilities written for Bash in a fish shell. Using fisher:

fisher add edc/bass

Create a new fish file for nvm:

touch ~/.config/fish/functions/nvm.fish

And add fish function to it to load nvm:

function nvm
    bass source ~/.nvm/nvm.sh -- no-use ‘;’ nvm $argv
end

And you are ready-to-use NVM.

How does NVM work?

If you want to download, compile, and install the latest release of node you just need to do this:

nvm install node # “node” is an alias for the latest version

To install a specific version of node:

nvm install 10.10.0 # or 8.9.1, etc.

Important to know is that the first version installed becomes the default. New shells start with the default version of node.
To set a default Node version in any new shell, use the alias ‘default’:

nvm alias default [version of node] # e.g.
nvm alias default 12.13.1

If you want to use a specific version of NodeJS for your project, you can specify the NodeJS version inside of .nvmrc file inside of your project e.g. 12.13.1 and then activate it using nvm use command in your shell.

My favorite image placeholder

Zoran Stankovic — Mon, 22 Nov 2021 20:30:12 +0000

For my first post, I decided to write about a tool that I always use gladly when mockup new websites. So here I would like to share with you my favorite image and video placeholder Place Corgi. As you can guess I am a Corgi lover and this image placeholder is just perfect for me, and everyone who loves dogs and especially Corgis.

It is easy to use, just a link to Place Corgi site with a width and optional height specified after the URL.
http://placecorgi.com/width/height

Also, we can place a video as a placeholder. To do that, we would add /v to the URL along with width and height
http://placecorgi.com/v/width/height

You can add the Place Corgi js file to your application, which will automatically replace any img tags that have the class corgi with images from Place Corgi.
For this implementation visit site here.