hanki.dev

JS spread syntax doesn't work for nested properties...

JS spread syntax copies only the first level properties, and passes reference to any nested properties. Here's an example:

const original = {
  value: 'value',
  nested: {
    value: 'nestedValue',
  },
};

console.log(original);
// Output: { value: 'value', nested: { value: 'nestedValue' } }

const copy = { ...original };

copy.value = 'modified';
copy.nested.value = 'modified';

console.log(original);
// Output: { value: 'value', nested: { value: 'modified' } }

console.log(copy);
// Output: { value: 'modified', nested: { value: 'modified' } }

As you can see, changing a nested value of our copy object also modifies the original object. I fixed this by using Lodash cloneDeep, but I'm sure there are other ways as well.

#javascript