0

I am trying to change the values inside an object in Javascript, Object.values while running a forEach loop would seem to make the most sense to me but Object.keys (obj[key]) actually updated the value on the object. Here is my code to explain better.

This way below works as expected

const usersKey = { user1: 18273, user2: 92833, user3: 90315 }

Object.keys(usersKey).forEach((key) => {
    usersKey[key] = usersKey[key]*2
    
})

console.log(usersKey)

This way below does not update the object


const usersValue = { user1: 18273, user2: 92833, user3: 90315 }

Object.values(usersValue).forEach((value) => {
    value = value*2
    
})

console.log(usersValue)

Why is this? Shouldn't both ways produce identical results?

SamJ
  • 3
  • 1
  • 1
    in your first example you are updating the orginal object. in the second you only update the variable inside the function. – Sysix May 01 '22 at 21:59
  • primitive values are not passed by reference, so the `values` are just numbers with no reference to the original object. If the values were objects and you mutated them then values in the object would also reflect those changes. For discussion see: [Is JavaScript a pass-by-reference or pass-by-value language?](https://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language) – pilchard May 01 '22 at 22:03
  • A more accurate comparison would be if you mutated the `key` in your first example rather than using the key to access the object. `Object.keys(usersKey).forEach((key) => { key = key + 's' })` – pilchard May 01 '22 at 22:10

1 Answers1

0

This behavior has nothing to do with Object.keys() and Object.values() as such. They both return arrays with copies of keys/ values and do not mutate the object itself.

You're just accessing different values in your programs. In the first program you are actually mutating the object itself, in the second program you only change the value which is a copy of the actual value. As it is a primitive value the change of value is not reflected in the original value.

If you had e.g. an object as a value, then Object.values() would return a copy of the reference to that Object and therefore (as the reference points to the same data in memory) any change would also be reflected in the original array.

// now the values are not simple primitive types but an object
const usersValue = { user1: { id: 18273 } , user2: { id: 92833 }, user3: { id: 90315 } }

Object.values(usersValue).forEach((value) => {
    value.id = value.id*2    
})

// changes are now reflected in the object
console.log(usersValue)

See this thread for more information on pass-by-reference and pass-by-value.

Mushroomator
  • 6,516
  • 1
  • 10
  • 27
  • ok that makes sense, so it's only because I hard referenced the value by usersKey[key] inside the code base that is actually mutated the object. If I tried to mutate lets say the keys inside Object.keys(key)....key = key + 3, it wouldn't mutate. Thanks for clarifying! – SamJ May 01 '22 at 22:27
  • Yes, exactly :) – Mushroomator May 01 '22 at 22:28