JavaScript Classes and Modules: Developer Tools and npm

A class describes objects with the same structure and behavior. Each object created from it is an instance. Use a class when several objects need the same operations; a plain object is often enough for one settings value.

Give each object its own data

Class names conventionally use PascalCase, such as Rectangle. The constructor runs each time new creates an instance. Inside it, this refers to the new object. Assigning to this.width stores an instance property; a parameter named width alone is only a local variable.

class Rectangle {
  constructor(width, height) {
    this.width = width; // cm
    this.height = height;
  }
  area() {
    return this.width * this.height;
  }
  perimeter() {
    return 2 * (this.width + this.height);
  }
}
const a = new Rectangle(3, 4);
const b = new Rectangle(5, 2);
a.area();      // 12
a.perimeter(); // 14
b.area();      // 10

For a.area(), JavaScript calls the method with this set to a. Multiplying its width, 3 cm, by its height, 4 cm, gives 12 cm². The perimeter adds the two different sides and doubles that sum, giving 14 cm. Changing b.width changes only b.

Methods have no function keyword and no commas between them. A class has at most one constructor. For a class without extends, omitting it gives an empty default constructor. new returns the created instance automatically.

A field declares a property in the class body: unit = "cm"; gives each instance its own value. label; starts as undefined. In a class without extends, instance fields are initialized before the constructor body runs.

Read and assign through accessors

A getter runs when a property is read. With get area() { return this.width * this.height; }, read a.area without parentheses. This is an alternative to the method above, which uses a.area().

A setter runs on assignment and can reject invalid input. It needs separate storage: set width(value) { this.width = value; } calls itself repeatedly until the stack overflows. Store the value under a different name, such as the private field #width.

Keep the receiver when passing a method

class Counter {
  count = 0;
  increment() { this.count++; }
}
const counter = new Counter();
const inc = counter.increment;
// inc(); // TypeError: this is undefined
const safeInc = () => counter.increment();
safeInc(); // counter.count is 1

Class methods run in strict mode. A detached call has no receiver before the dot, so this is undefined. A callback's caller can also supply a different receiver. An arrow wrapper preserves the call on counter; counter.increment.bind(counter) creates a bound function. An arrow-function field, increment = () => { this.count++; };, captures the instance's this too.

Calling Rectangle(3, 4) without new throws a TypeError. Using a class before its declaration has initialized throws a ReferenceError. Classes differ here from function declarations that can be called earlier in a file.

JSON preserves data, not class behavior. JSON.stringify(a) saves its own public width and height. Parsing that text creates a plain object; rebuild an instance with new Rectangle(data.width, data.height) to use its methods.

An object can offer a small public interface while keeping its storage private. This is encapsulation. The interface decides which changes are valid; privacy alone does not check a value passed to a public setter.

Put validation at the boundary

A private field starts with # and must be declared in the class body. Code inside that class reads it through this.#target. Code outside cannot read or write t.#target: that is a syntax error, not a property read that returns undefined.

class Thermostat {
  static MIN = 10;
  static MAX = 30;
  #target = 20;

  get target() { return this.#target; }
  set target(value) {
    if (!Number.isFinite(value) ||
        value < Thermostat.MIN ||
        value > Thermostat.MAX) {
      throw new RangeError("Target must be between 10 and 30 °C");
    }
    this.#target = value;
  }
}
const t = new Thermostat();
t.target = 22;
t.target; // 22
// t.target = 35; // throws RangeError

The getter exposes a reading without exposing storage. The setter first rejects nonfinite or nonnumeric input, then values outside the inclusive 10–30 °C range. Only an accepted value reaches the assignment. After a rejected attempt to set 35 °C, the target remains 22 °C. A numeric string such as "22" also fails Number.isFinite.

The getter and setter use #target, so assigning t.target does not call the setter recursively. The names target and #target are distinct. A leading underscore, as in _target, only asks other programmers to treat a public property as internal; JavaScript still permits access to it.

Private fields do not appear in Object.keys, for...in, or JSON serialization. This thermostat has no own public fields, so JSON.stringify(t) produces "{}". Saving an object may therefore need an explicit public method that returns the data to save.

Keep internal helpers private

A method such as #check(value) { ... } can hold validation steps and is called inside the class as this.#check(value). It is not part of the public interface. Inside the class, #target in obj tests whether an object carries that private field.

A subclass cannot use its parent's private name directly. It can use the parent's public getter or setter, which runs in the class that declared the field. This lets the parent retain control of its own state.

Put shared work on the class

A static member belongs to the class. Thermostat.MIN is 10, while t.MIN is undefined. These static limits are public fields; static does not itself make them read-only.

class Tracked {
  static count = 0;
  constructor() { Tracked.count++; }
}
new Tracked();
new Tracked();
new Tracked();
Tracked.count; // 3

Each constructor increments one class-level counter. An instance field would instead give each object a separate count. A static factory, such as static square(side) { return new Rectangle(side, side); }, belongs inside Rectangle and is called as Rectangle.square(5). A static comparison helper can be passed to sort when it takes the compared objects as arguments.

Inside a static method, this is the class it was called on; it is not a rectangle instance with a width. A static { ... } initialization block performs setup once when the class is defined and can access that class's private members.

Inheritance models an is a relationship. A circle is a shape, so a Circle class can inherit a shape's shared description while supplying its own area calculation. A subclass inherits behavior without copying every method into its body.

Initialize the parent first

class Circle extends Shape makes Circle a subclass and Shape its superclass. In a subclass constructor, super(...) calls the parent's constructor. It must run before the first use of this. A subclass with no constructor gets one that forwards its arguments to the parent.

class Shape {
  constructor(name) { this.name = name; }
  area() { return 0; }
  describe() {
    return this.name + " with area " +
      this.area().toFixed(2) + " cm²";
  }
}
class Circle extends Shape {
  constructor(radius) {
    super("Circle");
    this.radius = radius;
  }
  area() { return Math.PI * this.radius ** 2; }
}
class Rectangle extends Shape {
  constructor(width, height) {
    super("Rectangle");
    this.width = width;
    this.height = height;
  }
  area() { return this.width * this.height; }
}

Calling new Circle(2).describe() gives "Circle with area 12.57 cm²". First, super sets the name. The circle stores its radius. The inherited describe() then calls this.area(), which finds the circle's method. toFixed(2) formats the result for display. new Rectangle(3, 4).describe() gives "Rectangle with area 12.00 cm²".

Override or extend a method

A subclass overrides a method by declaring the same name. It can call the parent's version through super.methodName().

class Square extends Rectangle {
  constructor(side) {
    super(side, side);
    this.name = "Square";
  }
  describe() {
    return super.describe() +
      " (all sides " + this.width + " cm)";
  }
}
new Square(5).describe();
// "Square with area 25.00 cm² (all sides 5 cm)"

super(side, side) initializes equal width and height. The inherited area method multiplies them, and the override adds information to the inherited description. Forgetting required parent arguments can leave its properties undefined; calling super() is not enough if the parent needs values.

Polymorphism means the same call can select different behavior. A loop can call s.describe() on circles and rectangles; each description calls the appropriate area(). Adding a shape with its own area method does not require a new case in that loop.

new Circle(2) instanceof Circle and new Circle(2) instanceof Shape are both true. Static members are inherited too. An instance's relationship to a class follows its prototype chain, which is what instanceof normally checks.

Choose a useful relationship

A class can extend only one parent. For a has a relationship, use composition: a car has an engine and asks this.engine.start() to do work. Sharing a helper alone is not a reason to claim one unrelated class is a kind of another. A mixin copies a group of methods onto a prototype, for example with Object.assign(Rectangle.prototype, serializable). Deep parent chains can make changes difficult to follow.

Built-in classes can also be extended. A ValidationError extends Error constructor calls super(message), sets this.name = "ValidationError", and can store this.field = field. A catch block can use err instanceof ValidationError to handle that failure differently and read the inherited message.

An object has a hidden link to another object, its prototype, or to null. Reading a missing property follows that link. JavaScript keeps searching until it finds the property or reaches null; an unsuccessful search returns undefined.

Distinguish stored and inherited values

const defaults = { theme: "light", fontSize: 16 };
const settings = Object.create(defaults);
settings.fontSize = 18;
settings.theme;                   // "light"
settings.fontSize;                // 18
defaults.fontSize;                // 16
Object.hasOwn(settings, "theme"); // false
"theme" in settings;              // true
Object.keys(settings);            // ["fontSize"]

Object.create(defaults) creates an empty object whose prototype is defaults. Assigning fontSize creates an own property that shadows the inherited value. It leaves defaults.fontSize unchanged. After delete settings.fontSize, lookup reaches the inherited 16 again.

A missing own property may still exist on the chain. Class methods are not enumerable, so for...in does not normally list them. Use Object.getPrototypeOf(settings) to read its prototype. Prefer these Object methods to the older __proto__ accessor.

See how classes share methods

For a rectangle instance r, Object.getPrototypeOf(r) === Rectangle.prototype is true. Its width is an own property, while area is normally stored on Rectangle.prototype. Object.hasOwn(r, "area") is false even though r.area() works. An arrow-function field is different: it creates an own function property on each instance.

An inherited method still receives the object before the dot as this. The shared area method can therefore read different dimensions for each rectangle without storing a separate method on each object.

For the shape hierarchy, lookup follows:

circle -> Circle.prototype -> Shape.prototype
       -> Object.prototype -> null

The circle's area method is found first. Its description comes from Shape.prototype, and toString can come from Object.prototype. Shape.prototype in the chain also explains why circle instanceof Shape is true.

The name Rectangle.prototype means the prototype given to rectangle instances. It does not name the hidden prototype of the Rectangle function itself; for this class that is Shape when it extends Shape, or Function.prototype for a class without a superclass.

Recognize older constructor code

function Rectangle(width, height) {
  this.width = width;
  this.height = height;
}
Rectangle.prototype.area = function () {
  return this.width * this.height;
};

Constructor functions use the same basic instance-to-prototype structure. Class syntax adds rules: new is required, the body is strict, methods are nonenumerable, and private members are available. typeof Rectangle is "function" for either form.

Arrays find map on Array.prototype; string methods come from String.prototype. Avoid adding custom methods to built-in prototypes: libraries and future standards may use the same names with different behavior. The existing library use of flatten helped lead to the standard array method being named flat.

Ordinary data-property assignment creates or changes an own property, but an inherited setter can intercept the assignment. Changing an existing object's prototype with Object.setPrototypeOf is legal but can hurt performance; choose the prototype when creating the object.

An ES module has its own scope. Its top-level declarations stay inside the file unless exported. Importers request specific features, making dependencies visible without putting everything in global variables.

Match the export form

// geometry.js
export const round2 = (n) => Math.round(n * 100) / 100;
export function circleArea(r) {
  return Math.PI * r * r;
}

// shapes.js
import { circleArea, round2 } from "./geometry.js";
export default class Circle {
  constructor(r) { this.r = r; }
  area() { return round2(circleArea(this.r)); }
}

// main.js
import Circle from "./shapes.js";
console.log(new Circle(3).area()); // 28.27

The entry module imports one class. The class's module imports two helpers. For a radius of 3 cm, the area is about 28.274 cm²; the rounding helper produces 28.27. The entry module does not automatically gain access to the helpers used inside another module.

A module may have many named exports but at most one default export. Named imports use the exported name in braces; the local name for a default import is chosen by the importer. Writing import { Circle } does not request the default export even when the exported class is named Circle.

Rename, group, and re-export

import { circleArea as areaOfCircle } from "./geometry.js"; gives an imported feature a different local name. export { circleArea as area }; changes its exported name. An export list can also expose declarations made earlier in the file.

import * as geometry from "./geometry.js"; creates a module namespace object. Call geometry.circleArea(3). A namespace includes a default export under the property default if the module has one.

A file can collect other files' exports: export { circleArea } from "./geometry.js"; forwards a named export. export * from "./geometry.js"; forwards named exports, but does not forward that module's default export.

Understand shared evaluation and live bindings

Modules run in strict mode and have undefined as top-level this. Dependencies are evaluated before the importing module's own body. Importing the same resolved module from several files reuses one evaluated module and its state.

Suppose a module exports let count = 0 and increment() changes it. After an importer calls increment(), its imported count reads 1. Imports are live bindings, not snapshots. The importer cannot reassign the binding itself. If an export is an object, changing one of that object's properties is still possible and other importers see it.

Keep static import declarations at module top level. A static import inside an if or function is a syntax error; dynamic import() handles later loading. Include .js in relative browser and Node.js ES module paths: these loaders do not add the extension. A path error or a named/default mismatch prevents the module from loading, so fix the import before looking for a bug in the code that was meant to run afterward.

The same ES module syntax runs in a browser and in Node.js. Each environment still needs to know that a file is a module, and each has its own way to resolve the requested paths.

Start a browser module

<script type="module" src="main.js"></script>

Load only the entry module with a script tag. Its imports fetch the other files automatically. Module scripts without async are deferred: they run after HTML parsing, in document order. The page elements they access are then available.

Serve the folder over HTTP with a local server, such as python3 -m http.server or npx serve, and open its localhost address. Opening the HTML from disk usually causes module requests to fail under browser security rules. The server must also return JavaScript with a suitable MIME type, such as text/javascript.

Module declarations do not become globals. An inline handler such as onclick="save()" cannot find a function local to a module. Attach the handler from JavaScript instead:

const button = document.querySelector("#save");
function save() { console.log("Saved"); }
button.addEventListener("click", save);

Resolve paths and package names

The module specifier is the string naming the module. ./geometry.js is relative to the importing file; ../geometry.js moves up one folder. A path beginning / starts at the website root, while a full HTTPS URL names its complete location.

A bare name such as "date-fns" has no path prefix. A browser cannot search node_modules for it. An import map placed before the module scripts maps a bare name to a URL. A dev server or bundler can instead resolve installed packages and prepare them for the browser. Installing a package alone does not change the browser's loader.

Make Node.js's module format explicit

Node.js reads type from the nearest parent package.json. Without an explicit type, current versions can detect ES module syntax in an otherwise ambiguous .js file. Set "type": "module" in a new ES module project so tools agree about the intended format. The .mjs and .cjs extensions override that setting.

With the circle example's three files and { "type": "module" }, node main.js prints 28.27. The same files work through a browser module script served over HTTP.

Recognize CommonJS and built-ins

CommonJS is Node.js's older module system. It uses require() to load synchronously and module.exports to provide values. An ES module can default-import a CommonJS package's module.exports. Current Node.js can also require synchronous ES module graphs; top-level await in that graph prevents synchronous loading.

In an ES module, use import { readFile } from "node:fs/promises"; for a Node.js built-in. require, module, and __dirname are CommonJS variables, not ES module globals. import.meta.url gives the module's URL; recent Node.js also supplies import.meta.dirname for local file modules.

If an import statement is rejected as being outside a module, inspect the loader setting: type="module" in browser HTML, or the package type or extension in Node.js.

A static import declares a dependency needed as part of loading a module. Dynamic import is an expression: it starts loading when execution reaches it and returns a promise. Use it for a feature that many visits never need.

Wait for the namespace object

const button = document.querySelector("#show-chart");
button.addEventListener("click", async () => {
  try {
    const { drawChart } = await import("./chart.js");
    drawChart(measurements);
  } catch (err) {
    console.error("Could not load the chart module", err);
  }
});

Here, measurements is the data the page has collected. The first click loads the chart module and calls its exported function. Later clicks reuse the evaluated module. The promise can reject on a loading or evaluation error, so the handler catches it.

import("./chart.js").drawChart tries to read a property on the promise, not on the loaded module. Await the promise or use .then. For a default export, access the namespace's default property: const { default: Chart } = await import("./chart.js");. Unlike a static declaration, this expression can occur inside a function or condition, and its path can be calculated at run time.

Wait during module setup

An ES module can use top-level await outside a function:

const response = await fetch("./config.json");
export const config = await response.json();

Modules depending on this module wait for its evaluation to finish before their own bodies run. Independent modules can continue. A slow configuration request therefore delays its dependents, not necessarily every part of the program. Classic scripts and CommonJS do not allow top-level await; use this module feature for setup its dependents truly need first.

Give each module one clear job

A to-do application can use these boundaries:

The data and storage modules do not import the UI. They can be tested and reused without creating page elements. Keeping calculation and storage out of event handlers also makes failures easier to locate.

Private top-level state is shared across importers. In let nextId = 1; export function createId() { return nextId++; }, the variable stays private while the function exposes controlled access. Two importers calling it once get 1 and 2, not two separate counters starting at 1.

Control work at import time

import "./setup.js"; is a side-effect import: it loads and evaluates the module without requesting local names. Side effects can be useful for setup, but a reusable module is easier to test when its top level defines features and its functions start the work explicitly.

An index or barrel file collects re-exports. It can simplify an interface, but large barrels can bring in extra code and hide a cycle. A circular dependency occurs when modules depend on one another, directly or through other modules. A cycle can work, but reading a binding before its exporting module initializes it causes a ReferenceError. Move shared definitions into a third module that both sides import to remove that dependency cycle.

npm is the package manager supplied with Node.js. The name refers both to a command-line tool and to its public package registry. A package is a folder described by package.json; a project's root is the folder containing that file.

Create the project description

Run node -v and npm -v to check the installed tools. Change to the intended project folder before running npm init. The interactive command asks questions; npm init -y accepts defaults. Then edit the file to describe the project.

{
  "name": "shape-lab",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "start": "node src/main.js",
    "test": "node --test",
    "lint": "eslint ."
  },
  "dependencies": {},
  "devDependencies": {}
}

This is JSON, not a JavaScript object literal. Keys and strings use double quotes. Comments and trailing commas are invalid. A parse error can stop npm before it runs any command.

The name is lowercase and URL-safe; published package names have a maximum of 214 characters. version describes this project, not its Node.js version. private: true prevents accidental npm publication. type: "module" makes Node.js load the package's .js files as ES modules.

Published packages can use main and exports to define entry points for their users. An optional engines entry, such as { "node": ">=22" }, states supported Node.js versions. Read those requirements when a project fails on an older installation.

Use scripts as the task menu

npm run lists available scripts. In this example, npm run lint runs eslint ., npm start runs the application, and npm test runs the test runner. start and test have these short forms; other task names normally use npm run.

npm temporarily adds the project's node_modules/.bin directory to the command search path. A locally installed tool can therefore be named directly in a script. Everyone using the project runs the same recorded tool instead of relying on a global installation.

Extra arguments follow --: npm run lint -- --fix passes --fix to ESLint. The script gives the task a stable name even if the team changes the tool behind it. Start with the scripts field when learning how to work on an unfamiliar project.

Read version numbers

Semantic versioning uses MAJOR.MINOR.PATCH. Starting from 2.4.1, a compatible bug fix becomes 2.4.2; a compatible feature becomes 2.5.0; a breaking change becomes 3.0.0. A major upgrade can require changes to code using the package. Before 1.0.0, a project is in early development and releases can change more freely.

Run an occasional package command

npx serve runs the installed command if available locally. Otherwise, npx can ask to download the package temporarily and run it. This is useful for a tool that does not need to become a permanent project dependency. Check the exact package name and the code's trustworthiness before installing or running it: package commands and install scripts can execute with your permissions.

A command run in the wrong folder may fail because package.json is missing, or an install may create package files in an unintended place. Check the current folder first. Keep scripts understandable and avoid operating-system-specific command tricks when the project must run on several systems.

A dependency is code a project relies on. npm records direct dependencies in package.json, installs packages in node_modules, and records the exact installed dependency tree in package-lock.json.

Separate product code from development tools

npm install date-fns adds a runtime package to dependencies. npm install --save-dev eslint adds a development tool to devDependencies; -D is the short form. Linters, formatters, test runners, bundlers, and TypeScript normally belong in the development list.

When another project installs a published package, npm installs that package's dependencies but not its development dependencies. A browser application can still bundle runtime dependencies into its final files even though the build tool itself is a devDependency.

npm install without a package name installs the dependencies listed for the project. npm uninstall <package> removes a package and its entry. After installing date-fns, Node.js and build tools can resolve import { format } from "date-fns";. A plain browser still needs a resolver such as an import map or dev server.

Read the allowed range

The caret is npm's usual default. For versions at or above 1.0.0, it permits compatible minor and patch updates. Below 1.0.0, it is stricter. For ^2.3.0, 2.3.5 and 2.9.0 fit; 2.2.9 is too old and 3.0.0 crosses the major limit.

A permitted range does not identify one installed version. The lock file does that, including transitive dependencies, which are the packages your chosen packages need.

Recreate an installation

Share package.json and package-lock.json with the project. Let npm maintain the lock file. The generated node_modules folder can be rebuilt and is not the file to share.

Use npm install during development when dependency records may change. Use npm ci for a clean, repeatable install: it requires the lock file, removes existing node_modules, installs the locked tree, and does not rewrite either package file. It fails if the package file and lock file disagree. Repair that disagreement deliberately during development; deleting the lock file can silently change many versions.

Update with a reason

npm outdated compares current, wanted, and latest versions. Wanted is the newest version the declared range permits; latest can be a major version outside it. npm update updates within the ranges and records the resulting tree. To cross a major boundary deliberately, read the changelog, run npm install <package>@latest, and check the project with its tests.

Install project tools locally so their versions are recorded. Before adding another dependency, check maintenance, adoption, license, and whether a built-in feature already solves the problem. structuredClone() handles supported deep-copy needs; Intl.DateTimeFormat formats dates without a date package.

npm audit reports known vulnerabilities in installed versions. Read the report to understand the affected code and usage. npm audit fix can apply compatible fixes, but it does not prove that every vulnerability is resolved or that an update preserves the project's behavior.

A linter reads source code without running it and reports likely bugs or risky patterns. A formatter rewrites layout consistently. ESLint and Prettier often work together because those jobs solve different problems.

Configure the checks

npm init @eslint/config@latest asks about the project, installs development packages, and creates a configuration file. Current ESLint uses flat configuration, commonly in eslint.config.js.

import js from "@eslint/js";
import globals from "globals";

export default [
  js.configs.recommended,
  {
    languageOptions: { globals: globals.browser },
    rules: {
      eqeqeq: "error",
      "no-unused-vars": "warn",
    },
  },
];

The recommended configuration enables bug-finding rules. The browser globals tell ESLint that names such as document exist. This avoids treating a real environment feature as an undefined name.

Rule severities are "off", "warn", and "error", also written as 0, 1, and 2. Errors cause a failure exit code; warnings alone do not fail the command by default. A warning is still information to read, even if the script exits successfully.

Read a lint report

function total(items) {
  let sum = 0;
  let unused = 5;
  for (const item of items) {
    if (item.quantity == "2") sum += item.price;
  }
  return summ;
}

Under the configuration above, this reports five problems. total is never used. sum is updated but its value is never used beyond those updates. unused is unused. The rule eqeqeq flags ==, and no-undef catches the misspelled summ. Calling this function would fail at that undefined name, but the linter can find it without a call.

Start with the rule name and location in the report. Correct the intended behavior, then rerun the command. npm run lint -- --fix requests safe automatic fixes when the project has a lint script. It cannot decide the right business logic for every warning. Disable a rule on one line only when there is a reason, and record that reason next to the comment.

Give layout to one formatter

npm install --save-dev --save-exact prettier
npx prettier . --write
npx prettier . --check

--write changes files; --check reports formatting differences without changing them. With defaults, const point={x:1,y:2} becomes const point = { x: 1, y: 2 };. Options such as "singleQuote": true go in .prettierrc.

ESLint's recommended rules do not prescribe Prettier's layout, so that setup avoids formatting conflicts. If another ESLint configuration adds conflicting style rules, eslint-config-prettier turns those rules off. Running two competing formatters can make files change back and forth.

Add lint and format scripts so checks are easy to repeat. Editor extensions can show diagnostics while typing and format on save after configuration. Both tools skip node_modules by default; add generated output such as dist to appropriate ignore settings. A lint-clean function can still calculate perimeter when it should calculate area; behavior needs tests.

A browser can load a few ES modules directly, but larger projects also use installed packages and files that need transformation. A dev server prepares files while you edit. A bundler follows dependencies to produce files suitable for release.

Work through the Vite cycle

npm create vite@latest shape-lab
cd shape-lab
npm install
npm run dev
npm run build
npm run preview

Choose the Vanilla JavaScript template for this project. The generator supplies development and build scripts. npm run dev prints a local address, often http://localhost:5173. Open that address while editing. In Vite, index.html is the entry point and typically loads /src/main.js with a module script.

The dev server resolves package names and transforms files as needed. Saving a file triggers an update. Hot module replacement, or HMR, replaces a changed module in the running page; supported updates can preserve state instead of forcing a full reload.

npm run build writes optimized output to dist. npm run preview serves that output locally so you can check the actual production build. Preview needs an existing build and does not create a fresh one. Edit source files, since another build replaces generated output.

Understand the production changes

For example, a helper module may export both formatArea and formatVolume. If only formatArea is used and removing the other code is safe, tree shaking can omit formatVolume. Static imports and exports make dependencies visible. A module's top-level side effects may need to remain even when none of its exports are used.

A dynamic import() gives the build tool a boundary for loading later. Build tools can create separate chunks for it; chunk layout depends on the build, so a source module does not always become exactly one output file.

A name such as assets/index-4f2a9c1b.js changes with its content, allowing long-lived browser caches without serving an old file after an update. A source map connects generated locations back to original source lines, making stack traces and debugging easier when maps are available.

Include assets and public configuration

Vite also processes assets: import "./style.css"; includes styles, and import logoUrl from "./logo.png"; supplies the image's final URL. The build can update those references to match generated filenames.

Read mode information through import.meta.env.MODE. Its default values are "development" for development and "production" for a build; a custom mode can use another name. Custom environment values beginning VITE_ are exposed to browser code by default. Everything shipped to the browser is public: keep secret keys and passwords on a server, outside browser code and exposed environment variables.

Do not check only the dev page. Build and preview before release to find problems in transformed output and asset paths. Opening dist/index.html directly from disk does not reproduce serving the site over HTTP. A small page with a few plain modules may need only a static server, without a full build tool.

An automated test runs code with known inputs and checks the result using assertions. A unit test focuses on a small piece, such as a function or method. The runner finds tests, executes them, reports failures, and exits unsuccessfully when a test fails.

Arrange, act, assert

Arrange the input, act by calling the code, and assert the expected result. A useful test name describes behavior. For a rectangle class whose constructor rejects a negative side:

import { test } from "node:test";
import assert from "node:assert/strict";
import { Rectangle } from "./rectangle.js";

test("area multiplies width by height", () => {
  assert.equal(new Rectangle(3, 4).area(), 12);
});
test("rejects a negative width", () => {
  assert.throws(() => new Rectangle(-1, 4), RangeError);
});

The first assertion checks 12 cm², an independently known result. The second passes a function to assert.throws so the assertion can observe the error. Running node --test discovers names such as rectangle.test.js; a package script "test": "node --test" enables npm test.

Strict assertion mode uses Object.is for assert.equal without coercion. assert.deepEqual compares object and array contents. Distinct arrays containing the same values are not the same object, so a strict identity comparison is the wrong check for equal contents.

Use equivalent ideas in Vitest

import { describe, it, expect } from "vitest";
import { Rectangle } from "./rectangle.js";

describe("Rectangle", () => {
  it("computes the area", () => {
    expect(new Rectangle(3, 4).area()).toBe(12);
  });
  it("rejects a negative width", () => {
    expect(() => new Rectangle(-1, 4)).toThrow(RangeError);
  });
});

Vitest uses describe for grouping and it for individual tests. Run npx vitest to watch for changes, or npx vitest run for one run. Jest offers a similar style. Use toEqual for contents and toBe for identity or primitive values.

Include boundaries and numerical limits

Test the exact endpoints of an allowed range as well as inputs just outside it. A thermostat accepting 10–30 °C needs tests accepting 10 and 30, plus tests rejecting 9.5 and 30.5. Add separate checks for nonnumeric and nonfinite values if the interface rejects them. Tests should not depend on a previous test's modified object or execution order.

Floating-point arithmetic may not match a written decimal exactly: 0.1 + 0.2 is 0.30000000000000004. For an appropriate tolerance, use assert.ok(Math.abs(actual - expected) < 1e-9). A circle of radius 3 has an area of about 28.274333882 cm²; Vitest's toBeCloseTo(28.27, 2) checks closeness at that decimal precision. Choose the tolerance to match what the test needs to establish.

Learn from a failure

Read the named behavior, expected and actual values, and source location. Decide whether the implementation or the test's expectation is wrong. In test-driven development, write a failing test, implement enough to pass, then improve the code while keeping tests green.

Export logic from modules and pass inputs as arguments. An event handler can then gather page data and call that logic, instead of mixing calculations into DOM work. DOM-dependent code may use a simulated browser such as jsdom. Await asynchronous work in an async test so it cannot finish before its checks. A test that simply repeats the implementation's formula can repeat its bug; use expected behavior and independent examples.

TypeScript adds static type syntax to JavaScript. A type describes what kind of value code expects. The checker uses those descriptions before the program runs, which can expose mistakes before a user reaches them.

Check a call before execution

function area(width: number, height: number): number {
  return width * height;
}
area(3, "4"); // type error: the second argument is a string

Both parameters must be numbers. The written "4" is a string, so the checker reports the mismatch. Plain JavaScript would coerce that string in multiplication: 3 * "4" gives 12. With addition, 3 + "4" gives "34". A type error identifies a mismatch in the intended inputs even when JavaScript could execute the expression.

An interface describes an object's shape:

interface Shape {
  name: string;
  area(): number;
}

A class declared with implements Shape must provide the specified properties and methods with compatible types. The checker can also detect misspelled properties, incorrect argument counts, and possible undefined values when strict checking is enabled.

Separate checking from removing types

TypeScript project settings live in tsconfig.json. A Vite build does not itself establish that all types are correct. Projects commonly run tsc --noEmit separately. Current Node.js can run supported .ts files directly, but its type stripping also does not type-check them.

Keep runtime checks at data boundaries

Type annotations are removed before execution. Declaring the expected type of data from fetch() or JSON.parse() does not verify the actual value. Check external data in running code before relying on it. A server can send a string even when a type declaration says a field is numeric.

TypeScript's private and readonly are checker restrictions; they do not provide JavaScript's runtime # privacy. JavaScript private fields continue to be enforced when the program runs. TypeScript also does not make a program run faster or prove that its calculations are correct.

The type any turns off useful checking for a value. It may silence an error while allowing the original mistake to survive. Fixing an incorrect assumption or adding a real data check gives the checker better information.

Adopt it in manageable steps

A JavaScript file can begin with // @ts-check and use JSDoc such as /** @param {number} width */ to get checks in supporting editors without becoming a .ts file. A project can later rename files one at a time. Libraries may supply .d.ts type definitions; community definitions are often distributed under @types/....

Larger, long-lived projects gain clearer interfaces, safer refactoring, and better completion in the editor. A small script may not justify another build step and new syntax yet. Tests remain useful in either case: a correctly typed area function can still return the wrong numeric calculation.

A library supplies code your program calls. A framework provides an application structure and calls your code at the right times. This change in control helps coordinate larger interfaces, but it still rests on JavaScript, modules, and a project toolchain.

Organize an interface into components

React, Vue, Svelte, and Angular organize user interfaces with components: reusable parts such as a navigation bar or a to-do item. A component combines markup and behavior, often with styles. When its state changes, the UI system coordinates the relevant page updates.

Meta-frameworks such as Next.js, Nuxt, SvelteKit, and Astro add a larger setup, including routing, server rendering, and build support. Their exact features differ. Knowing JavaScript functions, events, asynchronous code, and module boundaries helps when learning any of them.

A page with a few independent interactive features may be clear with plain JavaScript. A framework becomes useful when many views must share changing data. Choose it for that need instead of assuming every page requires the largest toolchain.

Trace how the tools cooperate

Framework packages are installed through npm and imported as modules. Build tools transform syntax such as JSX or framework-specific files. TypeScript may check interfaces between parts. Linting, formatting, and testing keep their distinct jobs regardless of the UI choice.

Start a simple project and add the tools used by the team:

npm create vite@latest shape-lab
cd shape-lab
npm install
npm install --save-dev eslint @eslint/js globals prettier vitest

A Vite template supplies development and build tooling. Installing extra packages does not configure them: add the ESLint configuration, create tests, and set up editor extensions for linting and formatting on save. A scripts field can provide these tasks:

{
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "lint": "eslint .",
  "format": "prettier . --write",
  "test": "vitest run"
}

These entries belong inside "scripts" in package.json. While editing, run npm run dev; the editor can lint and format as files change. Before sharing work, run npm test. Before release, run npm run build and npm run preview. A static site's built dist folder can then be uploaded to a suitable static host.

Find the file that controls a task

Begin an unfamiliar project with package.json: its scripts reveal how the project runs, and its dependency lists reveal which tools those scripts need. Generated folders can be recreated; settings and source explain how to recreate them.

Learn new tools one at a time so an error still has a recognizable cause. Use official documentation for the installed version when commands or defaults differ, since tool and framework releases change more often than core JavaScript syntax.