Lesson 5 of 18 · 0 of 2 exercises solved

Arrays & Objects

You will learn how to store in and named values in objects, and how to work with both. Most data in JavaScript programs is held in these two structures.

// Arrays
const numbers = [1, 2, 3, 4, 5];

// Core array methods
numbers.push(6);               // add to end
numbers.unshift(0);            // add to start
numbers.pop();                 // remove from end
numbers.shift();               // remove from start
const sliced = numbers.slice(1, 3);  // [2, 3] (non-destructive)
numbers.splice(1, 2);          // remove 2 elements at index 1 (mutates)

// Transformation methods (return new arrays)
const doubled = [1,2,3].map(x => x * 2);        // [2, 4, 6]
const evens = [1,2,3,4].filter(x => x % 2 === 0); // [2, 4]
const sum = [1,2,3].reduce((acc, x) => acc + x, 0); // 6
const found = [1,2,3,4].find(x => x > 2);        // 3
const hasEven = [1,2,3].some(x => x % 2 === 0);  // true
const allPos = [1,2,3].every(x => x > 0);         // true

// Spread and destructuring
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];  // [1,2,3,4,5,6]

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first, second, rest);   // 1 2 [3, 4, 5]
JavaScript sandboxCtrl+Enter runs
// Objects
const person = {
  name: "Alice",
  age: 30,
  greet() {               // method shorthand
    return `Hi, I'm ${this.name}`;
  }
};

console.log(person.name);         // Alice
console.log(person["age"]);       // 30
console.log(person.greet());      // Hi, I'm Alice

// Object destructuring
const { name, age, city = "Unknown" } = person;
console.log(name, age, city);     // Alice 30 Unknown

// Spread for copying/merging
const updated = { ...person, age: 31, email: "alice@example.com" };

// Object methods
console.log(Object.keys(person));    // ["name", "age", "greet"]
console.log(Object.values(person));  // ["Alice", 30, [Function]]
console.log(Object.entries(person)); // [["name","Alice"], ...]

// Optional chaining and nullish coalescing
const config = { server: { port: 3000 } };
const port = config?.server?.port ?? 8080;   // 3000
const host = config?.server?.host ?? "localhost"; // "localhost"
JavaScript sandboxCtrl+Enter runs

Practice

From the prices array build three values with array , not : discounted (every price times 0.9), expensive (only prices above 20) and total (the sum of the original prices).

Exercise

map, filter, reduce

4 checks
const prices = [12, 25, 8, 40, 19]

const discounted = []
const expensive = []
const total = 0

console.log(discounted, expensive, total)
JavaScript sandboxCtrl+Enter runs
Output
Press Run to try your code, then Check answer to grade it.

Update the user object: add an email , remove age, and keys to the list of remaining property names. Finish by building tagline with the user's name and city.

Exercise

Working with objects

3 checks
const user = { name: 'Maya', age: 34, city: 'Lisbon' }

// add email, remove age

const keys = []
const tagline = ''
console.log(keys, tagline)
JavaScript sandboxCtrl+Enter runs
Output
Press Run to try your code, then Check answer to grade it.

Check yourself

Quick check

What is [1, 2, 3].map(x => x * 2)?

Finished reading?2 exercises still open. You can come back to them later.

Tip: use the ← and → keys to move between lessons.