Help: Pushing new objects into an array in JavaScript

Objects behave a bit differently from most other datatypes in JavaScript. When you assign an object to a variable or add it to an array or anything like that. JavaScript does not make a copy of the object, it makes the new variable (or array item) contain the exact same object you assigned.

To illustrate this take a look at this code:

var example = {
  message: "Hello"
};

var example2 = example;

example.message = "world";

console.log(example2);

We create an object example then we create a new variable example2 and assign example to it. Then we change the message property of example and then we print out example2. Now what do you think will be printed out?

If Objects worked like Strings and Numbers then you would expect { message: 'Hello' } to be printed out. Since that is what example contained when it was assigned to example2. But in reality the above code prints out { message: 'world' }.

This is because these two variables don't hold independent copies of the object, they hold the exact same object. Which means that even though there are two variables at play there is actually only one object created in the above code. You just have two variables pointing at it.

With that knowledge if you take a look at your code the behavior you experience should make a bit more sense. You create one object at the start of your code, then you assign it the details of one student. Then you add a pointer to that object to the array. Then you change that same object with details of a new student. Since you in reality only have one object you end up changing the values of that one object each time the loop runs. And adding that object to the array multiple times just creates multiple pointers to it.

The solution to this issue is quite simple. Just create the object within the loop. Like this:

alert ("Hello");

var students = [];
var tempNewStudentStorage;
var finished;
var questions = [
    "What is the student's name?",
    "What Track(s) are they on?",
    "What achivement(s) have they gotten?",
    "What are their points?",
    ];

while (true) {
    var newStudent = {
        Name: "x",
        Track: "y",
        Achivement: 0,
        Points: 0,
    };
    for (var i = 0; i < 4; i +=1) {
        tempNewStudentStorage = prompt(questions[i]);
        if (i === 0){
            newStudent.Name = tempNewStudentStorage;
        }
        else if (i === 1){
            newStudent.Track = tempNewStudentStorage;
        }
        else if (i === 2){
            newStudent.Achievemnt = tempNewStudentStorage;
        }
        else if (i === 3){
            newStudent.Points = tempNewStudentStorage;
        };
    };

    students.push(newStudent);
    finished = prompt("Are you done adding students? Y/N").toLowerCase();

    while (finished.length > 1) {
        finished = prompt("Are you done adding students? Y/N").toLowerCase()
    };
    if (finished === "y") {
        alert("Thank you for adding a new student!")
        break
    }
    else if (finished !== "y"){
        continue;
    };
}; 

console.log(students);

That way you actually create a new object each time the loop runs, instead of reusing the object created at the start of the script.

It's worth noting that Arrays and Functions also behave in the same way as I described above.