Creating array with spread syntax

Question

Here is a JavaScript arrow function I found in a React book:

const createArray = (length) => [...Array(length)];

Why not simply return a new array?

const createArray = (length) => Array(length);

If I log the result of createArray(7) with either of the definitions, I get the same result:

(7) [undefined, undefined, undefined, undefined, undefined, undefined, undefined]

What does the first definition achieve as compared to the second one?

Array(5) => [empty x 5] vs. [...Array(5)] => [undefined, undefined, undefined, undefined, undefined]. The difference is initialisation. — Niet the Dark Absol
– Niet the Dark Absol, Commented Feb 6, 2021 at 14:26

CertainPerformance · Accepted Answer · 2021-02-06 14:30:05Z

4

Array(length); will create a sparse array - one with no own-properties (except length), which cannot be iterated over with the array iteration methods:

const arr = new Array(7);

console.log(arr.hasOwnProperty('4'));
arr.forEach(() => {
  console.log('iteration');
});

In contrast, utilizing spread syntax will populate the new array properly:

const arr = [...new Array(7)];

console.log(arr.hasOwnProperty('4'));
arr.forEach(() => {
  console.log('iteration');
});

answered Feb 6, 2021 at 14:30

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yousaf · Accepted Answer · 2021-02-06 14:29:59Z

3

Both ways of creating an array are different. They do not produce the same result.

Second way of creating an array will create a sparse array with only length own property and no index properties. You can see this using Object.getOwnPropertyNames()

const arr = new Array(5);
console.log(Object.getOwnPropertyNames(arr));

Using the spread syntax will create an array will index properties as shown in the following code example:

const arr = [...new Array(5)];
console.log(Object.getOwnPropertyNames(arr));

answered Feb 6, 2021 at 14:29

Yousaf

29.5k6 gold badges54 silver badges78 bronze badges

1 Comment

Seeker Over a year ago

Thanks. This helped. I could quickly change the log statement to dump getOwnPropertyNames() and it showed the first method giving all the index properties along with length property whereas the second one only dumped the length property

hakkisabah · Accepted Answer · 2021-02-06 14:32:12Z

-1

i hope if you want its example here.

More Information = > https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

const testArr = [
        { name: false, expected: false },
        { name: null, expected: false },
        { name: undefined, expected: false },
        { name: "", expected: false },
        { name: "  \t\n", expected: false },
    ];
    
    const createArray = (arr) => { return [...arr]}
    
    console.log(createArray(testArr))

answered Feb 6, 2021 at 14:32

hakkisabah

11 silver badge1 bronze badge

Collectives™ on Stack Overflow

Creating array with spread syntax

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related