JavaScriptのコールバックメソッドの基本的な使い方（forEach、map、some、filter、sort）

JavaScriptの勉強をする中で配列のコールバック系メソッドの知識がふわっとしていると感じたので記事にまとめます。

forEachメソッド

配列の全ての要素を1回ずつ呼び出す。
呼び出した要素、その要素のインデックス番号、元の配列を引数に指定できる。

インデックス番号と元の配列を使って要素を取り出すこともできる。

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

arr.forEach((value, index, orgArray) => {
  console.log(`value : ${value} index : ${index} arr[${index}]: ${orgArray[index]}`);
});

出力結果

value : 1 index : 0 arr[0]: 1
value : 2 index : 1 arr[1]: 2
value : 3 index : 2 arr[2]: 3
value : 4 index : 3 arr[3]: 4
value : 5 index : 4 arr[4]: 5
value : 6 index : 5 arr[5]: 6
value : 7 index : 6 arr[6]: 7
value : 8 index : 7 arr[7]: 8
value : 9 index : 8 arr[8]: 9
value : 10 index : 9 arr[9]: 1

第3引数の元の配列の値を変更すると元の配列も変更される。

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

console.log(arr)
arr.forEach((value, index, orgArray) => {
  orgArray[index] = value * 2;
});
console.log(arr)

出力結果

[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
[ 2, 4, 6, 8, 10, 12, 14, 16, 18, 20 ]

mapメソッド

配列の全ての要素を1回ずつ呼び出して処理を実施する。
その結果から新しい配列を生成する。
新しい配列に格納する要素を返す必要がある。

引数の指定方法はforEachと同じ。

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

let newArr = arr.map((value, index, orgArray) => {
  return value + 10;
});

// 省略した形
// let newArr = arr.map((value, index, orgArray) => value + 10);

console.log(newArr);

出力結果

[ 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 ]

someメソッド

配列の全ての要素を1回ずつ呼び出して、関数内のテストを実施する。
１つ以上がTrueならTrue、全てFalseならFalseを返す。

let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9]

var tenOrMore = function(value) {
  return value >= 10;
};

console.log(arr1.some(tenOrMore));
console.log(arr2.some(tenOrMore));

console.log(arr1.some(value => value >= 10));
console.log(arr2.some(value => value >= 10));

出力結果

true
false
true
false

filterメソッド

配列の全ての要素を1回ずつ呼び出して、条件に当てはまる要素だけの配列を返す。

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const even = function(value) {
  return value % 2 === 0;
};

console.log(arr.filter(even));
console.log(arr.filter(value => value % 2 ===0));

出力結果

[ 2, 4, 6, 8, 10 ]
[ 2, 4, 6, 8, 10 ]

sortメソッド

配列の要素をソートした結果を返す。
デフォルトだと文字列として昇順にソートされる。

let arr1 = [1, 3, 7, 10, 2, 9, 4, 8, 5, 7]

// 文字列としてソート
console.log(arr1.sort());

// 数値としてソート
console.log(arr1.sort((x, y) => x - y));

let arr2 = [
  ['C001', 4],
  ['A002', 5],
  ['A001', 1],
  ['B001', 3],
  ['C002', 2],
  ['B002', 7]
]

// ソートキーを２種にする場合
arr2.sort((id, num) => {
  //ID（昇順）
  if (id[0] > num[0]) return 1;
  if (id[0] < num[0]) return -1;
  //番号（降順）
  if (id[0] > num[0]) return -1;
  if (id[0] < num[0]) return 1;
})

console.log(arr2);

出力結果

[ 1, 10, 2, 3, 4, 5, 7, 7, 8, 9 ]
[ 1, 2, 3, 4, 5, 7, 7, 8, 9, 10 ]
[ [ 'A001', 1 ],
  [ 'A002', 5 ],
  [ 'B001', 3 ],
  [ 'B002', 7 ],
  [ 'C001', 4 ],
  [ 'C002', 2 ] ]

終わりに

やろうと思えばforEachで済ますことができますが、処理に応じた適切なメソッドを使えるようにしたいなと思いました。
記載内容に誤り等ありましたら、ご指摘ください。

参考

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
https://infoteck-life.com/a0112-js-array-sort-multi/