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.

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

adiga · Accepted Answer · 2022-10-06 14:46:33Z

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 6, 2022 at 14:46

adiga

35.4k9 gold badges66 silver badges88 bronze badges

answered Oct 6, 2022 at 14:45

boppy

1,93813 silver badges12 bronze badges

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

Comments

Mister Jojo · Accepted Answer · 2022-10-06 14:58:57Z

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 6, 2022 at 14:58

Mister Jojo

23k6 gold badges28 silver badges45 bronze badges

Comments

Alexandre L · Accepted Answer · 2022-10-06 14:48:17Z

1

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 ));

answered Oct 6, 2022 at 14:48

Alexandre L

792 bronze badges

Comments

Abdellah Hariti · Accepted Answer · 2022-10-06 14:51:52Z

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 ));

Collectives™ on Stack Overflow

JavaScript Arrow Functions and a For Loop

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related