FAQ: Objects - Pass By Reference

The explanation object -pass by reference concept is confusing .
In the codecademy code example i added a line and am getting ‘Earth’ inside the function but the object in function reassignment fails as stated. So codecademy explanation does not make sense:" When we passed spaceship into that function, obj became a reference to the memory location of the spaceship object, but not to the spaceship variable. This is because the obj parameter of the tryReassignment() function is a variable in its own right. The body of tryReassignment() has no knowledge of the spaceship variable at all!" what now???

If the " The body of tryReassignment() has no knowledge of the spaceship variable at all!" then how come my obj.homePlanet returns Earth? And after reassignment returns Undefined.
please clarify
Thanks

let tryReassignment = obj => {
console.log(obj.homePlanet); // Earth <— I added this Line

obj = {
identified : false,
‘transport type’ : ‘flying’
}
console.log(obj.homePlanet); // Prints : Undefined <------ i added this
console.log(obj) // Prints {‘identified’: false, ‘transport type’: ‘flying’}

};
tryReassignment(spaceship) // The attempt at reassignment does not work.
spaceship // Still returns {homePlanet : ‘Earth’, color : ‘red’};

spaceship = {
identified : false,
‘transport type’: ‘flying’
}; // Regular reassignment still works.

To Force it to work as I want it to I added return obj and then assigned returned object to spaceship and following works!!! (but the previous confusion still needs clarification):
let spaceship = {
homePlanet : ‘Earth’,
color : ‘red’
};

let tryReassignment = obj => {
obj = {
identified : false,
‘transport type’ : ‘flying’
}
console.log(obj) // Prints {‘identified’: false, ‘transport type’: ‘flying’}
return obj; //<---- I added this line

};
spaceship = tryReassignment(spaceship) // WORKS!!! { identified: false, ‘transport type’: ‘flying’ } <---- I added this line
console.log(spaceship) // Prints { identified: false, ‘transport type’: ‘flying’ }

spaceship = {
identified : false,
‘transport type’: ‘flying’
}; // Regular reassignment still works.
console.log(spaceship) // Prints {‘identified’: false, ‘transport type’: ‘flying’}

To preserve code formatting in forum posts, see: [How to] Format code in posts
Your code:

let spaceship = {
  homePlanet : 'Earth',
  color : 'red'
};

let tryReassignment = obj => {
  console.log(obj.homePlanet); // Earth <— I added this Line
  obj = {
    identified : false, 
    'transport type' : 'flying'
  }
  console.log(obj.homePlanet); // Prints : Undefined <------ i added this
  console.log(obj) // Prints {'identified': false, 'transport type': 'flying'}
 
};
tryReassignment(spaceship) // The attempt at reassignment does not work.
spaceship // Still returns {homePlanet : 'Earth', color : 'red'};
 
spaceship = {
  identified : false, 
  'transport type': 'flying'
}; // Regular reassignment still works.

You can right click, open the images in new tabs and zoom for better readability,



Once you make the function call tryReassignment(spaceship), the memory location of the object assigned to the variable spaceship will be assigned to the parameter obj. The parameter obj will hold the memory location of the object, it will have no knowledge that the same object is also assigned to the variable spaceship.

console.log(obj.homePlanet); // Earth

The object that obj points to has a property named homePlanet with a value of "Earth", so this value is printed.
You then assign a new object (not mutating/modifying existing object) and assign it to obj. This new object has identified and 'transport type' as properties, but doesn’t have any property named homePlanet, therefore

console.log(obj.homePlanet); // undefined

will print undefined.

1 Like

Thank you for the clarification.appreciate it!

1 Like

Thanks for the hint. The Medium article made it click for me.

Hi all, I’m on the section of Pass By Reference JavaScript,
Write a function greenEnergy() that has an object as a parameter and sets that object’s 'Fuel Type' property to 'avocado oil'
the anwner is : let greenEnergy = obj => {
obj[‘Fuel Type’] = ‘avocado oil’;

however, my own code is :
let greenEnergy = obj =>{
obj = {
‘Fuel Type’: ‘avocado oil’
}
}

what is the difference?

This is a, ‘Whoa! moment.’ Take a closer look at what your code is doing. It’s obliterating the input by reassigning the parameter value.

thank you for your reply, to confirm, an object cannot be inside of another object?

and why the below code works(it is an example from the codecademy course):

let tryReassignment = obj => {
obj = {
identified : false,
‘transport type’ : ‘flying’
}
console.log(obj)

Not inside another object, but it can be the value of an object property:

obj = {
    innerobj: {

    }
}

Looking at your other question, now. Not sure what the objective of the lesson is, but using your example,

 > let tryReassignment = obj => {
     obj = {
       identified: false,
       'transport type': 'flying'
     }
     console.log(obj)
   }
<- undefined
 > a = { one: 1 }
<- {one: 1}
 > tryReassignment(a)
   {identified: false, transport type: 'flying'}
<- undefined
 > a
   {one: 1}
 >

Note that a does not get reassigned. This is because the parameter has been reassigned so there is no binding to a. It makes no sense to take an object as parameter and then reassign the variable. Again, I’m not sure what the aim of the exercise is.

thank you! I get it now, it cannot be reassigned inside another object. the example given was to illustrate it doesn’t work. it now makes more sense.
btw, the lecture was trying to teach object pass by reference

1 Like


Why are curly braces needed in line 8 but not line 11? Is it that they are mandatory if there is a string even in a single line

In this particular piece of code, the presence or absence of curly braces does make a difference but the functions accomplish their task in either case. You could have written both functions with curly braces or both functions without curly braces. If you wished, you could have written the second function with curly braces as well. Similarly, you could have omitted the curly braces from the first function if so inclined.

The presence or absence of curly braces does make a difference to the return values.

  • If curly braces are used for the body of an arrow function and we wish to return some value, then we must do so explicitly by using the return keyword.
  • If curly braces are not used for the body of an arrow function, then the value will be implicitly returned (and we aren’t allowed to use the return keyword).

The greenEnergy and remotelyDisable functions are meant to set/re-assign the values of certain properties of an object i.e. the functions are meant to mutate/modify the object. The return values of the functions (in this particular exercise) are not important. If the specifications required the functions to return some values as well, then the absence/presence of curly braces would be an important detail.

In your screenshot, curly braces have been used for the greenEnergy function. Since no return keyword has been used in the body of the function, so there is no explicit return. Instead, the function’s return value will be undefined. If the return keyword had been used, then the return value of the function would be the string "avocado oil".
No curly braces have been used for the body of the remotelyDisable function. After the assignment, the expression obj.disabled = true; evaluates to true and so the boolean true is implicitly returned by the arrow function.

let spaceship = {
  'Fuel Type' : 'Turbo Fuel',
  homePlanet : 'Earth'
};

// Your functions from screenshot here
// ...

console.log(greenEnergy(spaceship));
// undefined

console.log(remotelyDisable(spaceship));
// true

console.log(spaceship);
// { 'Fuel Type': 'avocado oil', homePlanet: 'Earth', disabled: true }

If the return values of the functions are important, then the absence/presence of curly braces makes a difference. In the exercise, the two functions are meant to mutate/modify the object and the return values aren’t important, so you can choose to omit or include the curly braces as you deem suitable.

1 Like

Thank you so much, I see why you’re a Gold Problem Solver. Incidentally earlier today I realized I don’t really get the difference between using/not using return. I thought it had to do with wanting to achieve what console.log does but not print it, or concise syntax. Turns out also return is not used when we are setting a value. In my head the mnemonic is if I see a = it’s probably not a case where return is needed. So thank you, you explicitly confirmed it. I guess my issue was that the solution wasn’t accepting my ‘curly braces in both’. But good to know it’s actually correct.