1

I am taking a course where instructor used a number lines of code like below:

const ingredients = {
 salad: 1,
 bacon: 1,
 cheese: 2,
 meat: 2
}

// then he uses Object.keys method and mapped it like this:

    Object.keys(ingredients)  // this line provide ['salad', 'bacon', 'cheese', 'meat']
    .map(igKey =>{ 
    return [...Array(ingredients[igKey])] // Confused Line 
    **// above line provide** 
    //[undefined]
    //[undefined]
    //[undefined, undefined]
    //[undefined, undefined] //I am confused :( how this line works!
    .map((_, i) => {
     // here return something.
    }
    ));

The Confused Line take igKey = 'salad' return one undefined value as same as it takes igKey = 'cheese' and return two undefined value; it doesn't take the value of 'salad' or 'cheese' as argument but how does it return as times as it's value?

please someone help to understand this line of code [...Array(ingredients[igKey])];

Improve this question
1

2 Answers 2

Reset to default
2 
.map(igKey => [...Array(ingredients[igKey])]
  1. ingredients[igKey] - The expression means take the value of key igKey from the ingredients object. This means that salad would product one, while cheese would give 2.
  2. [...Array(number)] - If the Array constructor/factory is called with a single numeric value, it creates an array with a length equals number. However, this is an array with empty places (a sparse array), that can't be mapped. To convert to an array where each place has a value (undefined in this case), they spread the sparse array to a new array. The result is [undefined] if the number is 1, and [undefined, undefined] if the number is 2, and so on...
  3. Since the array is not sparse, it can be mapped.

const ingredients = {
  salad: 1,
  bacon: 1,
  cheese: 2,
  meat: 2
}

const result = Object.keys(ingredients)
  .map(igKey => 
    [...Array(ingredients[igKey])] // create a non sparse array by the length of the key's value
    .map((_, i) => i + 1) // map the array
  )

console.log(result)

You can optimize this code a bit:

  1. Use Object.values(), since you want the numbers, and don't care about the keys.
  2. Create a new array with Array.from(), it accepts a length, and you can declare the new array values directly.

const ingredients = {
  salad: 1,
  bacon: 1,
  cheese: 2,
  meat: 2
}

const result = Object.values(ingredients) // get the values [1, 1, 2, 2]
  .map(length => // map the array of values
    Array.from({ length }, (_, i) => i + 1) // create an array with the length of the number, and fill the values of the array
  )

console.log(result)

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

1 Comment

Thanks a lot! I understood!
1

the most inner part of that line ingredients[igKey] is using access notation to get the value for that specific key.

for instance: when igKey is cheese it becomes ingredients['cheese'] which is 2.

one level up, Array() creates an array of the elements passes to the function.

one level up, ... is the spread operator which expands the contents of the array in place.

one level up, all of that is inside an array.

What I would've expected from that line of code would be for each iteration of preceding map 1. the key is used to access the corresponding value (1 or 2 in this case) 2. that value is used to create an array with only that value in it 3. that value is then expanded in place (ie. removed from the array via the spread operator) 4. placed back in an array via the array brackets. 5. replacing the return on that line with a console log I would expect to output [1], [1], [2], [2]

not sure why you're getting what you're getting though.

Improve this answer

1 Comment

Thanks! Though I have gotten my answer, you have cleared the topic more.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.