Javascript assign array elements by reference or by value

Question

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":"[email protected]",
      "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":"[email protected]",
      "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":"[email protected]",
      "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"    } ]

This has little to do with JavaScript itself, but more to do with how AngularJS' ng-model watches its value. I suggest editing your question and title to more clearly indicate your use of AngularJS. You might also show how you're binding your ng-model and ng-options for both selects. — Heretic Monkey
– Heretic Monkey, Commented Nov 30, 2016 at 20:19
Good point about the angular part @MikeMcCaughan. However, the javascript part of the question was the big concern for my question. Scott's answer below answered that question so I think I might leave the Angular part of this question for another post if I can't get that working. — big_water
– big_water, Commented Nov 30, 2016 at 20:30

Scott Marcus · Accepted Answer · 2016-11-30 20:34:42Z

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":"[email protected]",
      "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":"[email protected]",
      "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":"[email protected]",
      "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":"[email protected]",
      "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":"[email protected]",
      "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":"[email protected]",
      "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].employeeId now? " + vm.allEmployeesOnJob[0].employeeId);

So since I'm referencing the elements in the vm.allEmployees array, which are objects, shouldn't method 1 above still set the elements in vm.allEmployeesOnJob by reference?
Can you post more code? Specifically, what the contents of vm.allEmployees is?
@big_water Both of your methods are By Ref because allEmployees stores objects. See my tests of both of your methods.
Thanks @ScottMarcus. Your tests do infact prove that both are by reference. It must be a problem with the angular-bootstrap-duallistbox and how it is handling these objects.

Collectives™ on Stack Overflow

Javascript assign array elements by reference or by value

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related