JavaScript

Function Part 2

Agenda

Arrow Function
spread operator

Arrow Function

let func = (arg1, arg2, ...argN) => expression

Такой код создаёт функцию func с аргументами arg1..argN и вычисляет expression (ваш код) с правой стороны с их использованием, возвращая результат.

Другими словами, это более короткий вариант такой записи:

let func = function(arg1, arg2, ...argN) {
  return expression;
};

Arrow Function

// varian 1
let sum = (a, b) => a + b;
console.log(sum(1,2)) // 3

// varian 2
let sum2 = (a, b) => {
  return a + b;
}
console.log(sum2(1,2)) // 3 

// varian 3
let sumFn = function(a, b) {
  return a + b;
}
console.log(sumFn(1,2)); // 3

Arrow Function

Arrow function очень удобны для однострочных действий. Они бывают двух типов:

Без фигурных скобок: (...args) => expression – правая сторона выражение: функция выполняет его и возвращает результат.
С фигурными скобками: (...args) => { body } – скобки позволяют нам писать многострочные инструкции внутри функции, но при этом необходимо указывать директиву return, чтобы вернуть какое-либо значение.

Spread operator

Вызывать функцию можно с любым количеством аргументов независимо от того, как она была определена.

function sum(a, b) {
  return a + b;
}

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

Остаточные параметры могут быть обозначены через три точки ...

function sumAll(...args) { // args — имя массива
  let sum = 0;
  for (let arg of args) { sum += arg; }
  return sum;
}

console.log( sumAll(1) ); // 1
console.log( sumAll(1, 2) ); // 3
console.log( sumAll(1, 2, 3) ); // 6

Spread operator in arguments

Мы можем положить первые несколько параметров в переменные, а остальные – собрать в массив.

function showName(firstName, lastName, ...titles) {
  console.log( firstName + ' ' + lastName ); // Vic Peet


  console.log( titles[0] ); // JS
  console.log( titles.length ); // 1
}

showName("Vic", "Peet", "JS");

arguments

Все аргументы функции находятся в псевдомассиве arguments под своими порядковыми номерами.

function showName() {
  console.log( arguments.length );
  console.log( arguments[0] );
  console.log( arguments[1] );
}

// Вывод, Vic, Peet
showName("Vic", "Peet");

// Вывод: Vic, undefined (второго аргумента нет)
showName("Vic");

У arguments есть один недостаток. Хотя arguments похож на массив, и его тоже можно перебирать, это всё же не массив. Он не поддерживает методы массивов, поэтому мы не можем, например, вызвать arguments.map(...).

Spread operator

Spread operator можем использовать в вычислениях когда нужно из массива получить список значений.

console.log( Math.max(3, 5, 1) ); // 5

// -----------------
let arr = [3, 5, 1];
console.log( Math.max(arr) ); 
// NaN ожидает список щначений, а не массив

// -----------------

let arr2 = [3, 5, 1];
console.log( Math.max(...arr2) ); 
// 5 (оператор "раскрывает" массив в список аргументов)

Spread operator

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

console.log( Math.max(...arr1, ...arr2) ); // 8

Этим же способом мы можем передать несколько итерируемых объектов:

Мы даже можем комбинировать оператор расширения с обычными значениями:

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

console.log( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25

Spread operator

let arr = [3, 5, 1];
let arr2 = [8, 9, 15];

let merged = [0, ...arr, 2, ...arr2];

console.log(merged); // 0,3,5,1,2,8,9,15 (0, затем arr, затем 2, в конце arr2)

Оператор расширения можно использовать и для слияния массивов:

Оператор расширения можно для копирования массива:

let arr = [3, 5, 1];

let arr2 = [...arr];

console.log(arr2); // 3, 5, 1

JavaScriptFunction Part 2

By Oleg Rovenskyi

JavaScript

Function Part 2

JavaScriptFunction Part 2

More from Oleg Rovenskyi