Функция – это блок программного кода на языке JavaScript, который определяется один раз и может вызываться многократно. Функции могут иметь параметры, или аргументы, – локальные переменные, значения которых определяются при вызове функции.
Существуют разные способы создания функций.
Простая функция
Простая функция объявляется с помощью ключевого слова function
function log(){
}
Функция первого класса
Это выражение всего лишь означает, что в JavaScript функции имеют тот же статус, что и объекты: обладают типом Object; их можно задавать как значение переменной; их можно передавать и возвращать по ссылке, как любые другие переменные.
var log = function(mess){
console.log(mess);
}
Стрелочная функция
В JavaScript имеется возможность создавать функции без ключевого слова function:
(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// эквивалентно: (param1, param2, …, paramN) => { return expression; }
Круглые скобки не обязательны для единственного параметра:
(singleParam) => { statements }
singleParam => { statements }
Функция без параметров:
() => { statements }
() => expression
// Эквивалентно: () => { return expression; }
Когда возвращается литеральное выражение объекта, тело функции необходимо заключить в скопки
params => ({foo: bar})
Функция объекта
Функция может быть частью объекта:
const obj = {
message: "test test test",
log(mess){
console.log(mess);
}
}
Функция массива
Функция может быть элементом массива:
const message = [ "test test", message => console.log(message), "test2 test2", message => console.log(message), ]
Функция как аргумент другой функции
Функции подобно другим переменным, могут отправляться функциям в качестве аргументов:
const iner = logger => logger("test");
iner(message=>console.log(message);)
Функция как результат функции
Они, также как и другие переменные могут возвращаться из других функций:
var createScreem = function(logger){
return function(message){
logger(message.toUpperCase() + '!');
}
}
const scream = createScreem(message => console.log(message));
scream('Create returns function');
Поверхностное копирование (clone) и слияние (merge) можно объединить в одну операцию. Это позволяет "обновлять" объекты в функциональном стиле, другими словами, мы создаем новые объекты на основе старых, вместо их обновления.
В современном JavaScript добавили специальный оператор, который позволяет выполнять ту же задачу немного короче и, главное, нагляднее. Он называется spread оператор (на русском его так и называют "спред оператор"). Простое поверхностное копирование с помощью спреда.
Ниже пример такой операции:
const copyOfUser = { ...user };
Spread оператор – это три точки перед именем переменной (или константы), внутри определения объекта. Он раскладывает соответствующий объект внутри нового объекта. С его помощью можно получить только копию, он не может изменять существующие объекты.
С помощью spread оператора легко расширять новые объекты дополнительными данными:
const user = { name: 'Vasya', age: 11 };
const newUser = { ...user, married: true, age: 25 };
// Возраст поменялся
console.log(newUser); // => { name: 'Vasya', married: true, age: 25 }
Всё, что появляется с правой стороны спреда, будет иметь приоритет при слиянии, аналогично тому как работает Object.assign(). В свою очередь всё что слева — имеет более низкий приоритет:
const user = { name: 'Vasya', age: 11 };
const newUser = { age: 25, married: true, ...user };
// Возраст остался тем же
console.log(newUser); // => { name: 'Vasya', married: true, age: 11 }
Свойства могут одновременно появляться как слева, так и справа от этого оператора:
const user = { name: 'Vasya', age: 11 };
const newUser = { age: 25, ...user, married: true };
// Возраст остался тем же
console.log(newUser); // => { name: 'Vasya', married: true, age: 11 }
Пример использование спреда в Array().
const arr1 = new Array(...ages); const newarr = dist => [...dist];
Практика