Question:

If I pass a variable to a function, can that function change the value of that variable?

Answer:

That depends on whether the variable was passed by value, or passed by reference.

Question:

What is passing by value?

Answer:

Primitive data type variables, such as numbers and strings, are passed by value. That means, a separate place in memory is accessed by the function to arrange the 1s and 0s. The function does not access the place in memory that stores the original variable. Consider the following example:

    function f1(nbr)
    {
        nbr = 23;
        // display nbr
    }
    function f2()
    {
        var nbr = 12;
        f1(nbr);
        // display nbr
    }
    f2();

Inside f2, nbr has a value of 12, with its own place in memory. When nbr is passed to f1, nbr inside f1 has a separate place in memory, and assigns it a value of 23. So there are 2 places in memory, one for each function, so if f1 changes the value of nbr, the memory for nbr inside f2 is left alone, keeping its original value of 12.

If you write code to display the value of nbr in f1, it will display 23.
If you write code to display the value of nbr in f2 after calling f1, it will still display 12.

Recall that when you call a function, the variable name of the parameter in your function call does not have to match the variable name of the parameter for the function definition. It is just coincidental that both variable names are the same in the above example, so it is also OK if both variable names are the same, but they don't have to be.

Question:

What is passing by reference?

Answer:

Arrays and objects are passed by reference. That means there is only one place in memory for that object or array, and the function called has access to the place in memory for the original object or array. Consider the following example:

    function f3(nbrs)
    {
        nbrs[0] = 16;
        // display nbrs[0]
    }
    function f4()
    {
        var nbrs = [1, 2, 3];
        f3(nbrs);
        // display nbrs[0]
    }
    f4();

Because there is only one place in memory for nbrs, when f3 changes the value of nbrs[0], the value will also be changed for nbrs[0] in f4.

If you write code to display the value of nbrs[0] in f3, it will display 16.
If you write code to display the value of nbrs[0] in f4 after calling f3, it will also display 16.

Do you remember that functions can only execute one return statement, and that functions can only return one value? By passing arrays or objects, a function can effectively deliver more than one value. For example, you might declare an array in one function, then populate it in another function, giving each element the desired value.

Question:

If I pass only one element of an array, is that passed by value or reference?

Answer:

That depends if the element is a primitive data type or not. Once again primitive data type variables are passed by value, objects are passed by reference. Because a number is a primitive data type, the below example passes the variable by value, and so nbrs[0] after calling f5 will still have a value of 1.

    function f5(nbr)
    {
        nbr = 5;
        // display nbr
    }
    function f6()
    {
        var nbrs = [1, 2, 3];
        f5(nbrs[0]);
        // display nbrs[0]
    }
    f6();

Checkpoint

You should know 6.3

1. What it means to pass parameters by value or by reference
2. What causes parameters to be passed by value or by reference

Questions 6.3

1. How many places are there in memory for a variable passed to another function by value?
2. How many places are there in memory for a variable passed to another function by reference?
3. What kind (data type) of variables are passed by value?

Exercise 6.3

1. Copy and paste the above 3 examples
2. Follow the instructions for the web developer toolbox to display the variables

web developer toolbox 6.3

Add a link to the JavaScript menu

• Open menu_js.html in your favorite editor
• (Create a new dt tag to) add a category: Functions
• (Create a new a tag inside a new dd tag to) add a link: Passing variables
• href should be: javascript/functions_passing.html

Add a new JavaScript page

• In the javascript folder, open aaa_template.html in your favorite editor, and save-as: functions_passing.html
• Below the comment "edit category name", change text from template to Functions
• Below the comment "edit publish and update dates", change both dates to the current date

Update the new page

• Below the comment "edit company name, page title, and page description", change:
  • Company Name to: your name
  • Template to: Passing Variables
  • ...template to: Passing by value and by reference
• Update the comments section:
  • <dt>Passing variables</dt>
  • <dd>Primitive variables are passed by value, meaning the original variable is untouched by the function that is called because the called function creates a separate place in memory for that variable</dd>
  • <dd>Arrays and objects are passed by reference, meaning the original variable may be changed by the function that is called because the called function uses the same place in memory as the original variable</dd>
• Insert html inside the wxHtmlResults div:
  • <p id="p1"></p>
  • <p id="p2"></p>
  • <p id="p3"></p>
  • <p id="p4"></p>
  • <p id="p5"></p>
  • <p id="p6"></p>

Add JavaScript below the line of asterisks following the text:
** BEGIN DEVELOPER JAVASCRIPT SECTION

• Complete the instructions for Exercise 6.3
• Below the comment inside f1, assign the value of nbr to the innerHTML of p1
• Below the comment inside f2, assign the value of nbr to the innerHTML of p2
• Below the comment inside f3, assign the value of nbrs[0] to the innerHTML of p3
• Below the comment inside f4, assign the value of nbrs[0] to the innerHTML of p4
• Below the comment inside f5, assign the value of nbr to the innerHTML of p5
• Below the comment inside f6, assign the value of nbrs[0] to the innerHTML of p6

Open menu_js.html in your browser and click on your new link

Click on the Run javascript button to test your code