Array push behavior

Question

Although I have some basic JavaScript background, I stumbled upon this code that I wrote:

var data=[{"_id":"57b3e7ec9b209674f1459f36","fName":"Tom","lName":"Moody","email":"[email protected]","age":30},{"_id":"57b3e8079b209674f1459f37","fName":"Pat","lName":"Smith","email":"[email protected]","age":32},{"_id":"57b3e8209b209674f1459f38","fName":"Sam","lName":"Dawn","email":"[email protected]","age":28},{"_id":"57b3e8219b209674f1459f39","fName":"Sam","lName":"Dawn","email":"[email protected]","age":28}]
var tempArr=[];
var table=[];
var dataArr = Object.keys(data).map(function(k) { return data[k] });
dataArr.forEach(function(user) {
 tempArr[0]=user.fName;
 tempArr[1]=user.lName;
 tempArr[2]=user.email;
 tempArr[3]=user.age;
 table.push(tempArr);
 console.log('table'+JSON.stringify(table));
 });

In the final loop, I expected table to contain the arrays for Tom, Pat, and Sam . Instead, this is what I got:

table[["Tom","Moody","[email protected]",30]]
table[["Pat","Smith","[email protected]",32],["Pat","Smith","[email protected]",32]]
table[["Sam","Dawn","[email protected]",28],["Sam","Dawn","[email protected]",28],["Sam","Dawn","[email protected]",28]]
table[["Sam","Dawn","[email protected]",28],["Sam","Dawn","[email protected]",28],["Sam","Dawn","[email protected]",28],["Sam","Dawn","[email protected]",28]]

Why is push() replacing the previous entry in table? Any help will be highly appreciated.

• nolan: tempArr never changes so you keep pushing the same reference onto the table. Make tempArr local to the inner function in the forEach call.

Answer 1

The others already pointed out problems in your code.

However, you also make things more complicated than necessary. You can just do this:

var data=[{"_id":"57b3e7ec9b209674f1459f36","fName":"Tom","lName":"Moody","email":"[email protected]","age":30},{"_id":"57b3e8079b209674f1459f37","fName":"Pat","lName":"Smith","email":"[email protected]","age":32},{"_id":"57b3e8209b209674f1459f38","fName":"Sam","lName":"Dawn","email":"[email protected]","age":28},{"_id":"57b3e8219b209674f1459f39","fName":"Sam","lName":"Dawn","email":"[email protected]","age":28}];
var table = data.map(function(user) {
 return [
 user.fName,
 user.lName,
 user.email,
 user.age,
 ];
});
 
console.log(table);

Or if you use ES6:

var table = data.map(user => [ user.fName, user.lName, user.email, user.age ];

Answer 2

You don't need to write all the boilerplate code by hand. Use a proper array iterator (map in your case).

var table = data.map(function(user) {
 return [user.fName, user.lName, user.email, user.age];
});

Answer 3

Obviously map isthe way to go for the sake of functional approach however if you like imperative styles one simplistic way could be using for of loop as follows.

var data = [{"_id":"57b3e7ec9b209674f1459f36","fName":"Tom","lName":"Moody","email":"[email protected]","age":30},{"_id":"57b3e8079b209674f1459f37","fName":"Pat","lName":"Smith","email":"[email protected]","age":32},{"_id":"57b3e8209b209674f1459f38","fName":"Sam","lName":"Dawn","email":"[email protected]","age":28},{"_id":"57b3e8219b209674f1459f39","fName":"Sam","lName":"Dawn","email":"[email protected]","age":28}],
 table = [];
for (var user of data) table.push([user.fName,user.lName,user.email,user.age]);
console.log(table);

Answer 4

Problem here is not with push. Variable in javascript store reference to array. And in table you are pushing reference to same array tempArr. You need to create new array before pushing it or create deep copy of array before pushing it.

Example

var data=[{"_id":"57b3e7ec9b209674f1459f36","fName":"Tom","lName":"Moody","email":"[email protected]","age":30},{"_id":"57b3e8079b209674f1459f37","fName":"Pat","lName":"Smith","email":"[email protected]","age":32},{"_id":"57b3e8209b209674f1459f38","fName":"Sam","lName":"Dawn","email":"[email protected]","age":28},{"_id":"57b3e8219b209674f1459f39","fName":"Sam","lName":"Dawn","email":"[email protected]","age":28}]
var table=[];
var dataArr = Object.keys(data).map(function(k) { return data[k] });
dataArr.forEach(function(user) {
 var tempArr=[];
 tempArr[0]=user.fName;
 tempArr[1]=user.lName;
 tempArr[2]=user.email;
 tempArr[3]=user.age;
 table.push(tempArr);
 console.log('table'+JSON.stringify(table));
 });

Answer 5

Well, unlike a lot of other languages, JavaScript has passes everything by reference. That means that when you table.push(tempArr);, you're not actually pushing the values of tempArr, you're pushing a reference to tempArr. So, if you do this:

var a = 'a';

var table = [];
table.push(a);
a = 'b';
console.log(table[0]);

You'll get b as your output. What you want to do is define a new variable to push, like this

var data=[{"_id":"57b3e7ec9b209674f1459f36","fName":"Tom","lName":"Moody","email":"[email protected]","age":30},{"_id":"57b3e8079b209674f1459f37","fName":"Pat","lName":"Smith","email":"[email protected]","age":32},{"_id":"57b3e8209b209674f1459f38","fName":"Sam","lName":"Dawn","email":"[email protected]","age":28},{"_id":"57b3e8219b209674f1459f39","fName":"Sam","lName":"Dawn","email":"[email protected]","age":28}]
var table=[];
var dataArr = Object.keys(data).map(function(k) { return data[k] });
dataArr.forEach(function(user) {
 var tempArr=[];
 tempArr[0]=user.fName;
 tempArr[1]=user.lName;
 tempArr[2]=user.email;
 tempArr[3]=user.age;
 table.push(tempArr);
 });
 console.log('table'+JSON.stringify(table));

Answer 6

var data = [{"_id": "57b3e7ec9b209674f1459f36","fName": "Tom","lName": "Moody","email": "[email protected]","age": 30}, {"_id": "57b3e8079b209674f1459f37","fName": "Pat","lName": "Smith","email": "[email protected]","age": 32}, {"_id": "57b3e8209b209674f1459f38","fName": "Sam","lName": "Dawn","email": "[email protected]","age": 28}, {"_id": "57b3e8219b209674f1459f39","fName": "Sam","lName": "Dawn","email": "[email protected]","age": 28}],
 table = [];
data.forEach(function(user) {
 table.push([user.fName, user.lName, user.email, user.age]);
});
console.log(table);