Как можно сократить запись создания одинаковых элементов?

Question

[Mark]

В tr добавляется несколько td. Вот такой вариант записи сейчас:

function createPayment({id, sum, system, date})
{
    const payment = document.createElement('tr');
    payment.classList.add('item', 'block-sr-2', 'all');
    payment.dataset.ref = "mixitup-target";

    const addPaymentCell = value => {
        const td = document.createElement("td");
        td.innerText = value;
        return td;
    };

    payment.append(addPaymentCell(id));
    payment.append(addPaymentCell(sum));
    payment.append(addPaymentCell(system));
    payment.append(addPaymentCell(date));
}

Мне кажется, его можно сократить как-то правильно использовав цикл, чтобы не дублировать:

payment.append(addPaymentCell(id));
    payment.append(addPaymentCell(sum));
    payment.append(addPaymentCell(system));
    payment.append(addPaymentCell(date));

По-сути, можно применить foreach. Но придётся заново создавать объект, прописывая переменные: id, sum, system, date. Либо отказаться от деструктурирующее присваивание в аргументах функции(либо провести его позже).

function createPayment({id, sum, system, date}) {
    const payment = document.createElement('tr');
    payment.classList.add('item', 'block-sr-2', 'all');
    payment.dataset.ref = "mixitup-target";

    const object = {id, sum, system, date};
    object.forEach(value => {
        const td = document.createElement("td");
        td.innerText = value;
       payment.append(td);
    });
}

А можно ли как-то чисто перечислив переменные создать по ним обход циклом?

Answer 1

[0xD34F]

Убираем деструктуризацию параметра (ну или можете оставить, тогда кавычки у элементов массива надо будет убрать ('id' -> id, 'sum' -> sum, ...), а вместо paymentData[n] будет просто n), вместо десяти строк пишем три:

payment.innerHTML = [ 'id', 'sum', 'system', 'date' ]
  .map(n => `<td>${paymentData[n]}</td>`)
  .join('');