0

Consider these two lines of code:

>> Array(3)
  Array(3) [ <3 empty slots> ]
>> [...Array(3)]
  Array(3) [ undefined, undefined, undefined ]
  • What does the Array constructor return that makes it fundamentally different from the second result?
  • What does it mean for an array to have "empty slots"? Can that be achieved through "normal" means in JS?
  • What does it mean to spread an array of empty slots, and why does it change when converted back into an array this way?
scatter
  • 903
  • 7
  • 24
  • 1
    new Array(3) creates an array with 3 empty slots ... [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Array) – Jaromanda X Aug 08 '22 at 05:37

3 Answers3

1

Spreading is done to get the exact copy of the array, so that it's values won't be altered when writing long code and making many changes to the array like adding new element or removing the element. If we made many changes and we console it, we can see the changes in it, But when we use the spreading it wii not have any changes, it just displays the elements that are available when initialising. This is the main use of spreading. You can also add new element to the array like this: [...Array(3), "new element"].

Sojo C Johny
  • 126
  • 8
0

Javascript allows you to create sparse arrays. These contain runs of empty slots, which are treated differently than slots containing undefined. You can think of them like an object whose keys are only the filled slots' indices. The Array constructor creates a sparse array whose slots are all empty.

You can create sparse arrays in "normal" JS by simply not putting a value between the commas when creating an array.

Spreading a sparse array converts the empty slots into undefined values in some cases, such as spreading into an array. That's why you get an array of undefined values in the example. However, if you spread it into an object, the empty slots are ignored.

let sparseArray = ["a", ,"c"];
console.log(sparseArray);      // Array(3) [ "a", <1 empty slot>, "c" ]
console.log([...sparseArray]); // Array(3) [ "a", undefined, "c" ]
console.log({...sparseArray}); // Object { 0: "a", 2: "c" }
console.log({...Array(3)});    // Object {  }
scatter
  • 903
  • 7
  • 24
0

Spreading an array creates a clone (clones the value types and the pointers to reference types)

In the case of value types it will clone and any changes that happen to the original will not affect the clone.

In the case of reference types changes to any of the reference types will affect both the original and the clone:

Run the snippet below to see the results

var stringThing = ['one', 'two']
var stringThing2 = [...stringThing]
stringThing[0] = 'updated-one'

console.log(stringThing)
console.log(stringThing2) // Notice how the "cloned" array was not mutated

var objThing = [{
  one: 1
}, {
  two: 2
}]
var objThing2 = [...objThing]
objThing[0].one = 100

console.log(objThing)
console.log(objThing2) // Notice how the "cloned" array is also mutated, the object ref was updated (which both arrays are referencing)
sneaky squid
  • 128
  • 7