Phase 6Beginner7 of 16 in JavaScript

Objects

Objects from the ground up: literals, reading and changing properties, destructuring, looping, references, JSON, getters, setters and descriptors.

Arrays (Phase 5) keep values in a numbered row. Objects keep values under names: a student's name, age and marks, a product's price and stock. Almost everything in JavaScript is built on objects, from the settings of a web app to the JSON a server sends back, so this phase is one of the most important in the course.

You'll write object literals with methods, shorthand and computed keys, read and change properties safely (dot, brackets, in, Object.hasOwn, optional chaining), unpack them with destructuring, merge them with spread, and loop over them with Object.keys, Object.values, Object.entries and Object.fromEntries.

Then you'll learn the idea that causes more bugs than any other: variables hold references to objects, not copies. You'll compare, freeze and update objects without changing the original, turn them into JSON text and back, and finish with getters, setters and the hidden property descriptors behind every property. Phase 7 builds on all of this with this, prototypes and classes.

0/7 · 0%

7 topics ~3 h 29 code blocks & diagrams

Start with the first topic

6.1

Object Literals

An object is a collection of named values called properties; you write one with curly braces, and its values can be anything, including functions (methods), with shorthand and computed keys to keep the code short.

26 min 4 code practice

6.2

Reading and Changing Properties

You read and write properties with a dot (obj.name) or square brackets (obj[key]), add them by assigning, remove them with delete, test for them with in or Object.hasOwn, and read deep values safely with optional chaining ?..

25 min 4 code practice

6.3

Destructuring and Spread with Objects

Destructuring pulls properties out of an object into variables in one line, with renaming, defaults and a rest object for whatever is left; spread ... copies one object's properties into a new one, which is how you merge objects.

26 min 4 code practice

6.4

Looping Over Objects

Objects aren't directly loopable with for...of, so you turn them into arrays first: Object.keys for names, Object.values for values, Object.entries for [key, value] pairs; Object.fromEntries turns pairs back into an object.

24 min 4 code practice

6.5

References and Mutation

A variable doesn't hold an object, it holds a reference (an address) to it, so assigning or passing an object shares the same one; === compares those references, Object.freeze locks an object (shallowly), and immutable updates make new objects instead of changing old ones.

26 min 5 code practice

6.6

JSON

JSON is a text format for data that looks like JavaScript objects; JSON.stringify turns values into JSON text and JSON.parse turns the text back into values, with rules about what survives, plus options for pretty printing and for filtering or reviving values.

25 min 4 code practice

6.7

Getters, Setters and Property Descriptors

A getter is a property that runs a function when you read it, and a setter runs a function when you assign to it; behind every property sits a descriptor that decides whether it can be changed, listed or deleted, which you read with Object.getOwnPropertyDescriptor and set with Object.defineProperty.

26 min 4 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

A pet object with a method

Fill in the pet object with three properties: name (a string), type (a string, like "cat") and age (a number).

Beginner

Read properties safely

Write getCity(user): it returns user.address.city, or "Unknown" when the user, the address or the city is missing (null or undefined). An empty string "" is a real value: return it as it is.

Beginner