Passing Parameters by Value or by Reference

JavaScript Tutorials - Herong's Tutorial Examples

∟Passing Parameters by Value or by Reference

This section provides a tutorial example showing that primitive parameters are passed by value and object parameters are passed by reference.

As I mentioned in a previous section, JavaScript documentation says that primitive parameters are passed by value and object parameters are passed by reference. I want to test these rules using the following JavaScript tutorial example:

<html>
<!-- Swap_Values_and_Arrays.html
   Copyright (c) 2008 HerongYang.com. All Rights Reserved.
-->
<head><title>Swap Values and Arrays</title></head>
<body>
<pre>
<script type="text/javascript">
// Defining a function to swap values
function swap_values(left, right) {
   var temp;
   temp = left;
   left = right;
   right = temp;
}

// Defining a function to swap arrays
function swap_arrays(left, right) {
   var temp;
   for (var i=0; i<left.length; i++) {
      temp = left[i];
      left[i] = right[i];
      right[i] = temp;
   }
}

   var first = "Black";
   var second = "White";
   document.write("\nTest 1: Swapping two string variables\n");
   document.write("   Before call: "+first+" | "+second+"\n");
   swap_values(first,second);
   document.write("   After call: "+first+" | "+second+"\n");

   var colors = new Array("Red", "Green", "Blue", "Yellow");
   var animals = new Array("Dog", "Cat", "Fish", "Bird");
   document.write("\nTest 2: Swapping two array objects\n");
   document.write("   Before call: "+colors+"\n");
   swap_arrays(colors,animals);
   document.write("   After call: "+colors+"\n");
</script>
</pre>
</body>
</html>

Here is the output of this tutorial example:

Test 1: Swapping two string variables
   Before call: Black | White
   After call: Black | White

Test 2: Swapping two array objects
   Before call: Red,Green,Blue,Yellow
   After call: Dog,Cat,Fish,Bird

The output shows no surprises. When statement "swap_values(first,second);" is executed, Copies of values stored in "first" and "second" are passed into the swap_values() function. The swap operation inside swap_values() is performed on copied values. Not on original values in "first" and "second". This is why "first" still contains "Blank" after the function call.

When statement "swap_arrays(colors,animals);" is executed, References to arrays stored in "colors" and "animals" are passed into the swap_arrays() function. The swap operation inside swap_arrays() is performed on original arrays. This is why the "colors" array contains animals now.