コンソール画面に出力される値に関して分からない部分があります

Question

以下のコードを実行した際に理解できない部分があった為ご質問させていただきました。

var data = 'Global data';
    var obj1 = {data: 'obj1 data'};
    var obj2 = { data: 'obj2 data'};
    
    function hoge(){
        
        console.log(this.data);    
    }
    obj1.hoge = hoge;
    
    hoge.call(obj1);
    console.log(obj1.hoge());

上記を実行しますと、コンソール画面に「obj1 data」「obj1 data」「undefined」の３つが表示されるのですが、「undefined」が何故表示されるのかが分かりません。
どなたか教えてくださる方いましたら、よろしくお願いいたします

Comments

[think49]

本記事を [修正] して、質問のタイトルを「具体的」なものにして下さい。以前、全く同じタイトルで質問していて、違いがタイトルから読み取れません。

[newyee]

すみません。なんとつけたら良いか分からず、大雑把なものにしてしまいました。

Answer 1

「obj1 data」「obj1 data」「undefined」のうち、後ろの2つは
console.log(obj1.hoge());
が出力しています。

console.log(obj1.hoge());の中のobj1.hoge()で「obj1 data」が出力されます。
console.log(obj1.hoge());のconsole.log(...);の部分はobj1.hoge()の戻り値をコンソールに吐き出しますが、obj1.hoge()が何も返さないので「undefined」が出力されます。

function hoge()の最後にreturn 1とかすると、「undefined」が「1」になるので分かり易いかと思います。

Comments

[newyee]

ご丁寧なご回答ありがとうございます。
大変分かりやすく理解することができました！

Answer 2

console.log(obj1.hoge()); // obj1.hoge()が戻り値を返さないから