0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【JavaScript】map()の使い方

Posted at

#map()の使い方
map()は、配列すべての要素に対して、コールバック関数を実行してその返り値で新しい配列が生成される。map()の基本的な書き方は以下となる。

// arrayは配列
array.map((value, index, array) => {
    // 処理内容
});

上記のようにコールバック関数は以下の3つの引数を取る。ただし、indexarrayについては省略可能。
value : 配列の要素
index : 配列のインデックス
array : 処理対象の配列

map()を使って配列の要素を2乗するだけの簡単なサンプルが以下となる。

const array = [1, 7, 12, 15];
const result = array.map((value) => {
	return value * value;
});

console.log(result);    // [ 1, 49, 144, 225 ]

forEach()とmap()の違い

forEach()map()の違いは、実行結果を新しい配列として返すかどうか。
map()は、コールバック関数の返り値で新しい配列が生成される一方で、forEach()は単純に処理を実行するだけで返り値がないため、returnを記述してもforEach()の結果はundefinedが返される。
MDN Web Docsには、map()を使用すべきではない場合として2点挙げられていた。(参考: MDN Web Docs)
● 返された配列を使用しない場合
● コールバックから値を返さない場合

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?