Javascriptのmap()メソッド: index, return break continue, async callback

今回はJavaScriptの map() メソッドについて詳しく見ていこう。具体的には、 index パラメータ、 return、break、continue キーワード、async コールバック関数を使用した例を見ていきます。

1. map()メソッドの基本を理解する

map()メソッドは、与えられた配列の各要素に関数を適用した結果の新しい配列を作成します。これにより、配列の値を簡単に変換したり計算したりできるようになります。関数型プログラミングの基本である不変のデータ型を扱うため、既存の配列を変更したり操作したりすることはありません。

map()メソッドは、配列のメソッドとしてコールバック関数を引数に渡して呼び出される。コールバック関数は配列の各要素に対して実行され、返された結果は新しい配列に格納される。

コード上では、[1, 2, 3].map(callback) というステートメントを実行することは、[callback(1), callback(2), callback(3)] というステートメントと等価です。

基本的な使い方を見てみよう。

const newArray = array.map(callbackFunction);

2. forEach()、filter()、reduce()メソッドとの比較

mapメソッドは、filter()、forEach()、reduce()メソッドのような他の配列メソッドと組み合わせて使われることがよくあります。それぞれのメソッドは、特定の目的のために配列を処理する異なる方法を持っています。

forEach()：配列の全ての要素を走査し、与えられたコールバック関数を実行します。
reduce()：前の値と現在の値を結合する関数を適用することで、配列内の値を1つの値にまとめる。
filter()：新しい配列を作成し、指定された条件を満たす要素のみを保持する。

詳細は各記事を参照。

3. map()メソッドとreturn、break、continueキーワード

関数型プログラミングに基づく map() メソッドは、配列のすべての要素を走査し、同じ長さの新しい配列を返します。このため、break や continue キーワードによる走査の一時停止や再開はサポートしていません。

しかし、特定の要素に対して何もしたくない場合は、returnキーワードを使って現在の要素の値を返すことができる。これは continue キーワードと似ている。

以下の例では、要素の値が 3 でない場合、return キーワードを使って element 自身を返すことで、元の要素の値を保持している。

const array = [1, 2, 3, 4, 5];
 
const mappedArray = array.map((element) => {
  if (element === 3) {
    return element * 10; // Return transformed value
  }
  return element; // Return original value
});
 
console.log(mappedArray);
 
// Output: [1, 2, 30, 4, 5]

4. コールバック関数内でインデックスと配列のパラメータを使用する

map()メソッドのコールバック関数は、現在の値だけでなく、任意のインデックスや配列自体にもアクセスできる参照を提供します。これにより、より柔軟なコールバック関数を定義することができます。

const numbers = [10, 20, 30, 40, 50];
 
numbers.map((number, index, array) => {
    return `Index: ${index}, Number: ${number}, Array: ${array}`
});
 
// Output:
// [
//   'Index: 0, Number: 1, Array: 1,2,3,4,5',
//   'Index: 1, Number: 2, Array: 1,2,3,4,5',
//   'Index: 2, Number: 3, Array: 1,2,3,4,5',
//   'Index: 3, Number: 4, Array: 1,2,3,4,5',
//   'Index: 4, Number: 5, Array: 1,2,3,4,5'
// ]

5. map()メソッドの動作例

5.1. 数値配列の変換

以下の例では、map メソッドを使用して、与えられた数値配列の各要素を二乗した結果を含む新しい配列を作成します。

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);
 
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

5.2. 文字列配列のフォーマット

この例では、文字列配列の各要素を大文字に変換して新しい配列を作成します。

const words = ['hello', 'world', 'javascript'];
const uppercaseWords = words.map(word => word.toUpperCase());
 
console.log(uppercaseWords); // ['HELLO', 'WORLD', 'JAVASCRIPT']

5.3. オブジェクトの配列のマッピング

この例では、オブジェクトの配列の各要素から特定のプロパティを抽出し、新しい配列を作成します。

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }];
const userNames = users.map(user => user.name);
 
console.log(userNames); // ['Alice', 'Bob', 'Charlie']

5.4. 多次元配列での map() メソッドの使用

この例では、多次元配列にネストされた Map メソッドを使用します。2 行目の入れ子になった Map メソッドに注意してください。

const matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const squaredMatrix = matrix.map(row => row.map(num => num * num));
 
console.log(squaredMatrix); // [[1, 4, 9], [16, 25, 36], [49, 64, 81]]

6. 非同期コールバック非同期コールバック関数 [#6].

map()メソッドに渡すコールバック関数は、非同期に定義することもできます。非同期関数は主に、APIの呼び出しやファイルへのI/O操作、Promiseオブジェクトへの操作など、メインスレッドの動作を中断させないために使用されます。

コールバック関数として非同期関数を渡すと、map() メソッドの戻り値は Promise オブジェクトになります。そのため、以下のように async await キーワードと共に使用する必要がある。

fetchUserData()は任意に宣言されたAPIコール関数であり、非同期に定義される。この関数をマッピング関数として利用する map メソッドは複数の Promise を管理し、複数の Promise を管理する all メソッドは API から受け取ったデータを出力することができる。 APIから受け取ったデータを出力する。

const fetchUserData = async (id) => {
  // Simulated async operation, fetching user data
  const response = await fetch(`https://api.example.com/users/${id}`);
  return await response.json();
};
 
const userIds = [1, 2, 3];
 
const getUserData = async () => {
  const userData = await Promise.all(userIds.map((id) => fetchUserData(id)));
  console.log(userData);
};
 
getUserData();

7. map()のよくある落とし穴

7.1. コールバック関数が値を返さないようにする

mapメソッドのコールバック関数が返す値は、新しい配列の要素となります。コールバック関数が値を返さない場合、新しい配列の対応する要素は undefined に設定される。そのため、コードを書く際には戻り値があることを確認することが重要です。

const numbers = [1, 2, 3, 4, 5];
const wrongResult = numbers.map(num => { num * num });
 
console.log(wrongResult); // [undefined, undefined, undefined, undefined, undefined]

7.2. 配列内の空要素の処理

配列に空の要素がある場合、map メソッドはその要素のコールバック関数を実行しません。また、空要素のインデックスは新しく作成された配列に保持され、その値は undefined に設定される。これらの特徴を理解し、必要に応じて明示的に空要素の処理を実装する必要があります。

const sparseArray = [1, , , 4, 5];
const result = sparseArray.map(num => num * 2);
 
console.log(result); // [2, undefined, undefined, 8, 10]

7.3. map メソッドのコールバック関数内で配列を変更しない

map()メソッドのコールバック関数内で元の配列を変更するのは良い習慣ではありません。これは予期せぬ動作を引き起こす可能性がありますし、コードの可読性や保守性にも影響します。その代わりに、必要に応じて新しい配列を作成し、元の配列と新しい配列を独立させておく方がよいでしょう。

6. 最後に

JavaScriptの map() メソッドは、ウェブ開発で配列の変換が必要になったときに最初に考えるべきツールです。毎日使えるメソッドです。このプレビューで map() メソッドの感触をつかんだなら、MDN 公式ドキュメント (opens in a new tab) をチェックして、さらに詳しく学んでください。

forEach()filter()