Dissecting JavaScript Series - Part 1

RG Ritochit Ghosh May 11, 2024

Introduction

JavaScript is an interpreted programming language used to create interactive and dynamic websites. JavaScript was created by Brendan Eich in May 1995, within 10 days. Eich worked at Netscape and implemented JavaScript for their web browser, Netscape Navigator.

Let's now understand the workings of JavaScript first...

Workings of JavaScript

Execution Context

Everything in JavaScript works inside an execution context. It is the environment where the JS code gets executed.

An execution context consists of two parts:

script.js

var n = 2;
function square(num){
  var ans = num * num;
  return ans;
}
var square2 = square(n);
var square4 = square(4);

Call Stack

The call stack is used to manage the flow of function calls and their execution in a program. It keeps track of the active function calls in a program and their execution context.

In JavaScript, the call stack operates on a Last In, First Out (LIFO) basis.

Hoisting

Hoisting is a phenomenon in JavaScript by which you can access the variables & functions even before you have initialized them in the program.

Arrow functions are not hoisted in JS as they are treated as normal variables.

Window Object

The window is a global object, which is created along with the Global execution context in a browser environment.

script.js

var x = 10;
function myFunction() {
  console.log("Hello, world!");
}
console.log(window.x); // 10
window.myFunction(); // Hello, world!

Scope

Scope refers to the context in which variables, functions, and objects are accessible within the JS program.

Lexical Environment

Whenever an execution context is created, a lexical environment is also created along with it.

Temporal Dead Zone

In JavaScript, the Temporal Dead Zone refers to the period between entering into a scope and the actual declaration of a variable.

script.js

console.log(num);
let num = 18;

Types of Errors in JS

There are mainly 3 types of errors in JavaScript:

Reference Error: This occurs when you try to access a variable or object before it is declared.
Syntax Error: The error obtained when the basic syntax of JavaScript is violated.
Type Error: Happens when you try to use a value in a way that is not supported by its data type.

Closure

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state.

script.js

function x(){
  var a = 12;
  function y(){
    console.log(a);
  }
  return y;
}
var z = x();
z();

Conclusion

JavaScript is a versatile programming language that plays a crucial role in creating interactive and dynamic websites.

As we continue in this JavaScript series, we'll discuss topics like functions, callback functions, event listeners, browser features, and more.

Hope you enjoyed this blog. Do share your valuable feedback!