Lesson 08 — Rest, spread, and destructuring

Title: ... in arrays and objects, rest parameters, and unpacking

Description: The same ... token can spread values into a new array or object, collect rest items in a function or pattern, or destructure nested data into named bindings. The lesson shows shallow copies, fixture overrides, and unpacking API-shaped objects without repetitive property access.

Why it matters for QA: Tests merge default payloads with overrides, clone arrays before mutation, and read status, id, or nested fields from JSON responses. Spread and destructuring keep that code short and readable.

Title: ... in Arrays and Objects, Rest Parameters, and Destructuring

Description: The ... operator is used in three main ways: to copy or combine arrays and objects (spread), to collect extra values in functions or patterns (rest), and to unpack values from arrays or objects into variables (destructuring). This lesson covers shallow copying, merging test data, overriding fixtures, and extracting values from API responses.

Why it matters for QA: In test automation, you often merge default data with overrides, copy arrays before changing them, or extract fields like status, id, or nested JSON values. Using spread and destructuring makes test code shorter, clearer, and easier to maintain.

1. Spread in arrays

Spread copies items into a new array. It does not mutate the original.

const baseTags = ["smoke", "regression"];
const runTags = [...baseTags, "login"];

console.log(runTags); // ["smoke", "regression", "login"]
console.log(baseTags); // unchanged

Use it to append values or merge lists:

const requiredSteps = ["open app", "sign in"];
const extraSteps = ["open settings"];
const allSteps = [...requiredSteps, ...extraSteps];

2. Spread in objects

Object spread copies own properties into a new object.

const defaultUser = {
  email: "qa@example.com",
  role: "viewer",
  isActive: true,
};

const adminUser = {
  ...defaultUser,
  role: "admin",
};

console.log(adminUser.role); // "admin"
console.log(defaultUser.role); // "viewer"

Later properties override earlier ones with the same key. This pattern is common for request bodies and fixture overrides.

3. Rest parameters in functions

In a parameter list, ... collects the remaining arguments into an array.

function logSteps(label, ...steps) {
  console.log(label, steps.join(" -> "));
}

logSteps("checkout", "cart", "payment", "confirm");

The rest parameter must be last.

4. Array destructuring

Destructuring unpacks array items into variables.

const statusCodes = [200, 404, 500];
const [okCode, notFoundCode] = statusCodes;

console.log(okCode); // 200
console.log(notFoundCode); // 404

Skip items with commas:

const values = [10, 20, 30];
const [, middle] = values;
console.log(middle); // 20

5. Object destructuring

Object destructuring reads properties by name.

const response = {
  status: 201,
  id: "user-42",
  email: "qa@example.com",
};

const { status, id } = response;
console.log(status, id); // 201 user-42

Rename a binding when the source key should stay the same:

const { email: userEmail } = response;
console.log(userEmail);

6. Defaults in destructuring

Defaults apply when the value is undefined.

function buildRequest({ method = "GET", path = "/" } = {}) {
  return `${method} ${path}`;
}

console.log(buildRequest());
console.log(buildRequest({ method: "POST", path: "/users" }));

The = {} fallback lets callers omit the whole options object.

Official docs

• MDN — Spread syntax
• MDN — Rest parameters
• MDN — Destructuring assignment

Quick recap

Suggested exercises

1. Create a copy of an array with test IDs and add a new ID using spread syntax.
2. Use a base request object and change only the method and body fields.
3. Extract status and id from a fake API response object with destructuring.
4. Build a helper function that prints a label and any amount of step names using a rest parameter.

Homework

Short tasks (about 15 minutes). Click a task title to reveal the prompt.