Getting Started with JavaScript

Core concepts

1. Runtime environments: Browsers ship a JS engine (V8 in Chrome, SpiderMonkey in Firefox); Node.js embeds V8 for servers and CLIs. Same language, different globals (window vs globalThis). — MDN: JavaScript guide
2. REPL & .js files: Use node in a terminal for quick experiments; save reusable code in .js or .mjs files. — Node.js REPL
3. Strict mode: 'use strict'; enables safer semantics (no silent this bugs in plain functions). Modules are strict by default. — MDN: Strict mode
4. Package managers: npm, pnpm, or yarn manage dependencies via package.json — you'll use them once you leave single-file scripts. — npm docs

// hello.mjs — run: node hello.mjs
export function greet(name) {
  return `Hello, ${name}`;
}

console.log(greet('iHateReading'));

1. DevTools: Browser console + Network tab; Node inspector (node --inspect) for breakpoints. — Chrome DevTools docs

Concept videos

YouTube lessons for these topics. On a large screen they open in the reading panel next to the roadmap, same as the article links on each core concept.

• Runtime environments — JavaScript in 100 Seconds (Fireship)
• REPL & .js files — Node.js Crash Course (Traversy Media)
• Package managers — npm Crash Course (Traversy Media)
• DevTools — Chrome DevTools (Google Chrome Developers)

Explanation

Think of JavaScript like a recipe language that two different kitchens can cook: the browser kitchen (Chrome, Firefox, Safari) and the Node kitchen (servers, CLIs, scripts). Same recipe book, different appliances on the counter — window in the browser vs globalThis in Node.

Runtime environments

When you open a website, the browser downloads HTML, then the JavaScript engine reads your scripts line by line and executes them on a single main thread. Node uses the same V8 engine but lives outside the browser: it can read files, open ports, and run cron jobs. Beginners often ask, “Is this browser JS or Node JS?” — the syntax is the same; the built-in APIs differ. Learning both runtimes early saves months of confusion later.

REPL & .js files

The REPL is a scratch pad: type node, hit Enter, run 2 + 2, and see 4 instantly. That is perfect for trying ideas. When an idea works, move it into a .js file so you can rerun it, share it, and put it in git. Treat the REPL like doodling on a napkin and files like the finished blueprint.

Strict mode

Without strict mode, JavaScript sometimes silently misbehaves — for example, assigning to a misspelled variable can create a global leak instead of throwing an error. Strict mode turns the language into a firmer teacher: more mistakes become visible errors. ES modules run in strict mode automatically, which is one reason modern code prefers import over sloppy scripts.

Package managers

npm is the shared pantry for JavaScript projects. Instead of copying jQuery from a CDN into every repo, you declare "dependencies" in package.json and install once. Teammates run the same install and get the same versions. You will live inside package.json scripts (dev, test, build) for the rest of your career — get comfortable early.

DevTools

DevTools are your X-ray goggles. Console shows logs and errors; Network shows slow APIs; Sources lets you pause on a line and inspect variables. In Node, node --inspect connects the same idea to backend code. When something “works on my machine,” DevTools is usually where the truth appears.

What Is It?

Getting started means picking a runtime (browser or Node), running your first script, and learning where code actually executes.

Node embeds the V8 engine for servers and CLIs; browsers ship their own engines with DOM APIs attached.

You will use a REPL for doodles and .js/.mjs files for anything you want to keep, share, or test.

Why Should I Care?

Every later chapter assumes you can run code locally and read errors in DevTools or the terminal.

Confusing browser globals with Node globals is a top beginner bug — clearing that up early saves weeks.

Real World Analogy

JavaScript is one language spoken in two buildings: the browser lobby (DOM, window) and the Node back office (files, servers). Same grammar, different furniture.

Visual Mental Model

.js file
     |
  +-------+-------+
  |               |
 Browser         Node
 (V8/...)        (V8)
  |               |
 window          globalThis

Beginner Explanation

Install Node, run node yourfile.mjs, and use the browser console for quick experiments. Remember: one thread, one call stack — heavy work blocks the UI unless you delegate to async APIs.

Smallest Possible Example

export function greet(name) {
  return `Hello, ${name}`;
}
console.log(greet("iHateReading"));

Common Mistakes

❌ Assuming window exists in Node.

Node does not have a DOM. Use globalThis when you need an environment-agnostic global.

❌ Never leaving the REPL for real files.

Files teach modules, git, and npm scripts — skills you need the moment a project has more than ten lines.

❌ Disabling strict mode to 'avoid errors'.

Strict mode surfaces bugs early. ES modules are strict by default for a reason.

Real Project Example

npm and pnpm power dependency installs for React, Vue, and almost every JS repo on GitHub.

Chrome DevTools is how frontend engineers at Google, Stripe, and Figma debug live sites.

Build This Mini Project

Create hello.mjs with one exported function, run it with Node, then paste the same function into the browser console (without export) and call it. Note which globals exist in each place.

Interview Question

What is the difference between JavaScript in the browser and in Node?

The language syntax is the same ECMAScript; the host APIs differ. Browsers provide DOM, fetch with CORS rules, and window. Node provides file system, process, and networking modules without a DOM. Both use an event-driven model, but layout and rendering only exist in the browser.

Key Takeaways

• Pick a runtime and run real files early.
• Browser and Node share JS syntax, not all APIs.
• Use strict mode and modules for safer defaults.
• DevTools and node --inspect are non-negotiable skills.

Resources

• MDN: JavaScript first steps
• Node.js getting started
• How we build websites (JS stack context)

The 60-second story

You walk into a hotel with two front desks. The lobby desk is loud: guests tapping phones, asking for late checkout, complaining the Wi-Fi dropped. The back-office desk is quiet: staff printing invoices and calling suppliers. Both desks speak the same language. They just have different phones on the counter.

JavaScript is that shared language. The lobby is the browser. The back office is Node. The people who actually understand the sentences are the engines — V8 in Chrome and Node, SpiderMonkey in Firefox. Node hired the same V8 staff and sat them in the back office, so the sentences still work. The phones do not. In the lobby you can ask for window. In the back office that phone was never installed. If you want a number that exists at both desks, you ask for globalThis.

Here is the map, so you do not have to guess.

• The hotel language is JavaScript.
• The lobby desk is the browser.
• The back office is Node.
• The staff who parse sentences are the engine.
• window versus globalThis is “which phone is on this desk.”
• A note that says “stop inventing names I did not write” is 'use strict'.
• The basement pantry, with a written shopping list, is npm, pnpm, or yarn, tracked in package.json.
• The security cameras are DevTools, or node --inspect when you are in the back office.

You do not start by redesigning the whole hotel. You walk to the back office and try one sentence.

console.log('front desk is open');

Save it as hello.js and run node hello.js. That is the grown-up version of the REPL: try a line, then keep the lines worth repeating in a file. When the file needs friends — a date helper, a test runner — you stop emailing zip folders. You write the shopping list in package.json and let the pantry install the same jars for every coworker. Scripts named dev, test, and build are just buttons on that list.

Strict mode exists because early JavaScript was polite to a fault. Misspell a name and it sometimes invented a new one and kept smiling, like a receptionist filing a guest under a name nobody wrote down. 'use strict' tells the desk to refuse. Modules turn that rule on for you, which is why modern files feel less haunted.

DevTools exist because “it broke” is not a location. The console is the desk log. The Network tab is every phone call the page made. When a button does nothing, you watch the call instead of redecorating the lobby.

Mental model: one language, two buildings. Learn the sentences once. Then check which desk you are standing at before you reach for a phone that only exists in the lobby.

JavaScript was put in browsers so a page could react without a full reload. Node showed up later so the same sentences could run APIs and build tools with no guest in the lobby at all. That is why your first afternoon is a file, a terminal, and the console. Frameworks are interior design. You still need to know which building you are in.

If you can tell a friend “same language, browser lobby or Node back office, strict mode stops ghost variables, package.json is the pantry list,” you already have this page.