Array to Object: declaring object inside vs outside for loop. Different results

When you declare person at the global scope in the first example, you are defining an object visible to all the code in your script. Your loops basically just end up changing one property of this one variable with each iteration of the inner loop. It's the same variable every time, just with different values assigned -- and every item in the array employees points to this one object.

In the second example, the var person is declared within the for block -- and it does not exist outside this block. Moreover, the var is redeclared as a new, distinct variable for each iteration of the loop in which it is declared.

Javascript is smart enough in the second case to persist the object assigned to the person variable even after person itself is garbage-collected.

These are basic concepts in Javascript scope. You'll probably find some informative discussion of Javascript scope in the MDN article on var.

EDIT: additional info about stuff I'd overlooked:

You also need to be careful about where you declere person and what you are assigning in your loop. If you declare person in your innermost loop, it gets repeatedly destroyed and then instantiated again, retaining only one property at a time:

when j=0, it creates person={firstname:"Mary"}, this gets assigned to employees[i] and then gets destroyed

when j=1, it creates person={lastname:"Jenkins}, this gets assigned to employees[i] and then gets destroyed

when j=2, it creates person={age:36}, this gets assigned to employees[i] and then gets destroyed

when j=3, it creates person={role:"manager"}, this gets assigned to employees[i] and then gets destroyed

Then it exits the inner loop, with employees[i] retaining that last assignment.

In JavaScript, a variable name refers to a location in a memory environment holding a value.

In the first version, the person variable only references one location the entire time, and as a result can only hold one value. As a result, upon multiple iterations, it's properties are overwritten and only the last value remains. This means all references to this location (i.e. employees[i] = person;) end up with the last value.

In the second version, the person variable references a different location each iteration because it is assigned a new memory location using var person = {}; in the for loop. As a result, each reference to the person location in the same loop (i.e. employees[i] = person;) end up with that loop's value.

Because person is declared as a global, and you just overwrite its properties.

You could reassign a new object, but what would be the point? Just declare at the proper place.

var eData = [
  [
    ['firstName', 'Joe'],
    ['lastName', 'Blow'],
    ['age', 42],
    ['role', 'clerk']
  ],
  [
    ['firstName', 'Mary'],
    ['lastName', 'Jenkins'],
    ['age', 36],
    ['role', 'manager']
  ]
];
function transformEmployeeData(employeeData){
  var employees = [];
  for(var i=0; i < employeeData.length; i++) {
    var person = {};
    for(var j=0; j < employeeData[i].length; j++){
      var key = employeeData[i][j][0];
      var value = employeeData[i][j][1];
      person[key] = value;
    }
    employees[i] = person;
  }
  return employees;
}
console.log(transformEmployeeData(eData));