Difference between Array(n) and Array(n).fill?

Question

I've noticed that if I do:

Array(n).map(() => console.log('test'))

I get nothing printed.

However if I do:

Array(n).fill().map(() => console.log('test'))

I get test printed out n times.

Why is this the case? If I do Array(n).length I get back n.

I notice in the REPL that Array(5) returns:

[ , , , , ]

Whereas Array(5).fill() returns:

[ undefined, undefined, undefined, undefined, undefined ]

In both cases, typeof any element in the array === undefined.

So, what's going on?

apsillers · Accepted Answer · 2016-01-26 12:35:51Z

map only operates on defined integer properties of an array. Array(n) does not set integer properties, while Array(n).fill() does. There's a difference between a property that doesn't exist and an extant property whose value is undefined.

Array(n) sets the length property of the array, but it does not set any properties. The array object does not have any integer properties.

.fill sets all of the integer properties for an array from zero up to one less than length. When you do Array(n) you set the length property of the new aray, and then .fill() defines and sets each integer property up to n-1. The array created by Array(n).fill() does have properties defined up to length - 1. (The properties happen to be set to undefined, because you didn't pass an argument to fill, but they do exist.)

In pracitcal terms, you can see the difference if you do Object.keys(Array(4)) (empty array) versus Object.keys(Array(4).fill()) (a list of strings "0" to "3"). In the first case, the properties don't exist; in the second case they do.

Gilgamesh · Accepted Answer · 2016-01-26 12:28:24Z

6

Array(n) creates a new array of size n, the contents have not been defined.

Array(n).fill() creates an array of size n where every element is set to whatever you passed into fill or undefined in your case since you passed nothing.

Array(n).fill('test') creates an array of size n filled with 'test'.

answered Jan 26, 2016 at 12:28

Gilgamesh

6686 silver badges17 bronze badges

Comments

krewllobster · Accepted Answer · 2019-07-31 23:18:35Z

2

I had a requirement to create a scale using a minValue, maxValue, and precision. So, for example, with minValue = 5, maxValue = 7, and precision = 0.5, I should get the array [5, 5.5, 6, 6.5, 7]. I used the following (based off of answers above):

const tickCount = ((maxValue - minValue) / precision) + 1
const ticks = Array(tickCount)
  .fill()
  .map((x, i) => minValue + i * precision)

answered Jul 31, 2019 at 23:18

krewllobster

4355 silver badges8 bronze badges

Collectives™ on Stack Overflow

Difference between Array(n) and Array(n).fill?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related