Objects & Arrays

Objectives

By the end of this lesson, you should be able to:

• Transform and filter arrays with map(), filter(), reduce(), and find()
• Read an object’s keys, values, and entries directly
• Use optional chaining and nullish coalescing to handle missing values safely

💡 Why this matters: Backend code spends most of its time shaping data, filtering a list, pulling out one field, combining values from several sources. These are the exact tools for doing that without a manual loop every time.

⚠️ A note on verification: every snippet and output in this lesson was actually run with Node.js.

Array Methods

const employees = [
  { name: "Erin", department: "Engineering", salary: 74000 },
  { name: "Jordan", department: "Sales", salary: 61000 },
  { name: "Maya", department: "Marketing", salary: 67000 },
];

const names = employees.map((e) => e.name);
console.log(names);

[ 'Erin', 'Jordan', 'Maya' ]

map() transforms every element into something new, here, each employee object into just their name.

const engineering = employees.filter((e) => e.department === "Engineering");
console.log(engineering);

[ { name: 'Erin', department: 'Engineering', salary: 74000 } ]

filter() keeps only elements matching a condition.

const totalSalary = employees.reduce((sum, e) => sum + e.salary, 0);
console.log(totalSalary);

202000

reduce() collapses an array into a single value, here, a running total, starting from 0.

const found = employees.find((e) => e.name === "Maya");
console.log(found);

{ name: 'Maya', department: 'Marketing', salary: 67000 }

find() returns the first element matching a condition, or undefined if none match, unlike filter(), which always returns an array.

Object Methods

const config = { host: "localhost", port: 3000 };
console.log(Object.keys(config));
console.log(Object.values(config));
console.log(Object.entries(config));

[ 'host', 'port' ]
[ 'localhost', 3000 ]
[ [ 'host', 'localhost' ], [ 'port', 3000 ] ]

Object.keys(), Object.values(), and Object.entries() turn an object’s contents into arrays, useful whenever an object needs to be looped over, filtered, or transformed the same way an array can be.

Merging with Spread

const settings = { theme: "dark" };
const merged = { ...settings, fontSize: 14 };
console.log(merged);

{ theme: 'dark', fontSize: 14 }

The spread operator (Lesson 1) works on objects too, { ...settings, fontSize: 14 } copies every property from settings into a new object, then adds fontSize. This is the standard way to build a new object based on an existing one without mutating the original.

Optional Chaining and Nullish Coalescing

const user = { profile: { bio: null } };
console.log(user.profile?.bio ?? "No bio provided");
console.log(user.address?.city ?? "No city provided");

No bio provided
No city provided

?. (optional chaining) safely accesses a nested property, returning undefined instead of throwing an error if something along the chain doesn’t exist (user.address is undefined entirely, ?. prevents an error trying to read .city off it). ?? (nullish coalescing) provides a fallback specifically for null or undefined, user.profile.bio is null, so the fallback text is used. Notice ?? triggers for null, but not for other falsy values like 0 or "", a genuinely empty string wouldn’t get replaced by the fallback.

Try It

1. Given an array of product objects ({ name, price, inStock }), use filter() to get only in-stock products, then map() to get just their names.
2. Use reduce() to find the total price of every in-stock product from question 1.
3. Use Object.entries() on a settings object to log each key and value as a formatted string.
4. Write an expression using ?. and ?? that safely reads settings.theme.color, falling back to "blue" if anything along that path is missing.

Recap

• map() transforms, filter() selects, reduce() collapses to one value, find() returns the first match.
• Object.keys(), Object.values(), and Object.entries() convert an object’s contents into arrays.
• ?. safely handles a possibly-missing nested property, ?? provides a fallback specifically for null/undefined.

Next lesson: classes, JavaScript’s syntax for structured, reusable objects.