【JavaScript】コールバック関数を引数に取る配列のメソッドまとめ

学習に使った教材

以下の動画で、コールバック関数を引数に取る配列のメソッドについて勉強したので、自分の備忘録として残しておきます

コールバック関数を引数に取る配列のメソッド

forEach

• コールバック関数を、配列の各要素に対して一度ずつ実行するメソッド
• 配列名.forEach(コールバック関数);

app.js

const players = ["堂安", "久保", "三苫", "遠藤", "冨安"];

players.forEach(function (player) {
    console.log(`頑張れ、${player}!`);
});

// 上記コードの簡略型
players.forEach(player => console.log(`頑張れ、${player}!`));

// 出力結果
// 頑張れ、堂安!
// 頑張れ、久保!
// 頑張れ、三苫!
// 頑張れ、遠藤!
// 頑張れ、冨安!

map

• コールバック関数を配列の各要素で実行し、その実行結果から新たな配列を生成するメソッド
• 配列名.map(コールバック関数);

app.js

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const squares = numbers.map(number => number ** 2);

console.log(squares);

// 出力結果
// [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

filter

• 真偽値を返すコールバック関数を配列の各要素で実行し、その実行結果を元に新たな配列を生成するメソッド
• 配列.filter(コールバック関数);

app.js

const scores = [77, 48, 81, 56, 61, 93, 32, 72];

const successfulApplicants = scores.filter(score => score >= 70);

console.log(successfulApplicants);

// 出力結果
// [77, 81, 93, 72]

some, every

• some
  • 真偽値を返すコールバック関数を配列の各要素で実行し、1つでもtrueになる要素があればtrueを返すメソッド
  • 配列名.some(コールバック関数);
• every
  • 真偽値を返すコールバック関数を配列の各要素で実行し、全ての要素でtrueになればtrueを返すメソッド
  • 配列名.every(コールバック関数);

app.js

const scores = [81, 68, 76, 84, 93, 85, 77, 91];

const boolSome = scores.some(score => score >= 70);
const boolEvery = scores.every(score => score >= 70);

console.log(`someメソッド: ${boolSome}`); // someメソッド: true
console.log(`everyメソッド: ${boolEvery}`); // everyメソッド: false

reduce

• コールバック関数を配列の各要素で実行し、その実行結果を1つの値にまとめるメソッド
• 配列名.reduce(コールバック関数);

app.js

const scores = [81, 68, 76, 84, 93, 85, 77, 91];

const maxScore = scores.reduce((accumulator, current) => {
    if (current > accumulator) {
        return current;
    }
    return accumulator;
});

console.log(`最高点は${maxScore}点`);

// 出力結果
// 最高点は93点

• accumulator ... 1つ前の要素までの実行結果
• current ... 現在、コールバック関数を実行している要素の値