【JavaScript】配列⑤ 〜メソッドチェーン〜

概要

JavaScriptを学習、理解を深めるため「JavaScript Primer 迷わないための入門書」を読み、
理解した内容等を記載していく。

「【JavaScript】JavaScript入門一覧」に他の記事をまとめています。

この記事で理解できること

• 配列におけるメソッドチェーンを利用した処理方法

メソッドチェーンとは

• メソッドを呼び出した返り値に対して、さらにメソッド呼び出しを行うパターンのこと
• .で繋げていく。
• 処理の見た目を簡潔にできることが特徴(途中の一時的な変数を省略できたり..)
  ※メソッドチェーンのことを知らないと最初は複雑に見える(た)
• 長過ぎるメソッドチェーンは読みにくくなる。

const numbers1 = [1, 2, 3, 4];
const numbers2 = [5, 6, 7, 8];

// 異なる配列を結合(concat)し、結合した配列から2で割り切れる要素を集めた新たな配列を作成(filter)
// ↑をメソッドチェーンで処理する
const newNumbers = numbers1.concat(numbers2).filter(val => {
  return val % 2 === 0
});
console.log(newNumbers);

const numbers1 = [1, 2, 3, 4];
const numbers2 = [5, 6, 7, 8];

// 下記は先ほどのメソッドチェーンと同じことをしている
// 異なる配列を結合
const newArray = numbers1.concat(numbers2);

// 2で割り切れる要素を集めた新たな配列を作成
const newNumbers = newArray.filter(val => {
  return val % 2 === 0
});
console.log(newNumbers); // => [ 2, 4, 6, 8 ]