デベロッパーツールのJsonデータ読み込み、出力したらundefinedが出た

jsonを扱ったjavascriptの挙動を確認するために以下のコードをchromeのデベロッパーツールで試しました

javascript
1const  json =`{"id":1,"name":"js-primer"}`;
2const  obj =JSON.parse(json);
3console.log(obj.id);
4console.log(obj.name);
5

コンソールで試した結果が
1 VM41:3
js-primer VM41:4
undefined
1とjs-primerはわかるのですが、
この二つのVM以下とundefinedは何を意味しているのでしょうか？(undefined自体が未定義の値ということは知っています)
プログラミング初学者なので初歩的な質問かもしれませんがよろしくご回答お願いします。

googleでは__”コンソール　VM”,"コンソール　json VM"__と調べてみましたがしっくりくるものが出てきませんでした。

行動規範の内容に同意します

回答2件

ベストアンサー

VM の部分は、その出力がされたコードの箇所へのリンクになっています。
クリックすると実行したコードでconsoleへ出力した箇所がわかるようになっています。

undefined は実行した最後のステートメント（今回はconsole.log(obj.name);）のリターン？が undefined ということです。

JavaScript
1const  json =`{"id":1,"name":"js-primer"}`;
2const  obj =JSON.parse(json);
3console.log(obj.id);
4console.log(obj.name);
5json //ここを追加

とかやると、json 変数の内容が出力されます。
行頭にマーク(Chrome なら"<"っぽいやつ、Firefox なら矢印)がある行がリターンになります。

Text
1  1         VM277:3
2  js-primer VM277:4
3< "{"id":1,"name":"js-primer"}"

複数行をまとめてコピペするんじゃなくて、１行ごとに実行してみるとわかりやすいんじゃないでしょうか。

投稿2020/10/04 11:11

draq

総合スコア2573

退会済みユーザー

2020/10/04 22:47

解答ありがとうございます。最初にvmをクリックして確かめようとしたのですが、出てきた画面がごちゃついて訳が分からなかったので読むのをやめてしまいました…。今見てみると確かに画面右にあるコードの行数とVM右の数字二つ目と一致しますね。早速一行ずつコンソールに打ってみたのですが、そもそも戻り値が指定されていない場合は常にundefinedが出力されるのですね。知らなかったです。勉強になりました。

行動規範の内容に同意します

最小限にまで削除して実行しました。

HTML
1<html>
2<head>
3	<meta charset="UTF-8">
4	<script type="text/javascript">
5		const  json =`{"id":1,"name":"js-primer"}`;
6		const  obj =JSON.parse(json);
7		console.log(obj.id);
8		console.log(obj.name);
9	</script>
10</head>
11<body>
12</body>
13</html>