Tengo una función para generar comentarios, en la que cada comentario se almacena como un objeto en una matriz. Los comentarios pueden tener comentarios de respuesta, en los que tienen exactamente el mismo html y datos para representar, solo que su estilo es diferente (a través de una clase de modificador CSS).

¿Cómo puedo hacer que esta función sea recursiva ? renderReplies(comment.replies) llama a una función que es exactamente igual a la función renderComments , solo que sin la llamada de función mencionada renderReplies (ya que una respuesta a una respuesta es exactamente igual también en términos de estilo).

 const renderComments = (comments) => { commentsElement.innerHTML = ''; comments.forEach(comment => { commentsElement.innerHTML += html; // data-id attribute const liElements = commentsElement.querySelectorAll('.comment'); const liElement = liElements.item(liElements.length - 1); liElement.setAttribute('data-id', comment.id); // author liElement.querySelector('.comment__author').innerHTML = comment.user.username; // avatar src & alt attributes const avatar = liElement.querySelector('.comment__avatar'); avatar.setAttribute('src', comment.user.image.png); avatar.setAttribute('alt', comment.user.username); // time since posted // content const p = liElement.querySelector('.comment__text'); p.appendChild(document.createTextNode(comment.content)); // score liElement.querySelector('.comment__score b').innerHTML = comment.score; // replies renderReplies(comment.replies); }); };