How JavaScript Code is Executed Under the Hood

How JavaScript Code is Executed Under the Hood

In my previous blog, I had built out the .map( ) native function-showing a closer look of what it is under the hood. Here is a quick review of the code that I wrote. This code will be used in demonstrating what happens under the hood when JavaScript is executing a block of code.

In my previous blog, I had built out the .map( ) native function-showing a closer look of what it is under the hood. Here is a quick review of the code that I wrote. This code will be used in demonstrating what happens under the hood when JavaScript is executing a block of code.

function map(array,callback){
    let newArray=[];    
    for (let i=0; i<array.length; i++){
         newArray.push(callback(array[i]))
    };   

   return newArray
}

What is an Execution Context?

By definition, an execution context is a place in which JavaScript code is executed and evaluated. I find it easier to think of it as a house. Depending on which room you are in and the context of your tasks, what you have available to you is slightly different. Unless you do things a little different(no judgment here), it is safe to say that you are probably not cooking yourself a mean English breakfast, in your bathroom. JavaScript code acts, in the same way. The place in which it is executed changes the values of certain variables, like this.

Generally speaking, the execution context distinctly has two phases:

  1. Creation Phase
  2. Execution Phase

When JavaScript code is ran, during the** creation phase, the engine(under the hood) creates a **Global Execution context-this is where your code is executed. Within it there is the global memory, where variables and function definitions are stored. In my example, the console is also available so that the values are displayed to the programmer. Please note that values that you would like to be displayed on the console, have to be within a console.log( ); otherwise you are not able to see if your code is running correctly or even if it has fully executed. The diagram below shows the simple whiteboarded version of what happens under the hood.

A simple box drawing of the global execution context, global memory and the console.

under-the-hood javascript programming coding call-stack

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Principles of Functional Programming in JavaScript That Will Make Your Coding Life Easier

Who else loves to write side-effects-free functions? I think we, as programmers, all do. Today, in this story, I will walk you through the basic principles of functional programming that will make your coding life easier.

4 Ways You Can Get Rid of Dirty Side Effects for Cleaner Code in JavaScript

4 Ways You Can Get Rid of Dirty Side Effects for Cleaner Code in JavaScript. Bugs are born in many ways. Creating side effects is one of them. Some people say side effects are evil, some say they’re not.

Who Else Wants to Write Clean JavaScript Code?

Who Else Wants to Write Clean JavaScript Code? 7 Tips to Make Your Coworkers Fall in Love With Your Code.

Top 15 Simple Coding Techniques to Get Your Tasks Done with Shorter Code in JavaScript

Don’t waste time writing long code while you can make it short, yet clearer and easier to read. In this Javascript tutorial, we'll discuss 15 Simple Coding Techniques to Get Your Tasks Done with Shorter Code in JavaScript

The Code that Runs Your JavaScript Code

How often do you think about the environment that your code runs in, and the resources that are available to it when it runs? Understanding the ‘runtime’ environment can help us make better choices as JavaScript developers when writing code.