JavaScript Arrow Functions and a For Loop

Question

I have a JavaScript function that converts a numeric rating like 3/5 to a visual rating using star HTML entities:

★ ★ ★ ☆ ☆

Here is my function:

function ratings(rating, total)
{
    var stars = '';
    for(var i = 0; i < total; i++)
    {
        if(i < rating) 
        {
            stars += ' &starf; ';
        }
        else 
        {
            stars += ' &star; ';
        }   
    }
    return stars;        
}

document.write(ratings(3, 5 ));

I want to convert this to an arrow function. Here is what I have so far:

const ratings = (rating, total) => {  
    let stars;
    for(var i = 0; i < total; i++)
    {
        if(i < rating) 
        {
            stars += ' &starf; ';
        }
        else 
        {
            stars += ' &star; ';
        }   
    }
    return stars;  
};

document.write(ratings(3, 5 ));

I've seen some nice clean arrow function examples using map, forEach, and filter to loop through an array. Is there anything similar that would work with my function? Not looping through an array, but looping x number of times.

https://stackoverflow.com/a/33352604/4613465 here's how to add an array with n elements, then you can use the map function. — Fatorice, Oct 06 '22 at 14:45
Please see [ask], then revise your post title to ask a clear, specific question. It's extremely vague now. — isherwood, Oct 06 '22 at 14:50

score 4 · Answer 1 · edited Oct 06 '22 at 14:46

4

You could just not iterate at all to be even faster and better to read:

const ratings = (rating, total) => ' &starf; '.repeat(rating) + ' &star; '.repeat(total-rating);

document.write(ratings(3, 5));

edited Oct 06 '22 at 14:46

adiga

34,372
9
61
83

answered Oct 06 '22 at 14:45

boppy

1,753
12
10

score 2 · Accepted Answer · answered Oct 06 '22 at 14:58

2

Or something like that...

const ratings = (rating, length) =>
   Array.from({length},(_,i) => (i < rating) ? '&starf;' : '&star;')
   .join(' ');
   
document.write(ratings(3, 5 ));

answered Oct 06 '22 at 14:58

Mister Jojo

20,093
6
21
40

score 1 · Answer 3 · answered Oct 06 '22 at 14:48

You can use the methode Array.from to create / initialize your first array. Then you can map through this array to create your rating. Don't forget to join the result to get a string as a result.

const ratings = (rating, total) => Array.from({length: total})
   .map((star, i) => (i < rating) ? ' &starf; ' : ' &star; ')
   .join('');
document.write(ratings(3, 5 ));

score 1 · Answer 4 · answered Oct 06 '22 at 14:51

Your question is not about arrow functions per say, as you already have one, but rather how to think in terms of arrays and their methods.

First we create an array of total length (1), as that will always be the numbers of stars irrespective of the type. This is a sparse array, so we need to .fill("whatever") it to become something we can map.

Then, each item is mapped to a corresponding star depending on whether its index is less than or equal to rating (2)

Notice the _ to ignore the actual item as we only care about the index.

This gives us the desired array of stars and all we have to do is join(" ") them to have a proper string we can put in the document. (3)

const ratings = (rating, total) => {  
    return Array(total) // 1
    .fill("")
    .map((_, i) => i < rating ? "&starf;" : "&star;") // 2
    .join(" ") // 3
};

document.write(ratings(3, 5 ));

JavaScript Arrow Functions and a For Loop

4 Answers4