Javascript objects in array of objects,are different using console.log

Question

My Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>

<body>
    <script>
        var students = [];
        var student = {};
        var scores = [];
        var final = [];

        function setStudent(name , score) {
            student = {"Name": name, "Score": score};
            //student.Name = name;
            //student.Score = score;
            document.write(student.Name + " scored " + student.Score + ".<br>");
            final.push(student);
            return student;

        }


        for (var i=0; i<4; i++) {
            students.push(prompt("Please Enter student name"));
        }

        for (var i=0; i<4; i++) {
            scores.push(prompt("Please Enter "+ students[i] +"'s score" ))
        }
        for (var i=0; i<4; i++) {
            setStudent(students[i],scores[i]);

        }

        console.log(final);
    </script>
</body>
</html>

This is the first version which works, the console output look like this: Image can be found at http://i.imgur.com/HnEHX5J.png

While the second version is:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>

<body>
    <script>
        var students = [];
        var student = {};
        var scores = [];
        var final = [];

        function setStudent(name , score) {
            //student = {"Name": name, "Score": score};
            student.Name = name;
            student.Score = score;
            document.write(student.Name + " scored " + student.Score + ".<br>");
            final.push(student);
            return student;

        }


        for (var i=0; i<4; i++) {
            students.push(prompt("Please Enter student name"));
        }

        for (var i=0; i<4; i++) {
            scores.push(prompt("Please Enter "+ students[i] +"'s score" ))
        }
        for (var i=0; i<4; i++) {
            setStudent(students[i],scores[i]);

        }

        console.log(final);
    </script>
</body>
</html>

The output of this version is: You can find image at https://i.stack.imgur.com/0mQFz.png

Just in case you have no idea what is changed look at the function where the object is assigned My question is that why the output differ.

Rico Kahler · Accepted Answer · 2017-05-30T03:35:37.337

You're not declaring the variable student inside your setStudent function. Therefore, the variable student is defined on the global object window. When you run this method, you're using the same pointer every time and thus changing values of the same pointer and re-adding the same object to the array.

To fix this error, simply declare a student to an empty object literal {}

My question is that why the output differ

The reason why the outputs differ is because document.write will convert the object at the current point in time to a string. In console.log, grabbing subproperties of objects is done at the time you expand the arrow in console.log. If you cloned the objects or used JSON.stringify after each assignment and then console.logged them, then the output of console.log will be as expected.

var students = [];
var student = {};
var scores = [];
var final = [];

function setStudent(name, score) {
  //student = {"Name": name, "Score": score};
  // ERROR HERE
  // you're not declaring the variable `student` therefore, the variable `student` is defined on the global object `window`. When you run this method, you're using the same pointer every time and thus changing the pointer and readding it to the array.
  var student = {}; // this is the fix
  student.Name = name;
  student.Score = score;
  document.write(student.Name + " scored " + student.Score + ".<br>");
  final.push(student);
  return student;

}


for (var i = 0; i < 4; i++) {
  students.push(prompt("Please Enter student name"));
}

for (var i = 0; i < 4; i++) {
  scores.push(prompt("Please Enter " + students[i] + "'s score"))
}
for (var i = 0; i < 4; i++) {
  setStudent(students[i], scores[i]);

}

console.log(final);

Thank you ! So my mistake was misunderstanding the scope of the variable. — alanx0401, May 30 '17 at 10:47

Javascript objects in array of objects,are different using console.log

1 Answers1