Рест, спред і деструктуризація

Dev IT JavaScript 56

Рест-оператор (. . .) -- "невідомі аргументи функції". Якщо ми не знаємо скільки буде аргументів, то можна використати рест-оператор (три крапки), який поверне масив.

// rest
function test(a, b, ...rest) {
  return a + b + rest.join('');
}
console.log(test('a', 'b', 'c', 'd', 'e')); // abcde

Спред-оператор має протилежну дію, хоч і позначається таким самим кодом. Якщо рест-оператор збирає елементи в масив, то спред розгортає елементи масива:

// spread
const a = [1, 2, 3, 4, 5];
const b = ['a', 'b', 'c', 'd', 'e'];
const c = [...a, ...b];
console.log(c) // [1, 2, 3, 4, 5, "a", "b", "c", "d", "e"]

Деструктуризація -- це розбирання на змінні частин об'єкту. 

// destructurization
const [one, two, three, four, five] = a;
console.log(one, two, three, four, five) // 1 2 3 4 5

"Фокус" з обміном значеннями:

let d = 3;
let e = 5;
[d, e] = [e, d];
console.log(d, e) // 5 3

Спрощений синтаксис створення змінних:

let [text1, text2, text3, text4] = ['some text 1', 'some text 2', 'some text 3']; // text4 - undefined

Створюємо на базі об'єкта 2 змінні та 2 функції (newName, newAge, newNameF() i newAgeF()):

const firstObj = {
  name: 'Vasia Pupkin',
  age: 25,
  getName(){
    return this.name;
  },
  getAge(){
    return this.age;
  }
};

const {name: newName, age: newAge, getName: newNameF, getAge: newAgeF} = firstObj;

Синтаксис несподіваний. Зліва має бути властивість (або метод), а після двокрапки назва нової змінної (чи функції).

Спрощений варіант деструктуризації (нові змінні та функції матимуть назва властивостей та методів):

const {name, age, getName, getAge} = firstObj;

За допомогою деструктуризації можна розбивати і текст:

const ivan = 'Ivan';
const [s1, s2, s3, s4] = ivan; // I v a n