The Odin Project JavaScript Syllabus

Compare ES6 modules (ESM) with CommonJS modules.

ESM uses import/export, is the official JavaScript standard, works natively in browsers and modern Node, and is statically analyzable (imports resolved at parse time, enabling tree shaking). CommonJS uses require()/module.exports, loads modules synchronously at runtime, and is the traditional Node.js system.

What are the four pillars (core principles) of object-oriented programming?

Encapsulation (bundling data with methods and hiding internal state), Abstraction (exposing a simple interface while hiding complexity), Inheritance (deriving new classes from existing ones to reuse behavior), and Polymorphism (objects of different types responding to the same method call in their own way).

Define encapsulation in OOP and give a JavaScript example of achieving it.

Encapsulation means bundling data and the methods that operate on it into one unit while restricting direct outside access to internal state. In JavaScript it is achieved with closures in factory functions/the module pattern, or with # private class fields, exposing only a public interface.

What is the Single Responsibility Principle (the 'S' in SOLID)?

A class, module, or function should have only one responsibility — one reason to change. For example, DOM-manipulation code should be separated from game logic, so changing how results are displayed does not require touching the code that computes them.

In software design, what is 'tightly coupled' code, and why is 'composition over inheritance' recommended?

Tightly coupled code is code where modules depend heavily on each other's internals, so changing one forces changes in others; loose coupling keeps modules independent behind small interfaces. Composition (building objects from smaller capabilities — 'has-a') is favored over deep inheritance ('is-a') because rigid inheritance hierarchies force subclasses to inherit unneeded behavior and are hard to restructure.

What is npm?

npm is the default package manager for Node.js: a command-line tool (npm install, npm init, npm run) plus the world's largest online registry of JavaScript packages, used to install, manage, and publish project dependencies.

What is the purpose of the package.json file?

It is the manifest of a Node/JavaScript project: it records the project's name, version, scripts (custom commands run with npm run), and its dependencies and devDependencies with version ranges, so anyone can recreate the project's environment with npm install.

What is the difference between dependencies and devDependencies in package.json?

dependencies are packages the application needs at runtime in production (e.g. lodash). devDependencies (installed with npm install --save-dev) are only needed during development and building — e.g. webpack, ESLint, Prettier — and are not required by the shipped code.

What is Webpack and what problem does it solve?

Webpack is a module bundler: starting from an entry point (e.g. src/index.js), it builds a dependency graph of all imported modules and assets (JS, CSS, images, fonts) and bundles them into optimized output files (in dist/) for the browser — reducing HTTP requests and letting you develop with modules while shipping processed static files.

What are loaders in Webpack and which two are needed to bundle CSS?

Loaders are rules that teach Webpack to process non-JavaScript files before bundling. For CSS you need css-loader (reads the CSS file and resolves its imports/urls into JS) and style-loader (injects that CSS into the page via <style> tags); they are listed as use: ['style-loader', 'css-loader'] and applied right-to-left.

What are Webpack plugins, and what does HtmlWebpackPlugin do?

Plugins hook into Webpack's build process to perform broader tasks than per-file loaders. HtmlWebpackPlugin automatically generates the dist HTML file (optionally from a template like src/template.html) with <script> tags for the output bundles already injected, so you never hand-edit dist files.

In Webpack, what is the difference between 'development' and 'production' mode, and what does webpack-dev-server provide?

mode: 'development' builds faster with better debugging info (e.g. source maps friendly, unminified), while mode: 'production' optimizes and minifies output for deployment. webpack-dev-server serves the site locally, watches source files, and automatically rebuilds and reloads the browser on every change.

In The Odin Project's Restaurant Page project, how is the page content structured and rendered?

The HTML contains essentially a single empty <div id="content">; all page content is generated dynamically with JavaScript DOM methods (createElement, appendChild). Each tab (Home, Menu, Contact) lives in its own ES6 module exporting a render function, and nav button click listeners clear #content and load the selected tab's content — the whole project is bundled with Webpack.

What is JSON and what is it used for?

JSON (JavaScript Object Notation) is a lightweight, language-independent text format for storing and exchanging structured data, based on JavaScript object syntax. It is the standard format for sending data between web servers/APIs and clients.

What do JSON.parse() and JSON.stringify() do?

JSON.parse(text) converts a JSON string into a live JavaScript object/value (used on data received from a server). JSON.stringify(value) converts a JavaScript object/value into a JSON string (used to send data or store it, e.g. in localStorage). The conversions are called deserialization and serialization.

List the key syntax rules of JSON that differ from JavaScript object literals.

All property names must be double-quoted strings; strings use double quotes only; values may only be strings, numbers, booleans, null, arrays, or objects (no functions, undefined, comments, or trailing commas). A common bug source is invalid JSON — validators (JSON formatters/linters) catch such errors.

What is a linter, and what does ESLint do for JavaScript?

A linter is a tool that statically analyzes source code against a set of rules to flag errors, bugs, and style/code-quality problems before the code runs. ESLint is the standard JavaScript linter: it catches issues like unused variables, undefined references, and rule violations, and can auto-fix many of them.

What is the difference between ESLint and Prettier, and how are they used together?

ESLint checks code quality (potential bugs, bad patterns), while Prettier is an opinionated code formatter that only handles style — indentation, quotes, line length, semicolons. They are used together, typically with a config (e.g. eslint-config-prettier) that disables ESLint's formatting rules so the two tools don't conflict.

What key methods and hooks does the Constraint Validation API provide for JavaScript form validation?

checkValidity() returns true/false for a field or whole form; reportValidity() checks and shows browser messages; setCustomValidity(message) sets a custom error (empty string means valid); each field exposes a validity (ValidityState) object and a validationMessage; invalid fields fire an 'invalid' event and match the :invalid CSS pseudo-class.

Name common ValidityState properties used to detect why a form field is invalid.

valueMissing (required field empty), typeMismatch (value doesn't match input type, e.g. email), patternMismatch (fails the pattern regex attribute), tooShort/tooLong (violates minlength/maxlength), rangeUnderflow/rangeOverflow (outside min/max), and valid (true when all constraints pass).

What is ECMAScript, who maintains it, and how are versions released? What is ES6 also known as?

ECMAScript is the standardized specification that JavaScript implements, maintained by the TC39 committee under Ecma International (standard ECMA-262). ES6 is the landmark 2015 edition, officially ES2015 (introducing let/const, classes, modules, arrow functions, promises); since then a new edition is released every year (ES2016, ES2017, ...).

Why does JavaScript need asynchronous code, and what is the difference between synchronous and asynchronous execution?

JavaScript runs on a single thread: synchronous code executes line by line, and a slow operation (network request, timer, file read) would block everything, freezing the page. Asynchronous code starts such operations, lets the rest of the program continue, and handles the result later via callbacks, promises, or async/await.

What is a callback function, and what problem is 'callback hell'?

A callback is a function passed as an argument to another function to be executed later (e.g. after an event or async operation completes). Callback hell (the 'pyramid of doom') is deeply nested callbacks from sequential async steps, making code hard to read, reason about, and handle errors in — a key motivation for promises.

What is a Promise in JavaScript, and what are its three possible states?

A Promise is an object representing the eventual completion or failure of an asynchronous operation — a placeholder for a value not yet available. Its states are: pending (initial, operation in progress), fulfilled (completed successfully with a value), and rejected (failed with an error/reason). Once settled, its state cannot change.

How do .then(), .catch(), and .finally() work with promises?

.then(onFulfilled) registers a handler for the fulfilled value and returns a new promise, so calls can be chained to run async steps in sequence (avoiding callback hell); .catch(onRejected) handles a rejection from any earlier step in the chain; .finally() runs regardless of outcome (e.g. to hide a loading spinner).

How does the fetch() API work for making HTTP requests?

fetch(url, options) returns a promise that resolves to a Response object once headers arrive. The promise rejects only on network failure — HTTP errors like 404 still fulfill, so you must check response.ok/response.status. To read the body you call a method like response.json(), which itself returns a promise with the parsed data.

When working with third-party web APIs, what are API keys and CORS?

An API key is a unique identifier appended to requests (often as a query parameter) so the provider can identify the caller, apply rate limits, and control usage. CORS (Cross-Origin Resource Sharing) is the browser mechanism governing requests to a different origin; the server must allow it, and fetch can specify { mode: 'cors' }.

What does the async keyword do when placed before a function?

It makes the function always return a promise: a returned value becomes the promise's fulfilled value, and a thrown error becomes its rejection. It also enables use of the await keyword inside the function body, allowing asynchronous code to be written in a synchronous style — it is syntactic sugar over promises.

What does the await keyword do, and how are errors handled in async/await code?

await pauses execution of the async function until the promise settles, then returns the fulfilled value (without blocking the main thread); if the promise rejects, await throws that error. Errors are handled by wrapping awaited calls in try { ... } catch (err) { ... } (with optional finally), or with .catch() on the returned promise.

In The Odin Project's Weather App project, what is the core data flow for displaying weather?

Take a user's location input, fetch() the weather API's endpoint URL containing the location and your API key, await/parse the response with response.json(), extract only the needed fields into your own data object (a processing function), then render them to the DOM — while showing a loading indicator during the fetch and handling errors (e.g. invalid location) with catch/try-catch.