Objects Rest and Spread

JavaScript Object destructuring, Spread Syntax, Rest Parameter on freeCodeCamp

Object Spread Operator

Mit dem Object Spread Operator können wir Eigenschaften eines Objekts in ein anderes spreaden:

const fruitBlender = {
  blendKiwi: true,
  blendMango: true,
}
const megaBlender = {
  blendGuava: true,
  ...fruitBlender,
}
console.log(megaBlender);

Object Rest Operator

Wenn wir Objekte destrukturieren, können wir übrige Eigenschaften mit dem Rest Operator in eine Variable packen.

const fruitBlender = {
  blendKiwi: true,
  blendMango: true,
  blendOrange: true,
  blendPapaya: true,
  blendBanana: true,
  blendGuava: true,
}
const { blendKiwi, ...otherProps } = fruitBlender;
console.log(fruitBlender);
console.log(blendKiwi);
console.log(otherProps);

Excercises

const exArray = [1, 2, 3, 'blubb', 'whompst', 'purr'];
console.log(...exArray);
function lotsOfArgs(arg1, arg2, arg3, arg4, arg5, arg6) {
  console.log(arg1, arg2, arg3, arg4, arg5, arg6);
}
lotsOfArgs(...exArray);
const ex2Array = ['black cat', 'white cat', 'orange cat'];
const conCatArray = [...exArray, ...ex2Array];
console.log(...conCatArray);

function moreArgs(...args) {
  console.log(...args);
}
moreArgs(...conCatArray);

const [cat1, ...restOfCats] = ex2Array;
console.log(cat1);
console.log(...restOfCats);

const { blendKiwi, blendMango, ...fruitSalad } = fruitBlender2;
console.log(blendKiwi);
console.log(blendMango);
console.log(fruitSalad);

const obj1 = {
  prop1: 'one',
  prop2: 'two',
  prop3: 'three',
};
const obj2 = {
  ...obj1,
  prop4: 'four',
  prop5: 'five',
  prop6: 'six',
};
console.log(obj2);