JavaScript Basics: Values, Functions, and Modules

Start learning JavaScript with values, functions, objects and modules. These four guides explain how data compares, how callbacks remember variables, and how to split a project across files.

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 behavior 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 memorizing, 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.

How Do JavaScript Variables Hold Different Types?

A JavaScript variable declared with let can hold values of different types at different times. Types belong to the values, so assigning a number after a string is allowed. 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 do not have to declare a variable's type. A TypeScript type check can catch mismatched types before you run the program.

Automatic conversions are another rule to learn. 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.

What Should You Learn in JavaScript Language Basics?

Start with Values, Variables, and Equality, then learn functions, objects and arrays, and finally modules. The later guides build on comparisons and default values.

The second and third guides are about structure. Functions package behavior 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.

Next, asynchronous JavaScript covers promises, await and execution order. The DOM guides explain how to select page elements and respond to events.

Which JavaScript Basics Guide Should You Read First?

New programmers should start with values and variables. Developers switching languages should focus on coercion and closures, while framework users often benefit most from functions and object copying.

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 serves. The modules guide covers what resolves and what does not.

Frequently Asked Questions

Which JavaScript features belong to the language rather than the browser?

JavaScript defines values, comparisons, functions and objects independently of the browser. Browser APIs add document and page events; Node adds server and file APIs. Import resolution also depends on the host, so a working browser import may need a different path in Node.

Which JavaScript basics should you learn before a framework?

Learn JavaScript variables, comparisons, functions, callbacks, objects, arrays and basic imports before relying on a framework. React, Vue and similar tools use these features throughout their APIs. You can learn the less common details as your projects need them.

Does TypeScript change JavaScript runtime behavior?

TypeScript types do not change JavaScript runtime behavior. Coercion, truthiness and closures still follow JavaScript rules. Compiler and module settings affect the code and imports produced, so choose settings that match the runtime where your project will run.

Where can you run JavaScript language basics examples?

Run plain JavaScript examples in a browser developer console or in Node. Run import and export examples as modules, such as a Node .mjs file started with node app.mjs. Browser modules need a module script served over HTTP.