JavaScript の高階関数を理解する

Jan 22 2023
JavaScript は、幅広い機能を提供する強力なプログラミング言語です。JavaScript の最も重要で多用途な機能の 1 つは高階関数です。

JavaScript は、幅広い機能を提供する強力なプログラミング言語です。JavaScript の最も重要で多用途な機能の 1 つは高階関数です。これらの関数は、1 つ以上の関数を引数として受け取ったり、結果として関数を返したりするため、大幅な柔軟性と抽象化が可能になります。

高階関数とは何ですか?

高階関数は、1 つ以上の関数を引数として受け取る関数、および/またはその結果として関数を返す関数です。という独自のカスタム setTimeout メソッドを作成しましょうmySetTimeout。

function mySetTimeout(callback, delay) {
  setTimeout(callback, delay);
}

mySetTimeout以前に作成した使用方法の例を次に示します。

function sayHello() {
  console.log("Hello!");
}
mySetTimeout(sayHello, 1000);

現実的なシナリオでの高階関数の使用

電子商取引 Web サイトを作成していて、製品のリストをユーザーに表示したいとします。価格やカテゴリなどの特定の基準に基づいて製品をフィルタリングしたいとします。高次関数を使用して製品をフィルタリングできます。

const products = [
  { name: 'Product 1', price: 10, category: 'Electronics' },
  { name: 'Product 2', price: 20, category: 'Fashion' },
  { name: 'Product 3', price: 30, category: 'Electronics' },
  { name: 'Product 4', price: 40, category: 'Fashion' },
  { name: 'Product 5', price: 50, category: 'Electronics' },
];
const filterBy = (property, value) => (product) => product[property] === value;
const filteredProducts = products.filter(filterBy('category', 'Electronics'));
console.log(filteredProducts);

複数のフィルタを連結して、複数の条件でフィルタリングすることもできます。例:

const filteredProducts = 
products
.filter(filterBy('category', 'Electronics'))
.filter(filterBy('price', 30));
console.log(filteredProducts);

結論

この投稿では、高階関数の基本概念について説明し、現実的なシナリオで高階関数を使用する方法の例を示しました。また、高次関数を使用して複数の基準に基づいて製品をフィルタリングする方法についても強調しました。

読んでくれてありがとう!

これにより、JavaScript における高階関数とその使用例についての理解が深まったと思います。