JavaScript: the big picture

In plain words

JavaScript is the language that makes web pages do things. HTML describes what is on a page, CSS describes how it looks, and JavaScript describes how it behaves: what happens when you click Add to cart, type in a search box or submit a form.

Today JavaScript runs far beyond the browser. The same language powers web servers, command-line tools, desktop apps and, through frameworks, mobile apps. If you learn it well once, you can use it almost everywhere a program runs.

Think of JavaScript as a language like English, and of the engine as a person who reads and acts on it. The host is the room that person works in. In a browser tab the room contains a page, a network connection and timers. In Node.js the room contains files, processes and the terminal. The language is the same; the tools on the table change.

Why it matters

Almost every website uses JavaScript on the client side, and it has been one of the most widely used programming languages for many years. For a junior developer this means three practical things:

• One language, many jobs. Front-end work (React, Vue, Svelte, plain DOM code), back-end work (Node.js, Deno, Bun) and tooling (build scripts, tests) all use JavaScript or TypeScript, which is JavaScript with types.
• Your code runs on the user’s machine. A slow loop freezes the page the user is looking at. Understanding the single thread and the event loop is what separates a smooth app from a janky one.
• The language keeps improving. New features arrive every year, so knowing where they come from (TC39) and how to check support (MDN, caniuse.com) is part of the job.

How it works

A short history: from Netscape to ES2025

Brendan Eich created JavaScript at Netscape in 1995, in a famously short time, to make web pages interactive. Despite the name it is not related to Java; the name was a marketing choice of the time. To stop each browser inventing its own version, the language was handed to Ecma International and standardised as ECMAScript (the document is called ECMA-262).

The committee that designs the language is TC39. A proposal moves through stages 0 to 4; at stage 4 it has shipped in at least two engines and joins the next yearly edition. That is why you will often use a feature in Chrome before the edition that contains it is published. When a lesson uses something very new, it tells you to check the MDN compatibility table or caniuse.com.

Engines: how your code becomes machine instructions

An engine is the program that runs JavaScript. The three big ones are V8 (Chrome, Edge, Node.js, Deno), SpiderMonkey (Firefox) and JavaScriptCore (Safari, and the Bun runtime). They all follow the same specification, so correct code behaves the same in each.

Underneath, a modern engine does roughly this:

1. Parse the source text into a tree that represents its structure. Syntax errors are found here, before any line runs.
2. Interpret it quickly as bytecode so the program starts fast.
3. Watch which functions run often (“hot” code) and what types they see.
4. Optimise hot code into fast machine code, and throw that code away again if its assumptions break, for example when a function that always got numbers suddenly gets a string.

This is called just-in-time (JIT) compilation. You do not control it directly, but it explains a useful habit: functions that always receive the same kinds of values tend to stay fast.

// A first program: variables, a calculation and some output
const learner = 'Asha';
const course = 'JavaScript: Zero to Job-Ready';
const lessons = 31;
const minutesPerLesson = 45;

console.log('Hello,', learner + '!');
console.log(`You are starting "${course}".`);

const totalHours = (lessons * minutesPerLesson) / 60;
console.log(`That is about ${Math.round(totalHours)} hours of study.`);

// Values can be numbers, text, true/false, lists and objects
const plan = { daysPerWeek: 5, topics: ['basics', 'functions', 'async'] };
console.log(plan);
console.log('Weeks at one lesson a day:', Math.ceil(lessons / plan.daysPerWeek));

Hosts: the browser, Node.js and friends

The engine only knows the language itself: numbers, strings, objects, functions, arrays, Math, JSON, promises. Everything that touches the outside world comes from the host.

This is why document.querySelector works in a browser but not in Node.js, and why process.version works in Node.js but not in a browser. The next example checks which names exist in the current host.

// Built into the language (works in every engine)
console.log('Math.max:', Math.max(3, 9, 4));
console.log('Array:', [3, 1, 2].toSorted());
console.log('JSON:', JSON.stringify({ ok: true }));

// Provided by the host. Here the host is a browser tab.
const check = (name, value) => console.log(name.padEnd(12), typeof value);
check('document', globalThis.document);
check('fetch', globalThis.fetch);
check('setTimeout', globalThis.setTimeout);
check('localStorage', globalThis.localStorage);
check('process', globalThis.process); // Node.js only, so 'undefined'

One thread and an event loop

JavaScript runs your code on a single thread: one line at a time, one function at a time, using a call stack to remember which function is running. It never runs two of your functions at the same moment on that thread.

So how can a page wait for a network response and still react to clicks? The host does the waiting. When you call setTimeout or fetch, the browser starts a timer or a request in the background and your code carries on. When the work finishes, the host puts your callback into a queue. The event loop takes callbacks from the queues and runs them, one at a time, whenever the call stack is empty.

• Tasks (also called macrotasks): timers, clicks, network events. One runs per loop turn.
• Microtasks: promise callbacks. After each task, all pending microtasks run before anything else.
• In browsers, the page can repaint between tasks. A long task blocks painting, so the page freezes.

console.log('order placed');
setTimeout(() => console.log('email sent'), 0);
console.log('thank-you page shown');
// order placed
// thank-you page shown
// email sent

The example below goes further: it blocks the thread on purpose with a busy loop, so you can see that a “0 ms” timer really waits for the stack to clear. Lesson 5.1 draws the whole loop step by step.

console.log('1. Script starts');

setTimeout(() => console.log('4. Timer callback (a task)'), 0);
Promise.resolve().then(() => console.log('3. Promise callback (a microtask)'));

console.log('2. Script ends... after some heavy work');

// Block the only thread for about 300 ms
const start = performance.now();
setTimeout(() => {
  const waited = Math.round(performance.now() - start);
  console.log(`5. A 0 ms timer actually waited ${waited} ms`);
}, 0);
while (performance.now() - start < 300) {
  // busy: nothing else can run on this thread
}

JavaScript in a web page

In a browser, JavaScript usually arrives through a <script> tag. The browser parses the HTML into the DOM, then runs your script, and your code can read and change that DOM. The live page below is a tiny but complete example: the HTML draws a card, and the script greets you by time of day and counts clicks.

<button id="hello">Say hello</button>
<script src="app.js" defer></script>

<main class="wrap">
  <section class="card">
    <div class="top">
      <span class="logo">JS</span>
      <span class="tag">Lesson 0.1</span>
    </div>
    <h1 id="greeting">Welcome to Ralfiz Academy</h1>
    <p class="sub">This card is HTML and CSS. The button, the greeting and the counter are JavaScript.</p>
    <div class="row">
      <button id="hello" class="btn" type="button">Say hello</button>
      <span id="count" class="pill">0 clicks</span>
    </div>
    <p id="msg" class="msg" aria-live="polite">Press the button to run some code.</p>
  </section>
</main>

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(135deg, #eef2ff, #f8fafc);
  color: #0f172a;
}
.wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.card {
  width: 100%; max-width: 420px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}
.top { display: flex; justify-content: space-between; align-items: center; }
.logo {
  width: 40px; height: 40px; border-radius: 10px; display: grid;
  place-items: center; font-weight: 800; background: #facc15; color: #1e293b;
}
.tag {
  font-size: 12px; color: #4f46e5; background: #eef2ff;
  padding: 4px 10px; border-radius: 999px; font-weight: 600;
}
h1 { font-size: 22px; margin: 16px 0 8px; }
.sub { margin: 0 0 16px; color: #475569; font-size: 14px; line-height: 1.5; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btn {
  font: inherit; font-weight: 600; border: 0; border-radius: 10px;
  padding: 10px 16px; background: #4f46e5; color: #fff; cursor: pointer;
  transition: transform 0.1s, background 0.2s;
}
.btn:hover { background: #4338ca; }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 3px solid #c7d2fe; outline-offset: 2px; }
.pill {
  font-size: 13px; color: #334155; background: #f1f5f9;
  border: 1px solid #e2e8f0; padding: 6px 10px; border-radius: 999px;
}
.msg {
  margin: 16px 0 0; padding: 12px; border-radius: 10px; font-size: 14px;
  background: #f8fafc; border: 1px dashed #cbd5e1; color: #334155;
}

const greeting = document.querySelector('#greeting');
const button = document.querySelector('#hello');
const countEl = document.querySelector('#count');
const msg = document.querySelector('#msg');

// Greet by time of day
const hour = new Date().getHours();
const part = hour < 12 ? 'morning' : hour < 17 ? 'afternoon' : 'evening';
greeting.textContent = `Good ${part}, welcome to Ralfiz Academy`;

let clicks = 0;
button.addEventListener('click', () => {
  clicks += 1;
  const time = new Date().toLocaleTimeString('en-IN');
  countEl.textContent = `${clicks} ${clicks === 1 ? 'click' : 'clicks'}`;
  msg.textContent = `Hello! This code ran at ${time}.`;
  console.log('Button clicked', clicks, 'time(s)');
});

console.log('Script ran after the HTML was parsed. Greeting:', part);

How this course works

Every lesson follows the same rhythm, so you always know what to do next:

1. Read and run. Each concept has a live example. Change the code and press Run (or Ctrl+Enter). Breaking things is encouraged; the Reset button brings the original back.
2. Predict the output. Before running a snippet, choose what you think it prints. Being wrong here is cheap and teaches a lot.
3. Lab. Download the exercise files and solve the TODOs in VS Code, running them with Node.js. Compare with the solution folder only after trying.
4. Quiz. Four questions check the ideas, not the syntax.

const learnerName = 'Asha';
const city = 'Perinthalmanna';
const daysPerWeek = 5;
const minutesPerDay = 45;

console.log(`Hello, I am ${learnerName} from ${city}.`);
const weekly = daysPerWeek * minutesPerDay;
console.log(`I will study ${weekly} minutes a week.`);

console.log('Node.js', process.version, 'on', process.platform);

console.log('A: start');
setTimeout(() => console.log('D: timer'), 0);
Promise.resolve().then(() => console.log('C: promise'));
console.log('B: end');

Common mistakes

1. Thinking Java and JavaScript are related. They share some syntax from C, and nothing else. Saying so in an interview is a red flag.

2. Expecting host APIs everywhere. Browser code in Node.js, or Node.js code in a browser, crashes:

// Wrong in Node.js: document does not exist there
document.querySelector('h1');
// ReferenceError: document is not defined

// Fix: check the host first, or keep DOM code in browser files
if (typeof document !== 'undefined') {
  document.querySelector('h1');
}

3. Believing setTimeout(fn, 0) runs immediately. It schedules a task. The callback runs after the current code finishes and after all microtasks:

// Wrong assumption: total is ready on the next line
let total = 0;
setTimeout(() => { total = 500; }, 0);
console.log(total); // 0

// Fix: use the value inside the callback (or await a promise)
setTimeout(() => {
  const total = 500;
  console.log(total); // 500
}, 0);

4. Blocking the main thread. A long loop in a click handler freezes the whole page, including scrolling and animations. Keep handlers short and move heavy work out (lesson 7.4 shows chunking and Web Workers).

Interview and real-world notes

• “What is JavaScript?” A high-level, dynamically typed, garbage-collected language with first-class functions, standardised as ECMAScript and run by engines such as V8 inside hosts such as browsers and Node.js.
• “Is it compiled or interpreted?” Both: modern engines interpret bytecode first and JIT-compile hot code to machine code.
• “How does it do async with one thread?” The host does the waiting; the event loop runs callbacks from the task and microtask queues when the call stack is empty.
• In real teams you will meet TypeScript almost everywhere. It compiles to JavaScript, so everything in this course still applies (lesson 7.3 introduces it).
• Bookmark MDN Web Docs (developer.mozilla.org). It is the reference professionals use daily, including browser compatibility tables for every feature.

Predict the output

Read each snippet and decide what it prints before you run it. The answers are at the end of this section.

console.log('A');
setTimeout(() => console.log('B'), 0);
console.log('C');

console.log('5' + 3, '5' - 3);

const lang = 'JavaScript';
console.log(lang.length, lang.includes('Java'), typeof lang);