자바스크립트 내장함수 repeat 사용

영화리뷰 사이트를 만들면서 각 영화의 평점(별5개)을 표시하려고 함.

스파르타코딩에서 제공해준 API 내용은 다음과 같음

movies : [

{

  comment : "~~~~",

  desc : "~~~~",

  image : "url",

  star : 4(또는 "4"),

  title : "영화제목"

},

...

]

 

이런식의 데이터를 불러옴. star키의 값으로 숫자가 들어있음. 처음에 생각한 것은 switch문이나 if를 사용해서 조건에따라 별을 입력해주는 방식이었음.

 

function listing() {
    $('#cards-box').empty();
    $.ajax({
        url: "http://spartacodingclub.shop/web/api/movie",
        data: {},
        type: "GET",
        success: function (data) {
            for (let i = 0; i < data['movies'].length; i++) {

                let star = '';
                if(data['movies'][i]['star'] == 1){
                    star = '⭐';
                }else if(data['movies'][i]['star'] == 2){
                    star = '⭐⭐';
                }else if(data['movies'][i]['star'] == 3){
                    star = '⭐⭐⭐';
                }else if(data['movies'][i]['star'] == 4){
                    star = '⭐⭐⭐⭐';
                }else if(data['movies'][i]['star'] == 5){
                    star = '⭐⭐⭐⭐⭐';
                }

                const temp_html = `<div class="col">
                                <div class="card">
                                    <img src="${data['movies'][i]['image']}"
                                         class="card-img-top" alt="...">
                                    <div class="card-body">
                                        <h5 class="card-title">${data['movies'][i]['title']}</h5>
                                        <p class="card-text">${data['movies'][i]['desc']}</p>
                                        <p>${star_image}</p>
                                        <p class="myComment">${data['movies'][i]['comment']}</p>
                                    </div>
                                </div>
                            </div>`;
                $('#cards-box').append(temp_html);
            }
        }
    })
}

if문을 작성하면서도 스스로 비효율적이라는 생각이 들었음. 'repeat를 사용하면 코드가 많이 줄어들고 간단하게 작성할 수 있었음.

const star_image = '⭐'.repeat(data['movies'][i]['star']);

10줄이 넘는 if문 코드를 이 한줄로 깔끔하게 정리