list.map((value) => {
//ここでconst
}

mapなどのループ処理の中でconstを使うのはOKでしょうか？

※前提としてはループ処理内でそのconstに動的に設定された値は書き変わらない。もちろん、次のループの時は値が書き換わる（こともある）

特に自分が使っているIDE(WebStorm)ではループ処理内でconst使っても警告が出ないのと、
ループ処理内でもconst使うべしみたいな記事を前に読んだ記憶があったので、
ちょっと気になっております！

追記んぐ！

http://airbnb.io/javascript/

airbnpのスタイルガイドを見てみたら、mapループの中でconst使っているコードが載っていたので、少なくともairbnpのスタイルガイド基準ではOKっぽいです。

一例

// bad
[1, 2, 3].map(x => {
  const y = x + 1;
  return x * y;
});

// good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

行動規範の内容に同意します

回答3件

ベストアンサー

loop内でconstはOK?

JSだとfor文でスコープ作らないから何回も呼んだら駄目に決まってるでしょ！！…と思ったのだけど、
varとは違い、constやletはブロックスコープを作るから問題ないとのこと。

JavaScript
1for (let i = 0; i < 3; i++) {
2  const x = i * 2;
3  console.log(x);
4}
5// 0, 2, 4　の順に出力
6
7console.log("ended i:", i);
8// Uncaught ReferenceError: i is not defined
9
10console.log("ended x:", x);
11// Uncaught ReferenceError: x is not defined

JavaScriptではfor文で定義した変数はループ終了後でも平然と使えるんだけど、
letやconstを使う事でfor文の中でせき止められててイケてる挙動になったね。

varとlet・constの仕様が違うのは、またJSお得意の継ぎ接ぎ対応かよと思わなくもないけど、
ES2015時代のコードはvarを使いませんって話なら整合性取れるしありだね。

と、ここで懸念点が出てきたので検証。
Babelなんかでコンパイルしたらvarに変更されるから不具合出るんじゃないの？
下記のコードを作ってBabel公式サイトのトップに貼り付けて検証してみた。

JavaScript
1// ES2015
2for (let i = 0; i < 3; i++) {
3  const x = i *2;
4  console.log(x);
5}
6console.log(i);
7console.log(x);
8
9// Babelでコンパイル
10for (var _i = 0; _i < 3; i++) {
11  var _x = _i *2;
12  console.log(_x);
13}
14console.log(i);
15console.log(x);

へー、外で使われると困るから存在しない変数名に変化してるんだね。
ループ後にxと_xを使うようにしたら_x2に、_x2を使ったら今度は_x3を使うように…
これなら普段から使っていく分にも大丈夫だね。賢い！

list.map((value) => { //ここでconst }

ちっともループじゃないじゃないか！！
この書き方もアウトって言ってるようなもんだよ？

JavaScript
1const foo = function (value) {
2  const xxx = yyy(value);
3  return xxx;
4}
5
6const a = foo(list[0]);
7const b = foo(list[1]);

もし上記のようにconstを定義した関数を2回以上呼んではならないという制約があったとしたら、
何のための関数か、何のためのconstか全く意味分からないよね。
関数定義したのに再利用出来ないじゃんって話になるし…

上記ではfoo関数と一度定義して仕切り直してるけど、
1回しか使われない関数は無名関数としてその場で定義して使うというテクニックがある。
無名でも関数は関数。

Array.mapという高階関数(厳密にはプロトタイプメソッドだからちょっと違うけど)に渡された関数であって、
1回1回の実行はキチンと区切られている。
各々の要素に適用する関数は相互に影響し合うことはないから大丈夫。

以下は表題とはあまり関係ないけど、
mapには地図という意味の他に、ラインによって流れてきた工業製品を、大きな判子で上から押しつぶして加工するという意味がある。
だからforやwhileと違ってbreakが使えず、全ての要素に関数を適用して、値を取り出す所までがゴールになるという制約が生まれる。

投稿2017/08/25 13:10

編集2017/08/26 05:14

miyabi-sun

総合スコア21158

退会済みユーザー

2017/08/25 21:52

ご回答ありがとうございます。なるほど、頭が整理されました。この前、mapファンクションの第一引数に渡す無名関数内でconst使ってたら、constは値変わらないんだからmapファンクションの外に出せって言われて、「そーゆーものなのかな、、」と思ってしまったのですが、次、同じこと言われた時はちゃんと説明出来そうです。

Lhankor_Mhy

2017/08/26 00:17 編集

横からすみません。 > 何回も呼んだら駄目に決まってるでしょ！！に異論があります。 constはブロックスコープなので、 for (let i=1; i<10; i++){ ␣ const m5 = i*5; ␣ const m3 = i*3; ␣ console.log(`${m5}は5の倍数、${m3}は3の倍数`); } のような書き方が可能です。個人的には「ブロック内で再代入がない変数についてはconstで宣言した方がメンテナンス性が高い」と考えています。「そもそも、再代入不可であることを明示しなくてはならないような大きなブロックを作るな」という意見もあるかもしれませんが、「ループ内でconstを使用してよいか否か」というのは議論のあるところで、「駄目に決まってる」とはいささか早計ではないでしょうか？

退会済みユーザー

2017/08/26 00:22 編集

そういえば、switch文の中でもcase XXX: { ブロックスコープにしてconst }というのも最近自分は使ってました。