big_water big_water - 8 days ago 6
AngularJS Question

Javascript assign array elements by reference or by value

Is there a way to explicity set array elements by reference instead of by value?

For example, this method sets the array elements by value:

METHOD 1

var pushes = [2,1]
for(var i=0; i<pushes.length; i++)
{
vm.allEmployeesOnJob[i] = vm.allEmployees[pushes[i]];
}


And this method sets the array elements by reference:

METHOD 2

var pushes = [2,1]
vm.allEmployeesOnJob = [
vm.allEmployees[2],
vm.allEmployees[1]
];


My use case:

I am using angular-bootstrap-duallistbox and in order to initialize the two listboxes correctly, the "ng-model" array must reference the "ng-options" array elements by reference. This is due to the behavior of the "select" DOM element from explanations I have read. The reason I know that the second is setting by reference is because the listbox updates properly using that method and it does not update properly using the first method.

What could the difference be?

And is there a way to programmatically set array elements to another array's elements explicitly by reference?

EDIT:

vm.allEmployees is an array of employee objects.

Content of vm.allEmployees:

[ {
"employeeId":1,
"firstName":"Bill",
"lastName":"Test",
"email":null,
"phoneNumber":null,
"street":"1234 Sesame",
"city":"New York City",
"state":"New York",
"zip":"34555",
"activeFlag":true,
"homeLocationId":2,
"homeLocation":{
"locationId":2,
"customerId":2,
},
"displayName":"Bill Test - Newaygo" },
{
"employeeId":2,
"firstName":"Bob",
"lastName":"Test",
"email":null,
"phoneNumber":null,
"street":"1234 Sesame",
"city":"New York City",
"state":"New York",
"zip":"34555",
"activeFlag":true,
"homeLocationId":2,
"homeLocation":{
"locationId":2,
"customerId":2,
},
"displayName":"Bob Test - Newaygo" },
{
"employeeId":4,
"firstName":"John",
"lastName":"Doe",
"email":"testemployee@qas.com",
"street":"1234 Sesame St",
"city":"New York City",
"state":"New York",
"zip":"34555",
"activeFlag":true,
"homeLocationId":2,
"homeLocation":{
"locationId":2,
"customerId":2,
},
"displayName":"John Doe - Newaygo" },
{
"employeeId":5,
"firstName":"Bill",
"lastName":"Peterson",
"email":"bpeterson@test.com",
"street":"1234 test",
"city":"test city",
"state":"Maine",
"zip":"298379283",
"activeFlag":false,
"homeLocationId":2,
"homeLocation":{
"locationId":2,
"customerId":2,
},
"displayName":"Bill Peterson - Newaygo" },
{
"employeeId":6,
"firstName":"Jim",
"lastName":"Super",
"email":"jsuper@qas.com",
"phoneNumber":"459-456-4455",
"street":"1234 Sesame St",
"city":"New York City",
"state":"New York",
"zip":"34555",
"activeFlag":true,
"homeLocationId":2,
"homeLocation":{
"locationId":2,
"customerId":2,
},
"displayName":"Jim Super - Newaygo" } ]

Answer

In JavaScript objects are referenced by reference and all other values (regardless of whether they are in an array or not) are referenced by value. You can store your value(s) in an object and refer/pass that if you need to get this behavior.

Both of your methods below are working with objects and have By Reference references. These two snippets verify that:

METHOD 1

var vm = {};

// Here, the contents of the array are ojbects (by reference)
vm.allEmployees = [      {  
      "employeeId":1,
      "firstName":"Bill",
      "lastName":"Test",
      "email":null,
      "phoneNumber":null,
      "street":"1234 Sesame",
      "city":"New York City",
      "state":"New York",
      "zip":"34555",
      "activeFlag":true,
      "homeLocationId":2,
      "homeLocation":{  
         "locationId":2,
         "customerId":2,
      },
      "displayName":"Bill Test - Newaygo"    },    
 {  
      "employeeId":2,
      "firstName":"Bob",
      "lastName":"Test",
      "email":null,
      "phoneNumber":null,
      "street":"1234 Sesame",
      "city":"New York City",
      "state":"New York",
      "zip":"34555",
      "activeFlag":true,
      "homeLocationId":2,
      "homeLocation":{  
         "locationId":2,
         "customerId":2,
      },
      "displayName":"Bob Test -  Newaygo"    },    
 {  
      "employeeId":4,
      "firstName":"John",
      "lastName":"Doe",
      "email":"testemployee@qas.com",
      "street":"1234 Sesame St",
      "city":"New York City",
      "state":"New York",
      "zip":"34555",
      "activeFlag":true,
      "homeLocationId":2,
      "homeLocation":{  
         "locationId":2,
         "customerId":2,
      },
      "displayName":"John Doe -  Newaygo"    },    
 {  
      "employeeId":5,
      "firstName":"Bill",
      "lastName":"Peterson",
      "email":"bpeterson@test.com",
      "street":"1234 test",
      "city":"test city",
      "state":"Maine",
      "zip":"298379283",
      "activeFlag":false,
      "homeLocationId":2,
      "homeLocation":{  
         "locationId":2,
         "customerId":2,
      },
      "displayName":"Bill Peterson -  Newaygo"    },    
 {  
      "employeeId":6,
      "firstName":"Jim",
      "lastName":"Super",
      "email":"jsuper@qas.com",
      "phoneNumber":"459-456-4455",
      "street":"1234 Sesame St",
      "city":"New York City",
      "state":"New York",
      "zip":"34555",
      "activeFlag":true,
      "homeLocationId":2,
      "homeLocation":{  
         "locationId":2,
         "customerId":2,
      },
      "displayName":"Jim Super -  Newaygo"    } ]

vm.allEmployeesOnJob = [];

var pushes = [2,1]
for(var i=0; i<pushes.length; i++) {
   vm.allEmployeesOnJob[i] = vm.allEmployees[pushes[i]];                  
}

// The references are by reference:
console.log("Are objects in allEmployeesOnJob the same references as allEmployees: " + (vm.allEmployeesOnJob[0] === vm.allEmployees[2] && vm.allEmployeesOnJob[1] === vm.allEmployees[1]));

// More evidence:
vm.allEmployees[2].employeeId= 999;
console.log("allEmployees[2].employeeId= 999. allEmployeesOnJob[0].employeeId is now: " + vm.allEmployeesOnJob[0].employeeId);

METHOD 2

var vm = {};
vm.allEmployees = [
  {  
      "employeeId":1,
      "firstName":"Bill",
      "lastName":"Test",
      "email":null,
      "phoneNumber":null,
      "street":"1234 Sesame",
      "city":"New York City",
      "state":"New York",
      "zip":"34555",
      "activeFlag":true,
      "homeLocationId":2,
      "homeLocation":{  
         "locationId":2,
         "customerId":2,
      },
      "displayName":"Bill Test - Newaygo"    },    
 {  
      "employeeId":2,
      "firstName":"Bob",
      "lastName":"Test",
      "email":null,
      "phoneNumber":null,
      "street":"1234 Sesame",
      "city":"New York City",
      "state":"New York",
      "zip":"34555",
      "activeFlag":true,
      "homeLocationId":2,
      "homeLocation":{  
         "locationId":2,
         "customerId":2,
      },
      "displayName":"Bob Test -  Newaygo"    },    
 {  
      "employeeId":4,
      "firstName":"John",
      "lastName":"Doe",
      "email":"testemployee@qas.com",
      "street":"1234 Sesame St",
      "city":"New York City",
      "state":"New York",
      "zip":"34555",
      "activeFlag":true,
      "homeLocationId":2,
      "homeLocation":{  
         "locationId":2,
         "customerId":2,
      },
      "displayName":"John Doe -  Newaygo"    },    
 {  
      "employeeId":5,
      "firstName":"Bill",
      "lastName":"Peterson",
      "email":"bpeterson@test.com",
      "street":"1234 test",
      "city":"test city",
      "state":"Maine",
      "zip":"298379283",
      "activeFlag":false,
      "homeLocationId":2,
      "homeLocation":{  
         "locationId":2,
         "customerId":2,
      },
      "displayName":"Bill Peterson -  Newaygo"    },    
 {  
      "employeeId":6,
      "firstName":"Jim",
      "lastName":"Super",
      "email":"jsuper@qas.com",
      "phoneNumber":"459-456-4455",
      "street":"1234 Sesame St",
      "city":"New York City",
      "state":"New York",
      "zip":"34555",
      "activeFlag":true,
      "homeLocationId":2,
      "homeLocation":{  
         "locationId":2,
         "customerId":2,
      },
      "displayName":"Jim Super -  Newaygo"    } ]

var pushes = [2,1]
vm.allEmployeesOnJob = [
                vm.allEmployees[2],
                vm.allEmployees[1]                
              ];

console.log("Are objects the same (by ref)? " + (vm.allEmployeesOnJob[0] === vm.allEmployees[2] && 
           vm.allEmployeesOnJob[1] === vm.allEmployees[1]));

// Further evidence:
vm.allEmployees[2].employeeId  = 999;
console.log("allEmployees[2].employeeId was changed to 999. What is allEmployeesOnJob[0] now? " + vm.allEmployeesOnJob[0].employeeId);