JavaScript Language Basics

This topic covers the JavaScript that every other page takes for granted. Values and how they compare, functions and the state they capture, the objects and arrays you move data around in, and the module system that lets a project grow past one file.

Most of this is the language itself, and it behaves the same way inside a React component, inside a build script, and inside a snippet an AI assistant wrote for you at two in the morning. Where a behaviour depends on the host, such as module resolution or top-level this, the guides name the host.

JavaScript Language Basics Topics

• Values, Variables, and Equality covers let and const, the primitive types, coercion, the two equality operators, truthiness, and the ?? and ?. operators that clean up missing data.
• Functions, Callbacks, and Closures covers the ways to declare a function, what this binds to in each, default and rest parameters, and the closures that make callbacks remember anything at all.
• Objects, Arrays, and Destructuring covers property access, the array methods worth memorising, destructuring, spread and rest, Map and Set, and the copy-against-mutate decision behind a whole family of bugs.
• Modules, Imports, and Exports covers named and default exports, import paths that resolve, the ES modules and CommonJS split, and the load order that catches people out in the browser.

The Rule Everything Here Depends On

One fact sits under all four guides: in JavaScript, types belong to values, not to variables, and no type is checked until the code runs. The engine does parse the whole file first and rejects syntax errors before anything executes, but it never objects to a variable holding a different type than last time.

let input = "42";
console.log(typeof input);

input = 42;
console.log(typeof input);

input = { id: 42 };
console.log(typeof input);

// node output:
// string
// number
// object

The same variable held three different types and the engine never complained. That is the trade JavaScript makes. You write a script without declaring anything up front, and in return nothing warns you when a number arrives where a string was expected.

Almost every confusing behaviour in this topic follows from that one decision. Coercion exists because an operator has to do something when the types do not match. Truthiness exists because if has to answer yes or no about any value at all.

Optional chaining exists because of what happens next. A missing property already reads as undefined on its own, and ?. stops the access after it from throwing when the value on its left is null or undefined.

How the Four Guides Fit Together

The first guide gives you the vocabulary. Values, the two equality operators, and what an absent value looks like. Read it first, because the other three write comparisons and default values constantly without pausing to justify them.

The second and third guides are about structure. Functions package behaviour and quietly capture the variables around them, and objects and arrays package data. Between them they account for most of the lines in any real JavaScript file, framework or not.

The fourth guide is about scale. Once a file has more than a few functions worth keeping, modules let you split it and state plainly what each file offers the rest of the project. It comes last because there is no point splitting code you have not written yet.

Two subjects deliberately sit outside this topic. Asynchronous work, meaning promises, await, and the ordering rules behind them, gets its own topic. Anything that touches a web page, such as selecting elements and handling events, belongs to the DOM rather than to the language.

Where to Start Depends on Where You Came From

Readers reach this topic from three very different places, and the useful entry point is different for each of them.

Coming from another language, such as Python, Java, or C#, skim Values, Variables, and Equality for the coercion and truthiness rules, then spend your time in Functions, Callbacks, and Closures. The syntax will look familiar long before the semantics do.

Coming from a framework tutorial, where you already ship React or Vue without a plain JavaScript grounding, start with the functions guide and then Objects, Arrays, and Destructuring. Between them they explain the props, callbacks, and spreads you have been copying.

Starting from nothing, take the four guides in the order they are listed above and type the snippets out rather than reading them. Modules, Imports, and Exports lands better once you have written a file long enough to want splitting.

Common Pitfalls

• Reading == as ordinary equality: when the two sides are different types it may convert one before comparing, which is why 0 == "" is true. The values and equality guide covers when the loose form is defensible.
• Assuming const freezes an object: it locks the binding, not the contents, so the properties of a const object stay editable. The same guide shows what that means in practice.
• Expecting an arrow function to have its own this: it borrows the surrounding one, so it fits wherever that lexical value is the one you want. The functions guide draws the line.
• Copying an object with spread and then editing a nested field: the copy is one level deep, so the nested object is still shared. The objects and arrays guide shows the fix.
• Leaving the file extension off an import: native Node ESM requires the extension on a relative path, and a browser needs a URL the server actually serves. The modules guide covers what resolves and what does not.

Common Questions

How much of this is the language and how much is the browser?

Most core semantics covered by the first three guides behave the same in Node and browsers. The modules guide crosses the boundary: import resolution and loading rules belong to the host. So do the document object and fetch, and where a guide depends on one of those, it names the host first.

Do you need to learn all of this before a framework?

Not all of it, but the first three guides pay for themselves quickly. React, Vue, Svelte, and Astro all hand you callbacks, pass objects as props, and rely on closures capturing state. Framework code stops looking like ceremony once those three are familiar.

Does any of this change in TypeScript?

The language behaviour does not. Coercion, truthiness, and closures work identically, because the JavaScript TypeScript emits follows the same runtime rules. Module resolution is the exception: the moduleResolution setting can accept import paths that native Node would reject.

Where do you run the examples on these pages?

Either place works for the plain snippets. In a browser, right-click any page, choose Inspect, open the Console tab, and paste the code in. For longer code, and for anything using import or export, save a file such as app.js next to a package.json containing type module, then run node app.js.

Continue Learning JavaScript

• Return to the JavaScript guide for where the language fits, the full learning path, and what to build first.
• Read TypeScript Types when you want the compiler to catch the mismatches this topic teaches you to spot by hand.
• Weighing up the two languages? JavaScript vs TypeScript covers what types add and when the extra step earns its keep.