Section · 01

Where JavaScript runs

JavaScript was created in 1995 to run in browsers. For 20 years that’s where it stayed. Then in 2009 Node.js ripped the V8 engine out of Chrome and made it run on servers. Now JS runs everywhere:

Browser           — what you write goes through <script> tags into the page
Node.js           — JS on a server: web servers, build tools, scripts
React Native      — JS-powered iOS and Android apps
Edge functions    — JS running on CDNs near your users (Cloudflare, Vercel)
Embedded          — even some IoT devices

The language is the same. What differs is the available APIs — a browser knows about document and window; a Node process knows about fs (filesystem) and process. The lessons below assume browser unless noted.

Section · 02

Where you put it

<!-- Inline in HTML -->
<script>
  console.log("hi");
</script>

<!-- External file (almost always do this) -->
<script src="/app.js" defer></script>

<!-- ES module -->
<script type="module" src="/app.js"></script>

`defer` and `async`

Without either, <script> tags block HTML parsing while they download and run. defer downloads in parallel and runs after the HTML is parsed (the usual right answer). asyncdownloads in parallel and runs as soon as it’s ready, blocking the parser mid-page (use only for truly independent scripts like analytics).

Section · 03

Variables — let, const, and (please not) var

const PI = 3.14;        // can't be reassigned
let count = 0;          // can be reassigned
count = count + 1;

var foo = "legacy";     // pre-2015 keyword; has quirky scoping; don't use it in new code

Default to const. Switch to let only when you genuinely need to reassign. varis from before block scoping and has weird hoisting behavior — every modern style guide says don’t use it.

Naming

camelCase for variables and functions, PascalCase for classes and React components, SCREAMING_SNAKE for constants you never change. Start with a letter, then letters, numbers, or underscores. Don’t name a variable l — it looks like 1.

Section · 04

The eight types

Primitives:
  string       "hello"
  number       42, 3.14, NaN, Infinity
  boolean      true, false
  null         intentional "nothing"
  undefined    haven't set this yet
  bigint       9007199254740993n   (huge integers, rare)
  symbol       unique tokens, niche

Reference type:
  object       { name: "York" }    (also arrays, functions, dates, etc.)

Type coercion — the footgun

"5" + 3       →  "53"     (string + anything → string)
"5" - 3       →  2        (minus forces number)
"" == false   →  true     (loose ==; lies to you)
"" === false  →  false    (strict ===; truth)

ALWAYS use === and !==. Never == and !=. This solves 90% of beginner JS bugs.

Section · 05

Arrays

const fruits = ["apple", "banana", "cherry"];

fruits[0]                  // "apple"
fruits.length              // 3
fruits.push("date")        // adds to end; length now 4
fruits.pop()               // removes from end and returns "date"
fruits.unshift("avocado")  // adds to start
fruits.shift()             // removes from start

fruits.map(f => f.toUpperCase())     // ["APPLE", "BANANA", "CHERRY"]
fruits.filter(f => f.startsWith("a"))  // ["apple"]
fruits.find(f => f.length > 5)         // "banana"
fruits.forEach(f => console.log(f))    // iterate, no return

map, filter, find, and reduceare the four array methods you’ll write 100 times a week. They take a callback function and apply it to each element. Learn these and you’ll skip writing 90% of for-loops.

Section · 06

Functions

// Function declaration
function add(a, b) {
  return a + b;
}

// Function expression assigned to a variable
const subtract = function(a, b) {
  return a - b;
};

// Arrow function — the modern default
const multiply = (a, b) => a * b;

// Arrow function with a body
const greet = (name) => {
  const message = "Hi, " + name;
  return message;
};

// Default parameter values
function discount(price, percent = 10) {
  return price * (1 - percent / 100);
}

// Rest parameters — gather extra args into an array
function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3, 4);  // 10

Use arrow functions for short callbacks and one-liners; use functiondeclarations for top-level functions. The big difference: arrow functions don’t have their own this, which matters when you get to objects and classes.

Section · 07

Objects

const user = {
  name: "York",
  age: 32,
  isAdmin: true,
  greet() {
    return "hi, " + this.name;
  },
};

user.name              // "York"
user["name"]           // same thing
user.greet()           // "hi, York"

// Destructuring — pull properties out into variables
const { name, age } = user;

// Spread — copy and merge
const updated = { ...user, age: 33 };  // new object, same fields, age changed

Objects are how JS represents anything that has named properties — users, products, API responses, configs. Most of the data you’ll handle in JS is some shape of object or array of objects.

Next lesson: how JS reaches into the page itself — the DOM, events, and the API the browser exposes for making any of this interactive.

JavaScript basics, the language that runs the web.