PNL Learn

JavaScript Objects and Classes

Objects, prototypes and classes, the way the language really works.

Objects are how JavaScript models everything from a cart to a DOM node, and classes are built on top of them. You will create objects with shorthand and computed keys, read nested data safely with ?. and ??, enumerate, compare and copy them without surprises, and write methods, getters, setters and locked-down configuration. Then you will see how the language really works underneath: factory functions, constructors, Object.create and the prototype chain. Finally you will write classes with fields, private members, accessors and static methods, extend them with super, relate them to their prototype equivalents, choose composition when inheritance does not fit, and build a shopping cart, a bank account, a shape hierarchy and a tiny event emitter. The course calls out each place JavaScript differs from Python's classes.

IntermediateJavaScript7 lessons80 exercisesAbout 5.5 h
Create a free account

What you will learn

  • Object literals
  • Safe nested reads
  • Copying and comparing objects
  • Getters, setters and freeze
  • Prototypes
  • Classes and private fields
  • Inheritance and composition

Lessons

  1. 1

    Object Literals and Properties

    Build objects with shorthand and computed keys, add, change and delete properties, choose dot or bracket notation, and read nested data safely with ?. and ??.

    12 exercises

  2. 2

    Enumerating, Comparing and Copying

    Test for keys with in and Object.hasOwn, loop with for...in and Object.keys, values and entries, compare objects by reference or by contents, and copy them shallow or deep.

    12 exercises

  3. 3

    Methods, Accessors and Configuration

    Write methods that use this, add methods later, validate with get and set accessors, and lock objects down with defineProperty, preventExtensions, seal and freeze.

    12 exercises

  4. 4

    Factories, Constructors and Prototypes

    Make many objects with factory functions and constructors, share methods through the prototype, walk the prototype chain, and link objects directly with Object.create.

    12 exercises

  5. 5

    Classes

    Declare classes with constructors, fields, private #fields, accessors and static members, check instances with instanceof, pass classes around as values, and keep this when a method becomes a callback.

    12 exercises

  6. 6

    Inheritance and Classes vs Prototypes

    Extend a class, call super() and super.method(), override safely, see a class as a constructor plus a prototype, and choose composition when inheritance does not fit.

    12 exercises

  7. 7

    Putting It Together

    Build a shopping cart that owns its line items, a bank account with a private balance and validation, a shape hierarchy with area and perimeter, and a tiny event emitter.

    8 exercises

How you practice

You practice in the browser and every exercise gives you feedback right away. This course uses these formats:

  • Code exercise: 28
  • Fix the bug: 20
  • Predict the output: 13
  • Fill in the blank: 6
  • Type the answer: 6
  • Select all that apply: 3
  • Match the pairs: 2
  • Multiple choice: 2

Aligned to

CS2023ACM / IEEE-CS / AAAISource
  • Software Development Fundamentals
    • SDF-FundamentalsFundamental Programming Concepts and Practices
JSE-40-01: Certified Entry-Level JavaScript ProgrammerJS InstituteSource
  • Operators and User Interaction
    • 3.3.1Use the ternary, typeof, instanceof and delete operators
  • Control Flow
    • 4.5.1Loop over keys with for...in
JSA-41-01: Certified Associate JavaScript ProgrammerJS InstituteSource
  • Classless Objects
    • 1.1Create objects with literal syntax
    • 1.2Add, modify and delete properties
    • 1.3Use dot and bracket notation
    • 1.4Check and enumerate properties
    • 1.5Compare objects
    • 1.6Copy and clone objects
    • 1.7Use methods and this
    • 1.8Use getters and setters
    • 1.9Configure objects
    • 1.10Create objects with factories, constructors and Object.create
    • 1.11Use prototypes
  • Classes
    • 2.1Declare classes and class expressions
    • 2.2Use new and instanceof
    • 2.3Use class fields
    • 2.4Use get and set in classes
    • 2.5Extend classes and use super
    • 2.6Use static methods and properties
    • 2.7Compare classes with constructor functions
MDN Curriculum (core)MozillaSource
  • JavaScript fundamentals
    • 6.8Object basics

Proto Node Labs is not affiliated with or endorsed by ACM / IEEE-CS / AAAI, JS Institute and Mozilla. Exam names are trademarks of their owners.