7

As you know, we use destructuring to use the values in objects with ES6. I wonder about its depth.

When I write the code below:

let (or const) { firstVar, secondVar } = this.props

does it allocate new space in memory or does it use these values like pointers?

In the past, when I wrote 

let { options } = this.props
options.splice(0,20)

I noticed that the variable in props had changed although my compiler had errors like 'props are Readonly' on different cases. How could it be possible?

EmreG
  • 135
  • 2
  • 7
  • 5
    Using terms like "allocated" or "pointers" in Javascript really makes no sense. For primitive types, the value is copied into the variable, for object types the reference is copied. However, it also depends on the way `props` are implemented. – Sulthan Sep 20 '17 at 13:30

2 Answers2

7

let and const declare new variables, yes. They are independent from the object property after the assignment/initialisation.

when I wrote let { options } = this.props; options.splice(0,20) I noticed that the variable in props had changed

Yes, that's because your options are an array, and both the variable and the object property point to the very same mutable array instance. Assignment did not copy its contents.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • ok so what would be the proper way to do this to break the link? – Jarg7 Jul 19 '18 at 22:11
  • @Bergi What do you mean by "Yes, that's because your options are an array, ......" They are array and that's why the question is. Can we use destructuing for reference types? When I use this.state.options.slice(), I get ESLint error to use desctructing. [] – A dev Sep 18 '18 at 10:27
4

There is a conflation here between destructuring and splice.

Destructuring will bind a variable to the value contained within the object it is destructuring from.

In your second example, options will be a key on the this.props object; when you print options out, then the original this.props.options object will be used.

So it's a reference; in the way you phrased it, it's a variable that points to another variable.

However, you are also using splice which is a in-place/destructive operation that has side-effects.

slice will return a new array, splice will modify the existing array.

If you want to leave this.props.options alone, you will need to use slice:

let { options } = this.props
options.slice(0, 20) // does not modify the existing array, returns a new array

options.splice(0,20) // modifies the existing array, returns the array of deleted items;
  • I tried the code below just now, I have foo = 'dummyString' ; in props and I used destructuring in the child component like that; let { foo } = this.props; foo += foo + ' 1addingDummyString'; console.log(this.props.foo); but this time, foo didnt change. Its output: 'dummyString' while I was expecting 'dummyString 1addingDummyString' . Why ? Does It return new string variable ? – EmreG Sep 20 '17 at 14:18
  • As I understood destructuring goes only one level in depth. A string is basically copied, an array is not... – dimisus Sep 21 '19 at 21:39