I am trying to initialize an array of boolean values, where there is a different value on a specific position in array.

If I initialize state like this, empty is array.

state = {
    activeItems: [...new Array(5)].map((item, idx) =>
      idx === 1 ? true : false
    )
}

I am trying to initialize an array of boolean values, where there is a different value on a specific position in array.

If I initialize state like this, empty is array.

state = {
    activeItems: [...new Array(5)].map((item, idx) =>
      idx === 1 ? true : false
    )
}

• javascript
• arrays
• reactjs
• ecmascript-6

• The question doesn't contain all necessary details. See stackoverflow./help/mcve . The way ... works is specific to your setup which isn't shown. It may work not as expected in TypeScript with downlevel iteration disabled. – Estus Flask Commented Jan 29, 2019 at 13:17

4 Answers 4

You will have to first fill your array before mapping it :

state = {
    activeItems: new Array(5).fill().map((item, idx) => idx === 1)
}

const result = new Array(5).fill().map((item, idx) => idx === 1)
console.log(result)

Also idx === 1 ? true : false can be reduced to idx === 1 and deconstructing the array is not necessary.

Array from gives you array with <empty slots>

Problem is because map do not iterate over empty spaces

let arr = new Array(5)

let modified = arr.map((e,i)=> console.log(i)) // prints nothing
console.log('modifed prints nothing')

Fill empty state using fill

let arr = new Array(5)

let modified = arr.fill(0).map((e,i)=> console.log(i))  //prints index

I'm not sure why you mentioned your code returns empty array. Because, it does return the expected output.

You can use Array.from instead to avoid any inconsistency you currently have:

const state = {
    activeItems: Array.from({length:5}, (_, idx) => idx === 1)
}

console.log(state)

The second parameter to Array.from is a map function.

The code is workable out of the box in native ES6:

[...new Array(5)].map((item, idx) =>
  idx === 1 ? true : false
)

It results in

[false, true, false, false, false]

array.

Any inconsistencies with it are caused by a transpiler in use and its implementation of ... array spread syntax. In some implementations it may result in inpliant code, notably TypeScript with downlevelIteration piler option disabled. For instance, it's used to in Stackblitz, even in JS projects. Without downlevel iteration, it would be transpiled to:

new Array(5).slice().map(function (item, idx) {
    return idx === 1 ? true : false;
});

new Array(5).slice() results in sparse array that won't be iterated with map. This situation can be secured by using Array.from or Array.fill (as other answers already suggest). Both will fill sparse array with undefined values that can be iterated with map:

Array.from(new Array(5)).map((item, idx) => idx === 1);

new Array(5).fill().map((item, idx) => idx === 1);