console.logの挙動について

javascriptのconsole.logの挙動で、どうしても理解できないことがありました。
console.logの実行地点では何もデータが入っていないにもかかわらず、全ての実行結果が返ってきます。

解決したいこと

1. 下記ソースにある、console.logの(1)の挙動について

forでデータを挿入する前ですが、既に実行後の結果が出力されます。

上から順に実行されるはずなので、この挙動が理解できません。

1. 中身のデータの上書きについて。

forの中の処理で、dataset.yearが今回は２回実行されます。
１度目は2016が挿入され、２度目2017が上書きで挿入されるはずです。
ですが結果はどちらも2017と表示されます。
arrSet[0]['year']に2016、dataset[1]['year']に2017が挿入されるはずで、
ここは上書きされないと思うのですが…なぜでしょう。

###該当のソースコード

javascript
1let array = ['2016','2017'];
2let res = getData(array);
3
4function getData(array) {
5
6	let arrSet = [];
7	let dataset = {};
8	
9	console.log(arrSet);// (1)
10	console.log(arrSet[0]);// (2)
11
12	for (key in array) {
13		dataset.year = array[key];
14		arrSet.push(dataset);
15	}
16	console.log(arrSet[0]);// (3)
17	return arrSet;
18}

console.log結果

(1) … 全てのデータが出力される。
(2) … この地点では存在しないのでundefined。ここは理解できる。
(3) … 実行後なので出力される。ここも理解できる。

###試したこと（３つほど

１．解決したい事の２番目の、正常処理方法。

→for内の１番上に、dataset = {};を追記し初期化すると、正常に表示されます。
ですが初期化しない際に正常処理が行われない理由は不明のままです。

２．chromeのデバッグツールでforの部分にブレークポイントを設置。

→止まった時点で(1)の中身を確認すると当然ですが何もデータは入っていません。
そのまま処理を流しても、console.logの中にデータが入ることはありませんでした。

３．上記デバッグを再度実施。

→ブレークポイントで止まっても(1)のconsole.logの中身を確認せず、そのまま処理を流した後に(1)の中身を確認すると、全てのデータが入っていました。

↑つまりconsole.logは実行ポイントではなく、確認時点で表示内容が変わる（ことがある？）

###補足情報

chromeの最新環境で実行。

最後に

console.logという初歩的なところかもしれませんが、
この挙動についてご存知の方がいらっしゃいましたらご教示いただけると幸いです。
何卒、よろしくお願い致します。

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

回答1件

ベストアンサー

下記ソースにある、console.logの(1)の挙動について

恐らくですが、質問者さんは「ページの読み込みが完了したらデベロッパーツールを開く」という手順でコンソールを確認したのではないかと思います。そのような手順でデベロッパーツールを開いた場合に質問文にあるような挙動になる理由は、console.logで配列を表示する場合、配列の内容はconsole.logが行われたタイミングではなく、デベロッパーツールを開いたときのものになるからです。以下のようにすることで「ページの読み込みが完了したらデベロッパーツールを開く」という手順でもconsole.logが実行されたタイミングの内容を得ることができると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<script>
15    let array = ["2016", "2017"];
16    let res = getData(array);
17
18    function getData(array) {
19
20        let arrSet = [];
21        let dataset = {};
22
23        console.log(JSON.stringify(arrSet));// (1)
24        console.log(JSON.stringify(arrSet[0]));// (2)
25
26        for (key in array) {
27            dataset.year = array[key];
28            arrSet.push(dataset);
29        }
30        console.log(JSON.stringify(arrSet[0]));// (3)
31        return arrSet;
32    }
33</script>
34</body>
35</html>

中身のデータの上書きについて。

オブジェクトは参照渡しだからではないかと思います。

javascript
1var a, b, array = [];
2a = {x: 0, y: 0};
3array.push(a);
4b = a;
5b.x = 5;
6array.push(b);
7console.log(array[0]);// Object { x: 5, y: 0 }
8console.log(array[1]);// Object { x: 5, y: 0 }

以下のようにしてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<script>
15    let array = ["2016", "2017"];
16    let res = getData(array);
17
18    console.log(res[0]["year"] + " : " + res[1]["year"]);// (5)
19
20    function getData(array) {
21        let arrSet = [];
22
23        console.log(arrSet);// (1)
24        console.log(arrSet[0]);// (2)
25
26        for (var key in array) {
27            arrSet.push({year: array[key]});
28        }
29
30        console.log(arrSet[0]);// (3)
31        console.log(arrSet[1]);// (4)
32
33        return arrSet;
34    }
35</script>
36</body>
37</html>