JavaScript「関数に戻り値が指定されていない場合、undefinedとなる」について

Question

お世話になります。

JavaScriptの値が'undefined'となる場合に、関数に戻り値が指定されていない場合というのがありますが、いまいち分からない部分があるので質問させてください。

質問は以下の通りです。

//1
function hello(){
console.log('hello');
}

hello();
//これは普通にconsoleに'hello'と表示されるのは分かります。

//2
function hello(){
console.log('hello');
}

console.log(hello());
//これは、関数に戻り値が指定されていない場合として'hello undefined'と表示されるのも分かりました。

//3
function hello(){
const a = console.log('hello');
return a;
}

console.log(hello());
//これは２の関数に'return a'を、返り値として設定しました。
//しかしながら、これも'hello undefined'となります。
//この'undefined'は関数に返り値があるのに、なぜでてくるのでしょうか？

分かる方、ご教授よろしくお願いします。

Answer 1

console.logは戻り値が指定されていない関数であるため、
const a = console.log('hello');において、aはundefinedになります。

したがって、

//3
function hello(){
    const a = console.log('hello');
    return a;
} 

では、undefinedであるaをreturnしているので、helloの戻り値はundefinedです。

Comments

[ozwk]

参考
[Node.js - Node.jsのUndefinedについて｜teratail]( https://teratail.com/questions/375814 )

[susumu-99]

なるほど！分かった気がします。

回答ありがとうございました。
少しだけ質問重ねさせてください。
’console.log’は関数なんですか？

[ozwk]

はい

[susumu-99]

そうなんですね。
関数といえば、関数式や関数宣言、またはアロー関数のようなものをいうと思っていたもので、
「関数に戻り値が指定されていない場合、undefinedとなる」という根拠で説明ができるということなんですね。
ありがとうございました。

[susumu-99]

教えていただいたリンクにconsole.logが’undefined’になるって書いていましたね。
重ねがさねありがとうございました。

Answer 2

const a = console.log('hello');

まずconsole.logが実行されてhelloが表示されます
console.logは戻り値をもたないのでaにはundefinedが返ります

return a;

hello()がundefinedを返します

普通にやるならこうです。

function hello(){
const a = 'hello';
return a;
} 
console.log(hello());

Comments

[susumu-99]

回答ありがとうございます。
回答を読ませてもらい、関数内の'return'の前に’console.log(a)’を付け加えてaが'undefined'となっていることが確認できました。

なんとなくは分かるのですが、回答内の「console.logは戻り値をもたない」の箇所をもう少し詳しく教えていただくことは可能でしょうか。

[yambejp]

> console.logは戻り値をもたない

console.log(console.log(1));
とすると、まず内側のconsole.logが1を表示し
つづいて外側のconsole.logがundefindを返します

console.log(void(0));
がundefindを表示するのと同じロジックです

[susumu-99]

難しいですね。
なんとなく分かる範囲を超えることができませんが、今はconsole.log(console.log(1));が'1 undefined'となることを覚えておきます。ご丁寧にありがとうございます。

voidは強制的に'undefined'を表示するのだと思っていました。
回答を見て、voidは存在しないオブジェクトの添え字’0’だから’undefined’になっているのかなと今思いました。

Answer 3

function f1(){
	return undefined;
};
console.log(f1());

の結果は納得いきますか？いきませんか？
納得いかない場合は、どう表示されたら納得いきますか？

Comments

[susumu-99]

回答ありがとうございます。
これはコンソールに'undefined'と表示されるであってますか？
（理由：f1の関数が実行され、その返り値が'undefined'だから）
どうでしょうか。

[otn]

それが納得できるなら、
function hello(){
const a = console.log('hello');
return a;
}
console.log(hello());
がundefinedと表示するのも納得できるはずです。

[susumu-99]

この場合、'a'が’undefined’だからコンソールに'undefined'と表示されるのは分かります。

しかしながら、'const a = console.log('hello');'の部分で、なぜ'a'が’undefined’となるのかの理由がはっきり分からないと思ったのですが
(他の方の回答をいただいている中の「console.logは戻り値をもたないのでaにはundefinedが返ります」の部分に当たります。）

[otn]

const a=f1();
で、a が undefined になるのはわかりますか？

[susumu-99]

今ちょっとピンと来てないのですが、これは
’const a=f1();’を単体で考えて、aが'undefined'になるということでしょうか。

または、
’function hello(){
const a = console.log('hello');
return a;
}
console.log(hello());’
このソースにおいて’const a=f1();’が’undefined’になるということでしょうか？

[otn]

通じなかったようなので、全体を書くと、
function f1() { return undefined; };
const a = f1();
console.log(a);
でundefinedが表示されることが納得できるかという質問です。

[susumu-99]

function f1() { return undefined; };
const a = f1();
//ここで関数f1()が実行されるので’undefined’が返ってくる。
console.log(a);
//ここで返ってきた’undefined’をコンソールに書き出すというのであれば分かります。

[otn]

それが納得できて、
conost a = console.log(～～);
でaにundefinedが代入されるのが納得できないというのは、上記と何が違うと思ってのことでしょうか？

[susumu-99]

私としては、言い方を変えると、
’return undefined’ではなく’return console.log('hello');’とならない理由が分からなかったのですが、
他の方の回答で、JavaScriptの仕様ということが分かりました。
私の説明が行き届いていなかったため、お手数をおかけしました。
回答いただけたことは大変感謝しています。ありがとうございました。
またよろしくお願いします。

[otn]

なんと！！
console.logが関数であると言うことがわかってなかったと言うことなのですね。
そこまでは想像が及びませんでした。