Inserir o método forEach

Front-end
,
#1

Olá, gostaria de tirar uma dúvida:

Saber como poder colocar o método forEach no código, pois estou usando o loop for, mas não estou entendendo com fazer. Exemplos:
Exemplo 1:
function renderModals(postList, userList, callback, htmlReference) {
for (let index = 0; index < postList.length; index++) {
const elementP = postList[index];
for (let i = 0; i < userList.length; i++) {
const elementU = userList[i];
if (elementP.user == elementU.id) {
htmlReference.append(callback(elementP, elementU));
}
}
}
}
renderPosts(posts, users, postCreate);

Exemplo 2;
renderPosts(posts, users, postCreate);

function renderSuggests(userList, idList) {
suggestList.innerHTML = ‘’;
for (let u = 0; u < userList.length; u++) {
const elementUser = userList[u];
for (let i = 0; i < idList.length; i++) {
const elementId = idList[i];
if (elementUser.id == elementId) {
suggestList.append(suggestsCreate(elementUser))
}
}
}
}

renderSuggests(users, sugestUsers);

No caso só precisa usar o forEach e o arrowFunction?

#2

De forma geral, em vez disso:

for (var i = 0; i < array.length; i++) {
    var elemento = array[i];
    // faz algo com o elemento
}

Faz-se isso:

array.forEach(elemento => {
    // faz algo com elemento
});

Ou, se precisar do índice:

array.forEach((elemento, i) => {
    // faz algo com elemento
    // "i" é respectivo o índice
});

Ou seja, sua primeira função ficaria:

function renderModals(postList, userList, callback, htmlReference) {
    postList.forEach(elementP => {
        userList.forEach(elementU => {
            if (elementP.user == elementU.id) {
                htmlReference.append(callback(elementP, elementU));
            }
        });
    });
}

A segunda fica como exercício para o leitor :slight_smile:

Vale lembrar que nem sempre é equivalente. Por exemplo, se você precisar interromper o loop no meio (com break), não dá para fazer com forEach (a não ser que lance exceção, mas aí já é uma solução ruim para um problema que não deveria existir). Para estes casos, é preferível usar um for simples mesmo. Ou, se você não precisa dos índices, e somente dos elementos, pode usar um for..of:

function renderModals(postList, userList, callback, htmlReference) {
    for (var elementP of postList) {
        for (var elementU of userList) {
            if (elementP.user == elementU.id) {
                htmlReference.append(callback(elementP, elementU));
            }
        }
    }
}

Além de mais simples e direto, não precisa ficar criando uma função “à toa” (sem contar que no forEach vc chama a função várias vezes: uma para cada elemento).

1 curtida
#3

Obrigado mesmo! Ajudou demais! Queria um exemplo de como ficara para poder ter uma noção de como seria o resto para renderizar os modais e os posts.

Obrigado!