Introduction

JavaScript is the programming language of the web. It runs in every browser, powers server-side applications via Node.js, and is the most widely-used programming language on GitHub. Understanding what JavaScript is, where it runs, and how it executes is the foundation for everything else in frontend development.

What JavaScript Is (and Is Not)

JavaScript is a dynamically typed, interpreted, single-threaded scripting language. Despite the name, it has no relationship to Java — the name was a marketing decision in 1995. The official specification is called ECMAScript (ES), maintained by TC39. Modern versions include ES2015 (ES6), ES2020, and beyond.

• Dynamic typing: variables can hold any type; types are checked at runtime, not compile time
• Interpreted: modern JS engines (V8, SpiderMonkey) compile to machine code just-in-time, but there is no explicit compile step
• Single-threaded: one thing happens at a time — no race conditions on shared state, but blocking the thread freezes the UI
• Prototype-based: objects inherit directly from other objects (not classes, though ES6 class syntax is syntactic sugar over prototypes)

Where JavaScript Runs

Browser (most common):
  - Embedded via <script> tag or loaded as external file
  - Has access to DOM, BOM (window, navigator, location)
  - Sandboxed — cannot access the file system or other tabs

Node.js (server side):
  - Chrome's V8 engine packaged with file system, network, OS APIs
  - No DOM — different set of globals (process, fs, http, etc.)
  - Used for: web servers, build tools, CLI apps, scripts

Deno, Bun — alternative runtimes with different built-in APIs

Your First JavaScript

// Variables — use const by default, let when reassignment is needed
const greeting = 'Hello, World!';
let count = 0;

// Functions
function add(a, b) { return a + b; }
const multiply = (a, b) => a * b;  // arrow function (shorter syntax)

// Control flow
if (count > 0) {
  console.log(greeting);
} else {
  console.log('Count is zero');
}

for (let i = 0; i < 5; i++) {
  console.log(i);
}

// Arrays and objects
const fruits = ['apple', 'banana', 'cherry'];
const user = { name: 'Alice', age: 30, active: true };

console.log(fruits[1]);    // 'banana'
console.log(user.name);    // 'Alice'

How the Browser Runs JavaScript

When a browser encounters a <script> tag, it pauses HTML parsing, downloads the script (if external), and executes it. This is why scripts should be placed at the end of the body or use defer/async attributes.

<!-- Blocks parsing until downloaded + executed -- avoid -->
<script src="app.js"></script>

<!-- Downloads in parallel, executes after HTML is parsed -->
<script src="app.js" defer></script>

<!-- Downloads in parallel, executes immediately when ready (no order guarantee) -->
<script src="analytics.js" async></script>

The JavaScript Ecosystem

• npm / yarn / pnpm: package managers for installing third-party libraries
• Bundlers: Vite, webpack, Rollup — combine modules into browser-ready files
• TypeScript: typed superset of JS that compiles to JavaScript
• Frameworks: React, Vue, Svelte — libraries built on top of JavaScript
• Node.js: JS outside the browser — servers, tooling, scripts

Getting Started Locally

# Run JS in Node.js
node script.js

# Interactive REPL (Read-Eval-Print Loop)
node

# Create a new project with Vite + React
npm create vite@latest my-app -- --template react
cd my-app && npm install && npm run dev