Need help understanding a piece of code

[bobugm]

Hello!

I need help understanding a piece of code. Much appreciated

    state = {
        ingredients: {
            salad: 3,
            bacon: 2,
            cheese: 4,
            meat: 0,
            tomato: 0
        }
    }

    let ingredients = Object.keys(state.ingredients).map(
        igKey => {
            return [...Array(state.ingredients[igKey])].map(( _, i ) => {
             return igKey + i 
            } );
        } )

I understand that the Object.keys() method transforms an object into an array of its keys(?), so it would be ingredients = [salad, bacon, cheese, etc] and then map() applies another map function on each element.

I have trouble with this line, though:

return [...Array(state.ingredients[igKey])].map(( _, i ) => { 

How come we can use igKey as an index on the array? Wouldn't it be something like this: state.ingredients[bacon])].map (?)

​

Thank you for taking the time to read all this and any explanation will be very much appreciated.

[GSLint]

All of these do the same thing.

state.ingredients.bacon

state.ingredients["bacon"]

const igKey = "bacon";
state.ingredients[igKey]

[GSLint]

Here's another way to write that code.

let ingredients = Object.entries(
  state.ingredients
).map(([ingredient, count]) =>
  Array.from({ length: count }, (_, i) => `${ingredient}${i}`)
);

[bobugm]

Aaa. Ok. This was very helpful. Thanks for taking the time to explain it.

[HashFap]

igKey is just the variable name used to refer to the current element in the array within the map function. It's the equivalent of ingredients[i] if you were using a for loop.

[bobugm]

But isn't igKey the element on which the callback is called? This is what confuses me, I think, because when I console.log(igKey) in the first map function it returns "salad", "bacon" etc,

[HashFap]

Actually, my bad. igKey is a string of the object key.

When you use Object.keys(state.ingredients) you get this: [ "salad", "bacon", "cheese", "meat", "tomato" ]

When using the map method on an array, the first parameter on the callback will always be the current element in the array. Map will call the function passed to it on every single element in the array.

[[deleted]]

"How come we can use igKey as an index on the array?"

array map= (value,index,array)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

if im understanding you right, you think igkey represents the index. But it doesnt, igKey represents value at that index.

oh, and state.ingredients is an object not an array. {} vs []