JavaScriptの関数

JavaScript の関数の操作 map

JavaScriptには、配列を操作するための便利な関数がたくさんあります。

その中でも特によく使われるのが map 関数です。

map 関数を使うと、配列の各要素に対して同じ操作を行い、その結果を新しい配列として返すことができます。

JavaScript の関数の操作 map

map 関数の基本的な使い方

 例 : 配列の各要素を2倍にする(アロー関数を使用)

let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers);
// [2,4,6,8,10] が出力されます。

意味 :

numbersという名前の配列を作成し、[1, 2, 3, 4, 5]という5つの数値を格納します。

number => number * 2 は、map関数に渡すコールバック関数です。この関数は、配列の各要素を受け取り、その2倍の値を新しい配列に入れます。また、 number => number * 2 は、アロー関数の書き方です。

 ※コールバック関数:これは、他の関数に引数として渡される関数のことです。

 ※引数:引数とは、関数に渡されるデータのことです。関数は、この引数を使って何かしらの操作を行い、結果を出力します。

map関数は、新しい値を返します。元の配列の各要素を2倍にした値が doubledNumbers 格納されます。

 

※値を返す:関数が「値を返す」というのは、その関数が何かしらの結果を出力することを意味します。関数の中で計算や処理を行った後、その結果を呼び出し元に返す(戻す)ことです。

JavaScript の関数の操作 filter

JavaScriptには、配列を操作するための便利な関数がたくさんあります。

もうひとつ、その中でも特によく使われるものとして filter関数があります。

filter 関数を使うと、配列の各要素に対して条件をチェックし、その条件を満たす要素だけを含む新しい配列を作ることができます。

JavaScript の関数の操作  filter

filter 関数の基本的な使い方

例 : 配列の中から偶数だけを取り出す(アロー関数を使用)

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers);
// [2, 4, 6, 8, 10] が出力されます。

 意味 :

-  numbers という名前の配列を作成し、[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]という10個の数値を格納します。

-  filter 関数を使って、 numbers 配列の各要素をチェックし、条件に合う要素だけを新しい配列に入れます。この場合、偶数(2, 4, 6, 8, 10)だけを取り出します。

-  number => number % 2 === 0 は、 filter 関数に渡す コールバック関数 です。この関数は、配列の各要素を受け取り、その要素が偶数であるかどうかをチェックします。(number % 2 === 0 は、数値 number が2で割り切れる(つまり偶数である)かどうかをチェックする条件です)

-  filter 関数は、新しい配列 evenNumbers を作ります。この配列には、元の配列の各要素のうち、条件を満たす偶数だけが格納されています。

filter関数を使うと、配列の中から特定の条件を満たす要素だけを簡単に抽出することができ、非常に便利です。このようにして新しい配列を作成することができます。