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 .
Step by step:
Array(rating)
creates an array of rating
empty elements, so if rating
is 3
, then your Array(rating)
returns [empty, empty, empty]
.[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.[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.
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>' ]
Array(3)
makes an array with 3 undefined values, map loops over them and replaces them with the star...fill()
is actually needed, because.map()
skips theempty
value (special JS value produced when you createArray(n)
). I learned that hard way :DArray(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 likemap
,filter
etc... ;.fill()
does fill up the array with theundefined
value for each index inclusively in between0
and2
thus the array now is not sparse/empty and can be iterated.