2
3

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 5 years have passed since last update.

【JavaScript】【for文駆逐作戦】forEachメソッドの使い方

Last updated at Posted at 2019-01-13

この記事の内容

  • javaScriptの「forEach」の使い方について
  • for文は駆逐していく方針です

なぜ駆逐するのか

  • 読みづらいし、ナウくないから。

さっそく書き方

いつもの「for文」


var colors = ['red', 'blue', 'green'];

  for (var i = 0;  i < colors.length;  i++ ) {
    console.log(colors[i]);
  }

//結果:red、blue、green

「forEach文」

var colors = ['red', 'blue', 'green'];

 colors.forEach(function(color) {
    console.log(color);
 });

//結果:red、blue、green

補足

  • forEachはコールバック関数です!(コールバック関数?)

function(){}

  • 処理全部含めて「コールバック関数」という(名前がない関数は匿名関数って言われるらしい)
  • forEachの場合、配列の中身1個1個(color)に対して,処理が実行される
  • ↓みたいな書き方もできる

var colors = ['red', 'blue', 'green'];

function displayColors(color) {
  console.log(color);
}
  colors.forEach(displayColors);
//結果:red、blue、green

コールバック関数をforEach文に書かずに、先に定義しておいて
forEach文で呼び出す手法です

まとめ

  • ずっとforEachを使い続けるとやみつきになるとのこと
  • for文を使い続けると、トレンドから置いていかれるらしいので、やめましょう。

コメントいただきました!(うれしい)

以下、いただいたコメントです。

  • 再代入しない変数は const で宣言
  • 無名関数 → アロー関数

にすると、よりそれっぽくなるかと思いました。


const colors = ['red', 'blue', 'green'];

colors.forEach((color) => {
  console.log(color);
});

実は、
まだアロー関数・constまで勉強ができておらず、
今回はこの書き方になっております。

記事としてはいけてないのですが、
ちゃんと学んだあかつきには、この記事をリライトしたいと思います!

2
3
2

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
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?