getSearchResultsHTML VS getKeywordsHtml

안녕하세요, 제목에 있는 2개 함수의 구현이 유사한데요,

전자는 데이터가 바인딩된 html 문자열을 다시 메소드로 분리하여 리턴하였고,

후자는 문자리터럴 그대로 html변수에 담아 리턴하였는데요, 어떤 이유가 있나요?

더 나은 코드는 무엇이며 왜 더 나은 지 알 수 있을까요?

MVC모델로 뭔가 작업하는 게 처음이라서,, 뭔가 잘게잘게 쪼개서 함수의 역할을 분리하는 것 같은데

어떤 기준으로 그렇게 되는 것인지 모르겠어서 질문 올립니다.

getSearchResultsHTML

ResultView.getSearchResultsHTML = function (data) {
  return data.reduce((html, item) => {
    html += this.getSearchItemHtml(item)
    return html
  }, '<ul>') + '</ul>'
}
ResultView.getSearchItemHtml = function (item) {
  return `<li>
    <img src="${item.image}" />
    <p>${item.name}</p>
  </li>`
}

getKeywordsHtml

KeywordView.getKeywordsHtml = function (data) {
  return data.reduce((html, item, index) => {
    html += `<li data-keyword="${item.keyword}"><span class="number">${index + 1}</span>${item.keyword}</li>`
    return html
  }, '<ul class="list">') + "</ul>"
}

KeywordView.getKeywordsHtml = function (data) {
  return data.reduce((html, item, index) => {
    html += this.getKeywordItemHtml(item, index)
    return html
  }, '<ul class="list">') + "</ul>"
}
KeywordView.getKeywordItemHtml = function (item, index) {
  return `<li data-keyword="${item.keyword}">
    <span class="number">${index + 1}</span>${item.keyword}
  </li>`
}