Parametry rest i spread, czyli tajemnicze 3 kropki + QUIZ

Powrót do: TypeScript dla Testera – Ekspresowe Podstawy (i za darmo!)

Parametry rest i spread, czyli tajemnicze 3 kropki + QUIZ

Prezentacja

Tu w przyszłości mogą pojawić się dodatkowe materiały w postaci prezentacji etc.

Dodatkowe materiały

W JavaScript/TypeScript operator ... ma dwa zastosowania:

• Spread – “rozsypuje” elementy tablicy/obiektu (użycie w wyrażeniach), np. do kopiowania lub łączenia.
• Rest – “zbiera” wiele wartości w jedną tablicę/obiekt (użycie w parametrach funkcji lub destrukturyzacji).

Spread — tablice

// Array spread: copy and merge (shallow)
const a: number[] = [1, 2, 3];
const copy = [...a];                 // [1, 2, 3]


const b: number[] = [4, 5];
const merged = [...a, ...b];         // [1, 2, 3, 4, 5]


// Insert elements in the middle
const withX = [...a, 99, ...b];      // [1, 2, 3, 99, 4, 5]
console.log(copy, merged, withX);

Spread — obiekty

// Object spread: copy and merge (last wins)
const base = { role: 'user', active: true };
const override = { role: 'admin' };


const copyObj = { ...base };                 // { role: 'user', active: true }
const mergedObj = { ...base, ...override };  // { role: 'admin', active: true }
console.log(copyObj, mergedObj);

Rest parameters — funkcje

// Rest parameters: collect many args into an array
function sum(...nums: number[]): number {
  // nums is number[]
  let total = 0;
  for (const n of nums) {
    total += n;
  }
  return total;
}


console.log(sum(1, 2));           // 3
console.log(sum(5, 5, 5));        // 15

Rest — destrukturyzacja tablic

// Array destructuring with rest
const colors = ['red', 'green', 'blue', 'black'];
const [first, second, ...others] = colors;


console.log(first);   // 'red'
console.log(second);  // 'green'
console.log(others);  // ['blue', 'black']

Rest — destrukturyzacja obiektów

// Object destructuring with rest
type User = { id: number; name: string; email: string; isActive: boolean };
const user: User = { id: 1, name: 'Ala', email: 'a@example.com', isActive: true };


const { id, ...data } = user;
// id -> 1
// data -> { name: 'Ala', email: 'a@example.com', isActive: true }
console.log(id, data);

Praktyczne mini-przykłady

• Połącz dwie listy produktów: const all = [...page1, ...page2]
• Płytka kopia obiektu konfigu: const cfg2 = { ...cfg1 }
• Funkcja logująca wiele komunikatów: function logAll(...msgs: string[]) { msgs.forEach(m => console.log(m)) }
• Weź pierwszy element i resztę: const [head, ...tail] = arr

Zadania

Zadanie 1 — spread (tablice)

Treść: Jaki będzie wynik w konsoli?

const x = [1, 2];
const y = [3, 4];
const z = [...x, ...y];
console.log(z);

Zadanie 2 — spread (obiekty)

Treść: Co trafi do konsoli?

const defaults = { theme: 'light', page: 1 };
const opts = { page: 5 };
const finalOpts = { ...defaults, ...opts };
console.log(finalOpts);

Zadanie 3 — rest parameters

Treść: Co wypisze konsola?

function joinWithDash(...parts: string[]): string {
  return parts.join('-');
}
console.log(joinWithDash('QA', 'TS', 'Basics'));

Zadanie 4 — rest w destrukturyzacji

Treść: Jaki będzie wynik na konsoli?

const roles = ['admin', 'editor', 'viewer'];
const [main, ...others] = roles;


console.log(main);
console.log(others);

Linki zewnętrzne

• Spread Operator
• Rest Parameters