＜JavaScript＞Chromeコンソール内でconsole.log();と return が入門者にはわかりにくい
function sample(){
const x = 10;
console.log(x);
} の
console.log(x);
を
return x;
とした時との違いは？
Chromeのコンソールでコード練習をしているとどちらも同じ実行結果が返ってくる。混乱したので、今日もChatGPTに質問して、教えてもらったことをまとめてみる。
console.log(x) の役割
値を出力するだけ
console.log(x) は、値を画面やコンソールに表示するだけ。関数の呼び出し元には何も返さない。
function sample() {
const x = 10;
console.log(x); // コンソールに「10」を表示
}
const result = sample(); // 関数を呼び出す
console.log(result); // undefined と表示されるreturn x の役割
値を関数の呼び出し元に返す
return x は、値を関数の外に**返す（戻す）**ためのものです。これにより、呼び出し元でその値を使うことができます。
function sample() {
const x = 10;
return x; // x を返す
}
const result = sample(); // 呼び出し元に値を返す
console.log(result); // 10 と表示されるわかりにくいのがChromeのコンソールで書いた時。
なぜなら、Chromeのコンソールは関数の動作結果に加えて「関数が返した値」を特別に表示するのだ。
Chromeコンソールでの挙動
console.log(x) の効果
関数内で console.log(x) が実行されると、10 が「即座に」コンソールに出力される。これは console.log の働き。関数の戻り値の表示
Chromeのデベロッパーツールでは、関数の戻り値も自動的に出力する。
しかし、return を使わない関数はデフォルトで undefined を返すため、コンソールには戻り値として undefined が表示される。
実際の例
console.log(x) によって「10」が出力される
これは関数内で明示的に console.log(x) を呼び出した結果。関数の戻り値 undefined が表示される
sample() の戻り値が undefined であるため、Chromeは関数の呼び出し結果として undefined を表示。ただし、これが目立たない場合もある。
return を加えた場合の違い
以下のコードに return x; を加えた場合、Chromeコンソールの表示も変わる。
最初の「10」
console.log(x) によって出力されたもの。次の「10」
関数 sample() の戻り値 10 が表示されたもの。
まとめ
・どちらを使うべきかは、その場の目的次第。
値を計算して次の処理に使いたい→return
デバッグ目的で確認したいだけ→ console.log
・Chromeのコンソールは、関数の戻り値を自動的に出力する機能があるため、表示が混乱を招くことがある
最後に
ここにまとめることで、console.logの本来の機能に気づかせてもらうことができた。今回の疑問は書籍でしか学習していない真のJavaScript入門者にしかわからない疑問点だったようだ。