В этой статье я хочу кратко объяснить, что такое функции высшего порядка (сокр. ФВП) и как их использовать. Если вы не знакомы с ФВП, тогда вы будете удивлены, ведь работаете с ними постоянно что на JavaScript, что на TypeScript.
Вы можете спросить: Зачем функции принимать другую функцию в качестве аргумента?
Самый простой способ объяснить этот функционал в JavaScript экосистеме - это колбэки.
Колбэки повсюду, так что функции высшего порядка встречаются сплошь и рядом.
setTimeout()
Да, setTimeout - это функция высшего порядка. Она принимает другую функцию в качестве аргумента и вызывает ее по прошествии определенного количества времени. В данном примере, по прошествии примерно 100 миллисекунд.
setTimeout(() => {
console.log('Hello');
}, 100);
Array.find()
Array.find() также очень популярная функция высшего порядка, которая появляется в большинстве проектов по несколько раз. Но вообще-то она чуть более сложная. Потому что наша функция внутри find() просто возвращает булево значение, но сама Array.find() возвращает либо undefined, либо искомый элемент.
const arr: Record<string, number>[] = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
const res: Record<string, number> = arr.find((item: Record<string, number>) => {
return item.id === 3;
});
// res = { id: 3 }
Array.filter()
Еще одна функция класса Array используется для фильтрации массивов. Эта функция также принимает другую функцию как аргумент и возвращает новый отфильтрованный массив.
const arr: string[] = ['Anna', 'Emily', 'John', 'Kevin', 'Michelle', 'Ryan', 'Yvonne'];
const res: string[] = arr.filter((name: string) => {
return name.includes('i');
});
// res = ['Emily', 'Kevin', 'Michelle']
Для начала мы создадим новую функцию и назовем ее requiredAge, она будет принимать число как аргумент. Это число - это минимальный требуемый возраст. А возвращать она будет другую функцию, которая в свою очередь будет возвращать булево значение.
Затем мы вызовем эту функцию дважды на 7 и 8 строчках, где мы установим минимальный возраст.
В конце мы вызовем внутреннюю функцию requiredAge 4 раза, проверяя, подходит ли наш возраст.
function requiredAge(minimum: number): Function {
return (age: number): boolean => {
return age >= minimum;
};
}
const canDrinkBeer: Function = requiredAge(16);
const canDriveCar: Function = requiredAge(18);
console.log(canDrinkBeer(10)); // -> вернет false
console.log(canDrinkBeer(20)); // -> вернет true
console.log(canDriveCar(17)); // -> вернет false
console.log(canDriveCar(25)); // -> вернет true
Что ж, этот концепт звучит довольно сложно, но на самом деле это не так, и мы постоянно имеем дело с функциями высшего порядка.
Спасибо за прочтение. Надеюсь, я смог освежить ваши знания, а, возможно, вы узнали для себя что-то новое, что еще лучше.
habr.com
Что такое функции высшего порядка?
Функция высшего порядка - это функция, которая либо принимает другую функцию в качестве аргумента, либо возвращает функцию. Проще говоря, можно сказать, что функция высшего порядка - это обертка для другой функции.Вы можете спросить: Зачем функции принимать другую функцию в качестве аргумента?
Самый простой способ объяснить этот функционал в JavaScript экосистеме - это колбэки.
Колбэки повсюду, так что функции высшего порядка встречаются сплошь и рядом.
Функции высшего порядка, которые вы могли знать
Давайте посмотрим на самые популярные функции высшего порядка, с которыми вы точно сталкивались при разработке на JavaScript или TypeScript.setTimeout()
Да, setTimeout - это функция высшего порядка. Она принимает другую функцию в качестве аргумента и вызывает ее по прошествии определенного количества времени. В данном примере, по прошествии примерно 100 миллисекунд.
setTimeout(() => {
console.log('Hello');
}, 100);
Array.find()
Array.find() также очень популярная функция высшего порядка, которая появляется в большинстве проектов по несколько раз. Но вообще-то она чуть более сложная. Потому что наша функция внутри find() просто возвращает булево значение, но сама Array.find() возвращает либо undefined, либо искомый элемент.
const arr: Record<string, number>[] = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
const res: Record<string, number> = arr.find((item: Record<string, number>) => {
return item.id === 3;
});
// res = { id: 3 }
Array.filter()
Еще одна функция класса Array используется для фильтрации массивов. Эта функция также принимает другую функцию как аргумент и возвращает новый отфильтрованный массив.
const arr: string[] = ['Anna', 'Emily', 'John', 'Kevin', 'Michelle', 'Ryan', 'Yvonne'];
const res: string[] = arr.filter((name: string) => {
return name.includes('i');
});
// res = ['Emily', 'Kevin', 'Michelle']
Создание своей функции высшего порядка
Вышеприведенные примеры показывают, как ФВП принимают другие функции в качестве аргумента, поэтому я хочу показать второй вариант использования функций высшего порядка, когда они возвращают функцию.Для начала мы создадим новую функцию и назовем ее requiredAge, она будет принимать число как аргумент. Это число - это минимальный требуемый возраст. А возвращать она будет другую функцию, которая в свою очередь будет возвращать булево значение.
Затем мы вызовем эту функцию дважды на 7 и 8 строчках, где мы установим минимальный возраст.
В конце мы вызовем внутреннюю функцию requiredAge 4 раза, проверяя, подходит ли наш возраст.
function requiredAge(minimum: number): Function {
return (age: number): boolean => {
return age >= minimum;
};
}
const canDrinkBeer: Function = requiredAge(16);
const canDriveCar: Function = requiredAge(18);
console.log(canDrinkBeer(10)); // -> вернет false
console.log(canDrinkBeer(20)); // -> вернет true
console.log(canDriveCar(17)); // -> вернет false
console.log(canDriveCar(25)); // -> вернет true
Что ж, этот концепт звучит довольно сложно, но на самом деле это не так, и мы постоянно имеем дело с функциями высшего порядка.
Спасибо за прочтение. Надеюсь, я смог освежить ваши знания, а, возможно, вы узнали для себя что-то новое, что еще лучше.
Функции высшего порядка на TypeScript
В этой статье я хочу кратко объяснить, что такое функции высшего порядка ( сокр. ФВП ) и как их использовать. Если вы не знакомы с ФВП, тогда вы будете удивлены, ведь работаете с ними постоянно что...
habr.com