ALAB 308H.5.3 - Pass by Value and Pass by Reference


Learning Objectives

This lab contains tasks to solidify your understanding of Pass by Value and Pass by Reference. By completion of this lab, you will be able to:

  • Create shallow copies of objects.
  • Create deep copies of objects.
  • Use pass by value to manipulate copies of data.
  • Use pass by reference to manipulate data in place.

 CodeSandbox

This lab uses CodeSandbox as one of its tools.

If you are unfamiliar with CodeSandbox, or need a refresher, please visit our reference page on CodeSandbox for instructions on:

  • Creating an Account
  • Making a Sandbox
  • Navigating your Sandbox
  • Submitting a link to your Sandbox to Canvas

Instructions

  1. Create a Vanilla CodeSandbox and name it "JavaScript Pass by Lab."
  2. Work with a partner to solve and code answers to each of the problem statements below in the index.js file.
  3. Despite discussing solutions together, you and your partner should each code your answers individually in your sandboxes for the purpose of practice.
  4. Submit the link to your CodeSandbox on Canvas when you are finished.

Use the following data during your tasks:

const personOne = {
    name: {
        first: 'Timmy',
        last: 'Timtim'
    },
    age: 30,
    location: {
        city: 'New York',
        state: 'New York',
        zip: 10001
    }
}

const personTwo = {
    name: {
        first: 'Julie',
        last: 'July'
    },
    age: 28,
    location: {
        city: 'Albany',
        state: 'New York',
        zip: 12201
    }
}

Tasks

  1. People move location frequently. Create a new function moveLocation().

    • moveLocation() should take one of our person objects as its first parameter and a location object as the second parameter.
    • The location object will have the properties city, state, and zip.
    • The function should change the city, state, and zip properties of the person to match those of the new location.
    • Test your function by using the following code. Does personTwo now live in Rochester? (They should.)
const nLoc = {
    city: 'Rochester',
    state: 'New York',
    zip: 14604
}

moveLocation(personTwo, nLoc);

nLoc.city = 'Buffalo';
nLoc.zip = 14201;

console.log(personTwo.location.city);

  1. Julie and Timmy have gotten married! Since they'll be living together, we should give them the same location. However, since they'll be living together forever, let's save ourselves the hassle of updating both of their locations every time they move.

    • Set Julie's location to Timmy's location by reference.
    • Test this new link by using the following code, which utilizes our already-completed moveLocation() function with no changes necessary. Do both people now live in California? (They both should.)
const nLoc = {
    city: 'Mountain View',
    state: 'California',
    zip: 94035
}

moveLocation(personOne, nLoc);

As you can see, sometimes linking objects by reference is useful. Now, whenever one person moves, the other follows.

  1. The happy couple are having a baby! Create a new object personThree.

    • Set personThree.name.first to whatever you'd like, and personThree.name.last to a hyphenated combination of personOne and personTwo's last names.
    • Give personThree an age of 0.
    • Set personThree's location to that of their parents, by reference so that the baby stays with its family.
    • Test your code's behavior by using your moveLocation() function.

  2. Years go by, and personThree is ready for a life of independance.

    • Increment everyone's age values by 20.
    • Create a copy of personThree's location that breaks the reference to the current location object, and set their location to that copy.
    • Test your code by having personThree moveLocation() somewhere of your choosing. Does this change the locations of personOne or personTwo? (It shouldn't.)

  3. Welcome to the future! We've invented both immortality and cloning.

    • Increment everyone's age values by 300.
    • Create a new function clonePerson() that accepts one of our person objects and returns a deep copy of them with age set to 0.
    • These are all independant clones, so each should be able to move to its own location. Test your code by creating several clones of our persons and using moveLocation() to send them elsewhere. Are these locations unaffected by each other? (They should be.)
    • Check the age values of your original persons to make sure you did not accidentally set them to 0!

  4. The hive mind has taken over... Create a new object called thoughts and give it some properties.

    • Set personOne.thoughts to your thoughts object by reference.
    • Do this for all of your persons and clones, such that changing the original thoughts object modifies the .thoughts property of every person.
    • Test your code by modifying everyone's thoughts with a single line of code. Pass by reference is powerful.

Thought Exercise

Obviously, our example above is silly and impractical. Take a couple of minutes to discuss with your partner ways that pass by reference might be useful (or dangerous) in a practical application. What are some examples of applications you have seen in the past that may have made use of pass by reference to simplify their processes? Remember that pass by reference also applies to arrays; what are the implications there for data processing algorithms?


Forward Thinking

Throughout the tasks in this lab, you have seen how working with objects that have identical properties can become repetitive, and creating functions to operate on those objects can be very useful, but only if you know the objects have certain properties.

In object-oriented programming, we often use a tool called Classes as a template for creating objects with certain properties and methods.

We will cover Classes in the next lesson. After you have become familiar with classes, return to this lab on your own time and ponder how you may have gone about these tasks differently with a Class-based approach.

Copyright © Per Scholas 2024