JavaScriptのメソッド(forEach,map,filter)の違い

挨拶

Webエンジニアへの就職に向けて学習をしております、ひろやすと申します。
今回の記事は、私がUdemyでReact.jsの講座を受講しており、JavaScriptのメソッド(forEach,map,filter)について復習したため、学習のアウトプットとして記載させて頂きます。

※Udemyとは、動画コンテンツで学習するオンライン学習プラットフォームのこと。

forEach

forEachメソッドは、配列の要素を一つずつ取り出して処理を行いたい場合に使います。

const array = [1, 2, 3];

array.forEach((num) => {
  return num * 2;
};

// console.log(array);
// [2, 4, 6]

map

mapメソッドは、forEach文と同じく、配列の要素を一つずつ取り出して処理を行いたい場合に使います。

const array = [1, 2, 3];

array.map((num) => {
  return num * 2;
};

// console.log(array)
// [2, 4, 6]

filter

filterメソッドは、条件に合う配列要素を取り出したい場合に使います。

const array = [1, 2, 3];

array.filter((num) => {
  //　２で割り切れる場合
  return num % 2 === 0;
};

// console.log(array);
// [2]

forEachとmapの違い

forEachメソッドは、単に配列に処理を行うのに対し、
mapメソッドは、処理を行い配列のデータを返します。

//forEachの場合
const array = [1, 2, 3];

number = array.forEach((num) => {
  return num * 2;
};

// console.log(number);
// undefined ←配列のデータが返っていない

// mapの場合
const array = [1, 2, 3];

number = array.map((num) => {
  return num * 2;
};

// console.log(number);
// [2, 4, 6] ←配列のデータが返っている

mapとfilterの違い

mapは、処理を実行した結果の配列を返すのに対し、
filterは条件に当てはまった要素だけを配列として返している。

//mapの場合
const array = [2, 4, 6];

number = array.map((num) => {
  return num / 2;
};

// console.log(number);
// [1, 2, 3] ←各要素を2で割った値を配列として返している。

// filterの場合
const array = [2, 4, 6];

number = array.filter((num) => {
  return num / 2;
};

// console.log(number);
// [2, 4, 6] ←２で割ることが出来る要素を配列として返している。

参考になれば幸いです。
最後までお読み頂きましてありがとうございます。