-1

The star is enclosed in a <p> tag:

{ Array(rating).fill().map((_, i) => ( <p>⭐</p> )) }

So it gives output as many stars as the rating parameter accepts, but how? For example we give rating 3 value and it will give *** as output .

4
  • Array(3) makes an array with 3 undefined values, map loops over them and replaces them with the star.. Commented Nov 10, 2020 at 18:27
  • @LawrenceCherone .fill() is actually needed, because .map() skips the empty value (special JS value produced when you create Array(n)). I learned that hard way :D
    – Robo Robok
    Commented Nov 10, 2020 at 18:30
  • @RoboRobok yup, your right Commented Nov 10, 2020 at 18:30
  • Array(3) creates an entirely sparse array of length 3, thus it has not a single own item. It is empty which also means it can not be iterated by array methods like map, filter etc... ;.fill() does fill up the array with the undefined value for each index inclusively in between 0 and 2 thus the array now is not sparse/empty and can be iterated. Commented Nov 10, 2020 at 18:32

2 Answers 2

2

Step by step:

  1. Array(rating) creates an array of rating empty elements, so if rating is 3, then your Array(rating) returns [empty, empty, empty].
  2. [empty, empty, empty].fill() returns [undefined, undefined, undefined], because in JavaScript, you can't map() an empty value. That's a bit quirky part of JavaScript, but it is what it is.
  3. Now, [undefined, undefined, undefined].map((_, i) => ( <p>⭐</p> )) converts your array to [<p>⭐</p>, <p>⭐</p>, <p>⭐</p>], which is not a valid JavaScript, but I'm assuming you're using React and JSX. It will be compiled to an array of HTML paragraph elements with a ⭐ as its text, each.

As you're using JSX with an expression inside curly braces like that, it's going to be your output.

As a result, this snippet will output <p>⭐</p><p>⭐</p><p>⭐</p>, or any number of paragraphs, depending on the rating value.

2
  • Thanks a lot man ,you explained well,yes I am using react. Commented Nov 10, 2020 at 18:34
  • Sure on a MERN journey :)) Commented Nov 10, 2020 at 18:36
1

Let's take it step by step. It may be helpful to follow along on your machine by opening up a node console in your terminal.

Casting an integer (rating) as an array will return an array with rating-length.

> Array(5)
[ <5 empty items> ]

If rating is 5, we now have an array of length 5, but that's not really that useful yet because array length is dynamic in Node.

We call .fill() which is a method that will fill all entries in an array with whatever you pass it. In this case, we pass nothing, so it's undefined:

> Array(5).fill()
[ undefined, undefined, undefined, undefined, undefined ]

Next we call map which is a function that creates a new array populated with the results of calling a provided function on every element in the calling array.

In your example, we're creating a new anonymous function that takes two arguments. When map is called on an array, the first argument is the index of the item in the array (which we do not use, so in this case we indicate that parameter is unused with an underscore _). The second argument is the actual item in this array (which as we stated earlier, is undefined for all 5 items).

Thus the newly created array from map is filled to rating-length with the star emoji encapsulated by <p> tags

> let rating = 5
undefined
> Array(rating).fill().map((_, i) => ( '<p>⭐</p>' ))
[ '<p>⭐</p>', '<p>⭐</p>', '<p>⭐</p>', '<p>⭐</p>', '<p>⭐</p>' ]

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.