Home/ Questions/Q 1081459
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T22:10:17+00:00

My understanding: in Javascript objects and arrays get passed as references not values for

  • 0

My understanding: in Javascript objects and arrays get passed as references not values for function arguments. A jQuery group is an object and hence should be passed as reference.

However I’m finding in the test script below that something strange is going on; the jQuery group is behaving like a value not a reference unless wrapped in another object … can anyone explain this?

<html>
<head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<script>

 function test(arg){
   arg = arg.add($('<span/>'))
   console.log(arg);
 };

 ele = $('<div/>');
 test(ele);  // div + span in the group as expected
 console.log(ele); // only the div - the 'arg' param in function was a copy

 function test2(arg){
   arg.a = arg.a.add($('<span/>'));
   console.log(arg.a);
 };

 obj = {a:ele};
 test2(obj); // div + span in the group as expected
 console.log(obj.a); // both in the group - arg acted like a reference!

</script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is a “feature” of the .add() method. It does not modify the original jQuery object, but rather returns a new object with the added value.

    Given your first example, you would need to return the arg variable and overwrite ele.

     function test(arg){
   arg = arg.add($('<span/>'))
   console.log(arg);
   return arg;  // return the new jQuery object stored in "arg"
 };

 ele = $('<div/>');
 ele = test(ele);  // overwrite the original "ele" with the returned value
 console.log(ele);

    EDIT: To give another illustration, using your code, but with .push() which modifies the original object, you will see the correct value updated in ele.

     function test(arg){
   arg = arg.push($('<span/>')[0])
   console.log(arg);  // Because .push() is being used, "arg" will reference 
                      //   the new length of the array.
 };

 ele = $('<div/>');
 test(ele);  
 console.log(ele); // Will reference jQuery object with both elements

    EDIT: Once last illustration. Because .add() returns a new object, you could update both variables to point to the same value like this:

    ele = arg = arg.add($('<span/>'));

    Now instead of ele referencing the original, and arg referencing the new Object that was created, both variables hold a reference to the same Object in memory.

    • 0