Search for a command to run...
MERN Handbook 6.1: JavaScript Core Principles Uncovered
I'm a full-stack engineer from Kerala. Helping startups turn their ideas into digital realities.I specialize in designing and building modern web solutions.
No comments yet. Be the first to comment.
This series makes industry knowledge accessible, fosters growth through practical learning, and builds a supportive community for aspiring developers.
The MERN Handbook Part 01: Introduction
Designing a Stateless Execution Loop to Eliminate Context Decay in AI Coding Systems
One of the most sophisticated supply chain attacks in history was discovered because of a 500-millisecond delay. A half-second lag in an SSH login—a fractional anomaly noticed by a single, curious developer—was the only thing that stood between the s...
1. Setting the Stage: A New Breed of Supply Chain Attack The Shai-Hulud campaign represents a critical evolution in supply chain threats, moving beyond isolated package compromise to a self-propagating contagion targeting the core of modern developme...
The healthcare landscape is undergoing a profound transformation. As our cities become smarter and our lives more connected, a new paradigm is emerging that promises to redefine how we approach health monitoring and care delivery. Edge AI-enabled IoT...
As a founder deeply immersed in both hardware and software, with a specialization in AI, I've spent years observing the tech industry's relentless pursuit of the "next big thing" beyond the smartphone. For a while now, the prevailing narrative has po...
Hey everyone! Welcome back to "The MERN Handbook." In our last article, we covered the basics of JavaScript. Today, let’s explore two critical concepts: execution context and hoisting. These will help you understand how JavaScript runs your code. Let's break it down in a friendly and simple way!
The execution context is like the setting where JavaScript code is executed. It determines the behavior of your code at runtime. There are three types of execution contexts:
Global Execution Context (GEC):
This is the default context where JavaScript code starts running.
It creates the global object (like window in browsers) and sets up the this keyword to point to the global object.
Every script has its own GEC.
Function Execution Context (FEC):
Whenever a function is called, a new execution context is created for that function.
This context sets up the local scope, including arguments, local variables, and the this keyword.
Eval Execution Context:
Created when code is executed inside an eval function.
Though not commonly used, it's good to know it exists.
Each execution context goes through two phases: the creation phase and the execution phase.
Creation Phase:
Variable Object (VO): JavaScript collects all function arguments, variable declarations, and function declarations.
Scope Chain: Manages variable access within the current scope.
this: Determines the value of this.
Execution Phase:
JavaScript executes the code line-by-line.
Variables and function references are resolved, and the actual code execution happens.
Hoisting is JavaScript’s way of moving variable and function declarations to the top of their containing scope during the creation phase.
Variable Hoisting:
var are hoisted to the top, but only the declarations, not the initializations. console.log(foo); // undefined
var foo = 'Hello World';
console.log(foo); // 'Hello World'
Function Hoisting:
greet(); // 'Hello World'
function greet() {
console.log('Hello World');
}
Let and Const Hoisting:
let and const are hoisted but not initialized. They are in a "temporal dead zone" until the declaration is encountered. console.log(bar); // ReferenceError: Cannot access 'bar' before initialization
let bar = 'Hello World';
console.log(bar); // 'Hello World'
Why Understanding Execution Context and Hoisting Matters:
Predict Code Behavior: Knowing these concepts helps you understand how your code will run, especially in complex situations.
Avoid Common Pitfalls: Helps prevent bugs that can arise from variable hoisting and scope issues.
Write Reliable Code: Ensures your code works as expected, making it easier to debug and maintain.
To get a deeper understanding of these concepts, check out these resources:
Books:
JavaScript: The Good Parts by Douglas Crockford
Eloquent JavaScript by Marijn Haverbeke
You Don’t Know JS series by Kyle Simpson
Online Courses:
YouTube Channels:
I hope this detailed explanation helps you get a better grasp of execution context and hoisting in JavaScript. Stay tuned for our next post, where we'll continue exploring JavaScript functions and their power in making your code modular and reusable. Happy coding!