JavaScript Tutorial
JavaScript powers everything from simple button clicks to large-scale web applications. If you understand what happens behind the scenes when code runs, you debug faster, write cleaner asynchronous logic, and perform much better in technical interviews.
Why this matters
Once you understand engine behavior, execution context, call stack, and event loop, JavaScript stops feeling magical and starts feeling logical.
JavaScript executes one task at a time on the main thread. That means one call stack and one active instruction at any moment.
It still handles real-world workloads efficiently because asynchronous operations are non-blocking and coordinated through the event loop.
JavaScript runs inside an engine that parses, compiles, and executes code while managing memory.
Execution happens in two phases: memory creation phase and code execution phase.
Every running unit of JavaScript code has an execution context.
JavaScript uses a call stack to manage execution contexts in order.
Asynchronous tasks like timers, fetch, and events are handled through browser APIs and queues.
The event loop continuously checks whether the call stack is empty and then schedules queued callbacks.
Web APIs are browser-provided capabilities, not part of core JavaScript language syntax.
Async callbacks are scheduled in different queues with different priority levels.
JavaScript memory is generally discussed in terms of stack and heap.
Most advanced JavaScript interview questions revolve around internals like event loop, call stack, execution context, hoisting, and closures.
JavaScript uses a single-threaded model supported by execution contexts, call stack, Web APIs, callback queues, and the event loop.
The engine creates memory, executes line by line, and coordinates async work without blocking the main thread.
console.log(x);
var x = 5;
// During creation phase:
// x is allocated and initialized as undefined
// During execution phase:
// x becomes 5Variables declared with var are hoisted and initialized as undefined during memory creation phase.
function first() {
second();
}
function second() {
console.log("Hello");
}
first();Global context -> first() pushed -> second() pushed -> log executes -> second pops -> first pops.
console.log("Start");
setTimeout(() => {
console.log("Inside Timeout");
}, 1000);
console.log("End");Output order is Start, End, Inside Timeout because timer callback runs only after the call stack is clear.
console.log("Start");
Promise.resolve().then(() => {
console.log("Promise");
});
setTimeout(() => {
console.log("Timeout");
}, 0);
console.log("End");Output: Start, End, Promise, Timeout. Promise callback is a microtask and runs before timer macrotask.
It schedules a callback; execution depends on queue order and stack availability.
Understand hoisting and execution context before debugging scope issues.
Learn microtask vs macrotask priority to predict execution order correctly.
Yes, JavaScript runs on a single main thread with one call stack.
Async tasks are handled by Web APIs and queues, then coordinated back through the event loop.
Promise callbacks are microtasks, and microtasks are processed before macrotasks like setTimeout.
Yes. Event loop, call stack, execution context, hoisting, and closures are common interview topics.