JavaScriptオブジェクトメソッドの実行結果

Question

var person = {
  firstname: 'Default',
  lastname : 'Default',
  greet: function() {
    return 'Hi ' + this.firstname;
  }
}

var john = Object.create(person);
john.firstname = 'John';
john.lastname = 'Doe';
john.greet();

nodeコマンドを実行した場合やJSコードを読み込んだhtmlファイルをブラウザで表示させた場合に、john.greet()の結果が表示されないのはなぜでしょうか？
なおブラウザのコンソール上でjohn.greet()を実行すると'Hi Jonh'という結果が表示されます。
このような違いが生じる理由が知りたいです。よろしくお願いします。

Answer 1

JavaScriptオブジェクトメソッドの実行結果

実行環境の違いですね。

ブラウザの開発者コンソールでは、実行された最後のステートメントの結果を表示します。
一方で ファイル指定で実行する NodeJS は、ソースコード内にコンソール出力が記述されていない限り、Terminal（コマンドプロンプト）に結果を表示することはありません。

---

例えば、ブラウザで以下のコードを実行すると、'Hi Jonh' と console.log() の内容が表示されますが、console.log の返り値（undefined）も続けて表示されるはずです。

// test.js
var person = {
  firstname: 'Default',
  lastname : 'Default',
  greet: function() {
    return 'Hi ' + this.firstname;
  }
}

var john = Object.create(person);
john.firstname = 'John';
john.lastname = 'Doe';
console.log( john.greet() ); // nodeでも console.log() の内容は表示する

このコードをファイルにし、nodeコマンドで実行すると、以下のように console.log() の内容が表示されます。

$ node test.js
Hi Jonh

NodeJS も console.log を使って簡易的なデバッグができます（通常は debug モジュールが利用されます）

---

REPL（対話インタプリタ） では、開発者コンソールのように、ステートメントの結果を表示したりもします。

以下、REPLで実行し、ご質問のコードを貼り付けた例

$ node
Welcome to Node.js v12.12.0.
Type ".help" for more information.
> var person = {
...   firstname: 'Default',
...   lastname : 'Default',
...   greet: function() {
.....     return 'Hi ' + this.firstname;
.....   }
... }
undefined
> 
> var john = Object.create(person);
undefined
> john.firstname = 'John';
'John'
> john.lastname = 'Doe';
'Doe'
> john.greet();
'Hi John'
> [Ctrl]+[C]
(To exit, press ^C again or ^D or type .exit)
> [Ctrl]+[C] （REPLを抜ける）

Comments

[maskmelon]

返り値とログ出力の違いがよく理解できました。丁寧な回答ありがとうございました。

Answer 2

コンソールにで実行すれば、戻り値を自動的に表示されますが、nodeコマンドやHTMLではそうしていません。コンソールに何かを表示したいときはconsole.logを使ってください。

var person = {
  firstname: 'Default',
  lastname : 'Default',
  greet: function() {
    console.log('Hi ' + this.firstname);
  }
}