Rest and Spread Operators

Array Spread

Der Array Spread Operator “breitet” eine kommagetrennte Liste aus:

const array = [1, 2, 3, 4, 5];

console.log(array);
> Array(5) [1, 2, 3, 4, 5]

console.log(...array);
> 1 2 3 4 5

const names = ['Pedro', 'Axi', 'Bibs'];
function logNames(name1, name2, name3) {
  console.log(name1);
  console.log(name2);
  console.log(name3);
}
// spreading arrays as arguments:
logNames(...names);
// spreading arrays into arrays:
// + substitute for concat!
const array2 = [1, 2, 3, ...names];
console.log(...array2);
// substitute for Array.from
const items = document.querySelectorAll('.item');
const arrayFromItems = Array.from(items);
const arrayFromSpread = [...items];

Array Rest Operator

Gegenteil von Spread

// Funktion mit vielen Argumenten:
// Der Rest Operator packt Items in ein Array
function logNames2(...names) {
  names.forEach(name => console.log(name));
}
logNames2('Bib', 'Axi', 'Pedro', 'George', 'Pye', 'Zack', 'Cloud');

// Array Rest and Destructuring
const scores = [100, 99, 98];
const [first, ...restOfScores] = scores;
console.log(scores);
console.log(first);
console.log(restOfScores);