Object.keys vs Object.value - .keys mutates and .value does not. Why is this?

Question

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?

Answer 1

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 eg 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.