即時関数についてです

Question

const getNextRainbowColor = (function() {
   const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
   let colorIndex = -1;
   return function() {
      if(++colorIndex >= colors.length)   colorIndex = 0;
      return colors[colorIndex];
   };
})();
                                                    //出力結果
console.log(getNextRainbowColor());   //文１　　　　//red　
console.log(getNextRainbowColor());                //orange
console.log(getNextRainbowColor());                //yellow
console.log(getNextRainbowColor());                //以下省略
console.log(getNextRainbowColor());
console.log(getNextRainbowColor());
console.log(getNextRainbowColor());
console.log(getNextRainbowColor());
console.log(getNextRainbowColor());
console.log(getNextRainbowColor());

質問です。
以下は私の考えです。
getNextRainbowColorを即時関数で宣言したときにcolorIndexの値は0になり、返り値はredになります。すると文１でgetNextRainbowColorは再び呼び起されたのでコンソールへの出力は配列colorsの次の要素であるorangeになるとおもいました。しかし、出力結果は上の通りです。
この考えの誤っている所を教えてほしいです。

Comments

[yambejp]

質問がよくわからない、最初にgetNextRainbowColor()を
したらいきなりorangeがでてくる想定ということですか？

[oqqu]

最初にコンソールに出力されるのがorangeだと思いました。
分かりにくくてすみません！

Answer 1

宣言時、即時関数はreturn文以降のfunction() {...を返すだけで、返した関数は一度も実行されていません。
console.logで呼ばれたときにはじめて実行されるので、1度目の実行結果であるredが出力されます。

Answer 2

これはJavaScriptの即時実行関数を使った
クロージャーのテクニックの一つです。

とはいえ、ES2015以降のコードではわざわざ利用する必要はありません。
昔のコードをリファクタリングする際に読めれば損はないよ程度のものです。

---

JavaScriptは関数が第一級オブジェクトです。
関数を変数に代入、関数の引数や戻り値として渡せる…という性質を持ってます。

またJavaScriptには関数を宣言した場合スコープを作ります。
中で宣言した変数・定数を束縛して外からはアクセス出来ないようにします。

この2つの性質を活用して、
JavaやPHPでのプライベート変数を作ってしまおうというのが
クロージャーの目的です。

---

普段我々は関数を定義する時にこうやりますよね。

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
let colorIndex = -1;
const getNextRainbowColor = function () {
  if(++colorIndex >= colors.length) colorIndex = 0;
  return colors[colorIndex];
};

この時、colorsやcolorIndexは外のスコープ内でむき出しになっており、
他の変数宣言等と衝突する可能性があります。
colorsなんてよくある名称ですからね。

そこで、一回関数を用意して包む事でスコープを作ります。
これでcolorsとcolorIndexを内部のスコープに閉じ込める事に成功しました。

function hoge () {
  const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
  let colorIndex = -1;
};

hoge();
console.log(colors);
// Uncaught ReferenceError: colors is not defined

この関数を実行した時、未実行の無名関数を戻り値として返してあげます。
実行前の無名関数が戻り値だって！？
JavaScriptの関数は第一級オブジェクトなので、引数に設定したり戻り値として持ち運べるんでしたね。

戻り値の関数を受け取って実行すると
作った関数のスコープに潜り込んで動作が開始されます。

そして見事、関数内部で宣言したcolorsにアクセス出来ました。

function constColors() {
  const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
  let colorIndex = -1;

  return function () {
    return colors;
  }
}

const getColors = constColors();
console.log(getColors()); // ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

道端の人全てに名前が振ってある小説とか読むの辛いですよね。

これはプログラムのコードでも同じことが言えます。
名前は必要最小限に振ってあげると可読性がよくなります。

何度も使う処理でないならば名前を削ってその場で実行してしまいましょう。
即時実行関数に加工して完成です。

const getColors = (function () {
  const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
  let colorIndex = -1;

  return function () {
    return colors;
  }
})();

console.log(getColors());
// ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

---

おまけ

ES2015では正式にクラス構文が実装され、
クロージャーを使ったプロパティの隠蔽は非推奨です。

Javaにはオブジェクトのメンバー変数にプライベート属性を付けると、
外からそのメンバー変数を読み書きできなくなります。

同じ事をJavaScriptでもクロージャーを使って実現しようという発想は多くあり、
昔はこのようなコードを好んで書くエンジニアも居ました。
古い技術ブログやQiitaの記事を漁れば出てくるかもしれませんね。

これはオブジェクト指向言語のプライベート変数を再現したコードになります。
戻り値にオブジェクトを作ってメソッドのようにしているのがわかります。

const newUser = (function () {
  var name = "";
  var age = 0;

  return function (n, a) {
    name = n;
    age = a;
    return {
      getName: function(){ return name; },
      getAge: function(){ return age; }
    }
  }
})();

const user = newUser("taro", 18);
console.log(user.getName()); // "taro"

console.log(user.name); // undefined

しかしこの方法はgetNameやgetAge等という関数を大量に生成するので、
APIのJSONを解析してuserを1000件生成しましょうとなるとメモリの消費量がヤバイことになります。

なので、メモリ消費量を気にするならば、素直にprototype変数を使ったほうがよくて、
それを綺麗な形で包んでくれるクラス構文を使ったほうが良いのです。
JavaScriptはこのオレオレクラス構文がプロジェクト毎に存在しており、時にはバグの温床になったりする程でしたからね。

プライベート変数が存在しない問題も残っていますが、

同じくプライベート変数が存在しないPythonでは
もうプロパティの先頭文字を_にしてプログラミングする際は_で始まるプロパティを参照しないルールで実装すればよくね？
みたいな慣習なようで、JavaScriptも同様のスタイルのプロジェクトをよく見かけます。

Answer 3

getNextRainbowColorを即時関数で宣言したときにcolorIndexの値は0になり

その時点では colorIndexの値は -1 のままです

説明のため、ご質問のコードで示された関数２つに closure, enclosure と命名します。

const getNextRainbowColor = (function enclosure() {
   const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
   let colorIndex = -1;
   return function closure() {
      if(++colorIndex >= colors.length)   colorIndex = 0;
      return colors[colorIndex];
   };
})();

getNextRainbowColorを即時関数で宣言したときには enclosure 関数ブロック内の colors, colorIndex は初期化され(colorIndex は -1 のまま)、closure 関数が返却されます。
getNextRainbowColor は closure 関数と同じですので、getNextRainbowColor() として実行されたときに closure() の実行になります（文１のところで ++colorIndex は -1 から 0 になる）。

teratail の検索欄に「クロージャ」を入力して検索すると、更に知見が広がると思います。

Answer 4

こうすると認識しやすいかもしれません

Comments

[yambejp]

const getNextRainbowColor = (function() {
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
let colorIndex = -1;
console.log(colorIndex);
return function() {
console.log(colorIndex);
if(++colorIndex >= colors.length) colorIndex = 0;
return colors[colorIndex];
};
})();
console.log("do...");
for(var i=0;i<3;i++){
console.log(getNextRainbowColor());
}

[yambejp]

この即時関数はコールバックを返す処理なので
呼ばれてはじめてコールバック内の処理が始まります