ChromeのDevtoolsでsnippet実行時の戻り値について

Question

ChromeのDevtoolsでsnippetの実行をした際に値が戻ってくる条件を詳しく知りたいです。
どういう理由でconsoleに値が表示されているのでしょうか？

---

"aiueo"を返す

"aiueo"

---

undefinedを返す

console.log("aiueo");

---

undefinedを返す

for(var i=0;i<5;i++){
 console.log(i);
}

---

5を返す

var i=0;
while(i<5){
 console.log(i);
 i+=1;
}

---

5を返す

var i=0;
while(i<5){
 console.log(i);
 ++i;
}

---

4を返す

var i=0;
while(i<5){
 console.log(i);
 i++;
}

Answer 1

あくまで予想ですが、Snippetを実行したときに表示される値は直接コンソールで実行したときに表示されるものと同じだと思われ、それを前提とします。

Javascript while loop return value - Stack Overflow

によると、JavaScript上で戻り値を取得できないwhileループなどのような文にも「戻り値」が設定されていて、JavaScriptのREPL(Devtoolsのコンソールなど)においてはそれを考慮して値が表示されるようです。

基本的に戻り値は「戻り値ありの文の中で最後に実行された文の戻り値」となっているようです。

例えばwhile文については、そのブロック内で最後に実行された戻り値ありの文の表示値がwhile文の表示値になります。

var i=0;
while(i<5){
 console.log(i);
 ++i;
}

においては、最後に実行される戻り値ありの文はi==4のときの++i;です。++iは1増えたあとの値が戻り値となるため、5が戻り値となります。逆にi++の場合は1増える前の値が戻り値となるため、4が戻り値となります。

console.log("aiueo")については単にconsole.logが常にundefinedを返す関数のためundefinedが戻り値となっているだけです。

補足
chromeでconsole.log(3)を実行すると以下のようになります。
3のほうは、console.logが直接コンソールに引数の値を表示する機能を持っているから、表示されたものです。
一方で「←」がついているundefinedの方は戻り値を表しています。コンソールで直接コードを実行すると、その戻り値を表示するようになっているため、表示されます。