The Odin Project JavaScript Syllabus

JavaScript syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for JavaScript in The Odin Project, not a summary of it.

1. 1

   Organizing Your JavaScript Code

   7 topics

   • Organizing Code with Objects
   • Object Constructors
   • Factory Functions and the Module Pattern
   • Classes
   • ES6 Modules
   • OOP Principles
   • Projects
2. 2

   Build Tools & npm

   4 topics

   • npm
   • Webpack
   • Project: Restaurant Page
   • JSON
3. 3

   JavaScript in the Real World

   3 topics

   • Linting
   • Form Validation with JavaScript
   • ECMAScript
4. 4

   Asynchronous JavaScript and APIs

   4 topics

   • Asynchronous Code
   • Working with APIs
   • Async and Await
   • Project: Weather App
5. 5

   Testing JavaScript

   3 topics

   • Testing Basics
   • Project: Testing Practice
   • More Testing
6. 6

   A Bit of Computer Science

   4 topics

   • A Very Brief Intro to CS
   • Recursion
   • Complexity Analysis
   • Data Structures & Algorithms
7. 7

   Intermediate Git

   3 topics

   • A Deeper Look at Git
   • Working with Remotes
   • Using Git in the Real World
8. 8

   Finishing Up with JavaScript

   2 topics

   • Project: Battleship
   • Conclusion

JavaScript flashcards for The Odin Project

24 of 50 cards from the JavaScript deck — real questions with worked answers.

1. In JavaScript, what is an object literal and what is its basic syntax?

   An object literal is a way to create an object directly using curly braces containing comma-separated key: value pairs, e.g. const myObject = { property: 'Value!', otherProperty: 77, "obnoxious property": function() {} }. It creates a single object without needing a constructor or class.

2. What is the difference between dot notation and bracket notation for accessing object properties, and when must you use bracket notation?

   Dot notation (obj.property) is cleaner but only works with valid identifier names known at write time. Bracket notation (obj["property"]) is required when the key contains spaces or special characters, or when the key is stored in a variable, e.g. obj[variable].

3. What is an object constructor in JavaScript?

   A regular function written to be called with the new keyword that creates and initializes objects, conventionally named with a capital letter, e.g. function Player(name, marker) { this.name = name; this.marker = marker; }. Calling new Player('steve', 'X') returns a new Player object.

4. What four things happen when a function is called with the new keyword?

   1) A new empty object is created; 2) the object's prototype is set to the constructor's .prototype property; 3) the constructor runs with this bound to the new object (initializing properties); 4) the new object is returned automatically (unless the constructor explicitly returns another object).

5. What is the prototype of a JavaScript object?

   Another object that the original object inherits from: the original object gets access to all of the prototype's properties and methods. Every object has a prototype (accessible via Object.getPrototypeOf()), and objects made by a constructor inherit from Constructor.prototype.

6. Describe how the prototype chain works when you access a property on an object.

   JavaScript first looks for the property on the object itself; if not found, it looks on the object's prototype, then on that prototype's prototype, and so on up the chain until it reaches Object.prototype (whose prototype is null). If the property is never found, undefined is returned.

7. Why should methods be defined on Constructor.prototype instead of inside the constructor function itself?

   Methods on the prototype are created once and shared by every instance via the prototype chain, saving memory and allowing central updates. Methods defined inside the constructor are duplicated on every instance created.

8. What is a factory function in JavaScript?

   A plain function that creates and returns a new object each time it is called, without using the new keyword, e.g. function createUser(name) { const discordName = '@' + name; return { name, discordName }; }. It often uses closures to keep some variables private.

9. Compare factory functions with object constructors.

   Factories are called like normal functions (no new) so they can't silently fail when new is forgotten, and they enable true private variables via closure. Constructors use new and prototypes, so instances share methods (more memory-efficient) and work with instanceof; factory-made objects don't link to a shared prototype by default and instanceof won't identify them.

10. What is a closure in JavaScript?

    A closure is the combination of a function and the surrounding lexical environment in which it was declared: the function retains access to variables from its outer scope even after that outer function has finished executing.

11. How do factory functions create private variables and functions?

    Variables declared inside the factory but not included in the returned object are inaccessible from outside; only the returned methods (closures) can read or change them. Example: a counter factory returning { increment, getCount } keeps the count variable private and exposes it only through those methods.

12. What is an IIFE and how does it relate to the module pattern?

    An IIFE (Immediately Invoked Function Expression) is a function wrapped in parentheses and called immediately: (function() { ... })(). The module pattern wraps a factory function in an IIFE so it runs once and returns a single object exposing public methods while keeping internal state private — creating a one-off encapsulated module (namespace).

13. What two main problems does wrapping code in modules/objects solve (namespacing)?

    It prevents naming collisions by grouping related variables and functions under one object (a namespace), and it encapsulates related functionality so internal details are hidden and the global scope is not polluted with many loose variables and functions.

14. What are ES6 classes 'syntactic sugar' for in JavaScript?

    Classes are primarily syntactic sugar over JavaScript's existing prototype-based constructor functions: class methods are placed on the class's prototype and instances are still linked via the prototype chain. (They add real differences too: classes must be called with new, are not hoisted like function declarations, and their bodies run in strict mode.)

15. What is the role of the constructor method inside a JavaScript class?

    constructor is the special method that runs automatically when a new instance is created with new; it receives the arguments passed to the class and initializes the instance's own properties (e.g. this.name = name). A class can have at most one constructor.

16. How do extends and super work in JavaScript class inheritance?

    extends makes one class inherit from another (subclass gets the parent's methods via the prototype chain). Inside the subclass constructor, super(args) must be called before using this — it runs the parent constructor to initialize inherited properties; super.method() calls a parent method.

17. What does the static keyword do in a JavaScript class?

    static defines a property or method on the class itself rather than on instances. It is called as ClassName.method() and is typically used for utility functions or shared data, e.g. Date.now() or a static counter of created instances.

18. How do you declare private fields and methods in a JavaScript class, and what do they guarantee?

    Prefix the name with # (e.g. #balance, #calculate()) and declare fields in the class body. Private members can only be accessed from inside the class; accessing #field from outside throws a syntax error, giving true encapsulation.

19. What are named exports and default exports in ES6 modules, and how do their import syntaxes differ?

    Named exports: export const foo = ...; imported with matching names in braces: import { foo } from './module.js'. Default export: export default value; one per module, imported with any chosen name and no braces: import myName from './module.js'. A module can combine one default with many named exports.

20. How do you enable ES6 modules in the browser, and what special behaviors do module scripts have?

    Use <script type="module" src="main.js"></script>. Module scripts have their own top-level scope (nothing leaks to the global scope), run in strict mode automatically, are deferred by default, and can use import/export statements.

21. 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.

22. 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).

23. 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.

24. 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.

See more JavaScript flashcards →

Planning JavaScript for The Odin Project

JavaScript (The Odin Project) FAQ