Forem: Lucas Wendell

NodeList vs HtmlCollection

Lucas Wendell — Tue, 27 Dec 2022 17:22:30 +0000

Nesse artigo iremos falar sobre dois array’s likes que são muito comuns de serem vistos quando trabalhamos com a DOM.

⚠️ Dica: Para melhor compreensão dos exemplos recomendo que leia os comentários do código.

O que é um array like?

Um array like é um objeto que se parece com um array, age como um array mas não é um array. Ou seja, se usarmos o método Array.isArray() e passarmos um array like esse código irá retornar false, outra característica do array like é que ele não contém todos os métodos do array. Um exemplo de array like em javascript é a propriedade arguments de uma função, que armazena um array like que nos dá acesso a todos os argumentos de uma função.

function sum() {
    console.log(arguments.length); // 5
    console.log(Array.isArray(arguments)); // false

    arguments.forEach(argument => {
        console.log(argument);
    }); // Vai dar erro, pois esse array like não contém os memos métodos de um array original.
}

sum(1, 2, 3, 4, 5);

Quando temos um array like e queremos usar os métodos de um array original temos que transformá-lo em um array original.

function sum() {
    const argumentsArray = [...arguments]; // Transformando nosso array like em um array de verdade
    return argumentsArray.reduce((acumulator, current) => {
        return acumulator + current;
    }, 0);
}

console.log(sum(1, 2, 3, 4, 5));

Falo melhor sobre o método reduce e foreach de um array nesse artigo -> Iterando sobre arrays

NodeList

Um NodeList é um array like que temos quando selecionamos vários elementos da DOM usando os métodos Node.childNodes() (Pega todos os filhos de um elemento da DOM) e o document.querySelectorAll(‘.node’). O NodeList tem vários métodos, e entre eles possui o método foreach que também está presente nas arrays originais.

HtmlCollection

Um HtmlCollection é um array like que temos sempre que acessamos vários elementos da DOM que conseguimos quando acessamos elementos da DOM com os métodos que têm a palavra get em seu nome, ou seja, document.getElementById() retorna uma HtmlCollection.

NodeList vs HtmlCollection

E qual a diferença entre os dois? A principal diferença é que o HtmlCollection é “vivo”, ou seja, se inserirmos um elemento dinamicamente na DOM essa alteração vai ser refletida no HtmlCollection e ele vai armazenar os elementos antigos e os novos. Já com a NodeList isso não acontece, se selecionarmos elementos da DOM com ele e depois adicionarmos mais elementos essa alteração não será refletida no NodeList.

Vamos criar um ul html (lista) que contém algumas séries que estarão em uma li. Vamos selecionar essas li’s usando métodos que retornam um NodeList e HtmlCollection, depois disso vamos inserir uma nova série dinamicamente e depois vamos comparar o tamanho da NodeList e da HtmlCollection.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Exemplo</title>
    </head>
    <body>
        <ul class="seriesUl">
            <li class="serieLi">The Walking Dead</li>
            <li class="serieLi">Mr.Robot</li>
            <li class="serieLi">The Big Bang Theory</li>
            <li class="serieLi">The 100</li>
        </ul>
        <script src="./index03.js"></script>
    </body>
</html>

JAVASCRIPT

const seriesUl = document.querySelector('.seriesUl'); // Lista de series
const seriesNodeList = seriesUl.querySelectorAll('.serieLi'); // NodeList com 4 itens
const seriesHtmlCollection = document.getElementsByClassName('serieLi'); // HTMLCollection com 4 itens

console.log(seriesNodeList.length); // 4
console.log(seriesHtmlCollection.length); // 4

const aMelhorSerie = document.createElement('li');
aMelhorSerie.classList.add('serieLi');
aMelhorSerie.textContent = 'Breaking Bad';
seriesUl.appendChild(aMelhorSerie);

console.log(seriesNodeList.length); // 4
console.log(seriesHtmlCollection.length); // 5

Nesse exemplo podemos ver claramente que quando inserimos um elemento dinamicamente nossa NodeList não é atualizada e por isso continua com 4 itens.

Iterando sobre arrays

Lucas Wendell — Fri, 23 Dec 2022 21:55:31 +0000

Nesse artigo vamos falar sobre como iterar sobre arrays em javascript usando os principais métodos da linguagem.

Antigamente a única forma de iterar sobre arrays era através dos loops convencionais (for, while e etc…). Agora temos vários métodos para iterar sobre os arrays, mas nesse artigo falaremos somente de alguns que no caso são: foreach, reduce, map e o filter.

⚠️ Dica: Para melhor compreensão dos exemplos recomendo que leia os comentários do código.

Foreach

O foreach recebe um callback que será executado para cada item do array. Esse callback recebe 3 argumentos, sendo que somente o primeiro é obrigatório, o primeiro argumento indica o item atual do array, o segundo argumento indica o index atual e o terceiro indica o array completo.

O método foreach sempre retorna undefined e por isso é recomendado usá-lo somente quando formos executar um efeito colateral no nosso código,e isto é,toda e qualquer modificação no estado da aplicação percebida fora do destino da função chamada.

const carros = ['ferrari', 'gol', 'audi', 'bmw']

carros.forEach((carroAtual, index, array) => {
    console.log(carroAtual) // na primeira vez que esse callback for executado o carroAtual vai ser igual a ferrari, na segunda vez vai ser igual a gol e assim por diante até acabar o array
    console.log(index) // Na primeira vez valerá 0 na segunda 1 e assim por diante até acabar o array
    console.log(array) // Sempre vai armazenar meu array completo (['ferrari', 'gol', 'audi', 'bmw'])
})

Exemplo de uso:

Vamos imaginar que temos um array que contém vários objetos que representam produtos de uma loja de eletrônicos e queremos inserir o nome desses produtos em uma lista no html, nesse caso o ideal é usarmos o foreach já que a única coisa que estamos fazendo é executar um efeito colateral.

const ul = document.querySelector('ul');

const produtos = [
    { nome: 'Celular', preco: 1227 },
    { nome: 'Notebook', preco: 3000 },
    { nome: 'Monitor', preco: 1550 },
    { nome: 'Desktop', preco: 2500 },
    { nome: 'Mouse', preco: 197 },
    { nome: 'Teclado', preco: 250 },
    { nome: 'Fone', preco: 400 },
];

produtos.forEach(produtoAtual => {
    ul.innerHTML += `<li>${produtoAtual.nome}</li>`;
});

Map

O método map é idêntico ao foreach, vai executar seu callback para cada item do array até o arrayacabar. A única e principal diferença é que ele retorna um novo array. Então… Quando devemos usar o map? Devemos usar o map quando queremos um novo array com a mesma quantidade de itens do array original só que com os dados transformados.

Exemplo de uso:

Podemos criar um novo array usando map que contém somente os preços dos meus produtos.

const produtos = [
    { nome: 'Celular', preco: 1227 },
    { nome: 'Notebook', preco: 3000 },
    { nome: 'Monitor', preco: 1550 },
    { nome: 'Desktop', preco: 2500 },
    { nome: 'Mouse', preco: 197 },
    { nome: 'Teclado', preco: 250 },
    { nome: 'Fone', preco: 400 },
];

const precos = produtos.map(produtoAtual => {
    return produtoAtual.preco;
});


/*
a variavael preços agora armazena:
[
  1227, 3000, 1550,
  2500,  197,  250,
   400
]
*/

Podemos melhorar nosso código usando o destructuring e usando o retorno implícito da arrow function

const precos = produtos.map(({ preco }) => preco);

Filter

Podemos imaginar o filter exatamente como um filtrador de array’s. Ele retorna um novo array com os elementos filtrados.

Exemplo de uso:

Vamos imaginar que precisamos dos produtos do nosso array que tenham o preço maior que mil reais.

const produtos = [
    { nome: 'Celular', preco: 1227 },
    { nome: 'Notebook', preco: 3000 },
    { nome: 'Monitor', preco: 1550 },
    { nome: 'Desktop', preco: 2500 },
    { nome: 'Mouse', preco: 197 },
    { nome: 'Teclado', preco: 250 },
    { nome: 'Fone', preco: 400 },
];

const produtosCaros = produtos.filter(produtoAtual => {
    if (produtoAtual.preco >= 1000) {
        return produtoAtual;
    }
});
console.log(produtosCaros);

/*
A variavel produtosCaros agora armazena

[
  { nome: 'Celular', preco: 1227 },
  { nome: 'Notebook', preco: 3000 },
  { nome: 'Monitor', preco: 1550 },
  { nome: 'Desktop', preco: 2500 }
]
*/

Podemos melhorar nosso código usando distructuring, usando o retorno implícito da arrow function e evitando o if.

const produtosCaros = produtos.filter(({ preco }) => preco >= 1000);
console.log(produtosCaros);

Reduce

O reduce é um pouco mais complicado de entender mas garanto que com prática ele se tornará mais fácil. O reduce recebe dois argumentos, um callback que pode receber 4 parâmetros acumulador, valorAtual, index, array (exatamente nessa ordem), o segundo parâmetro do reduce é um valor default que vai ser atribuído ao primeiro parâmetro da callback (acumulador) na primeira execução do reduce. Devemos usar o reduce quando a partir de um array eu queira retornar um valor único que não seja um array.

const numeros = [10, 20, 30, 40, 50, 60];

const soma = numeros.reduce((acumulador, valorAtual, index, array) => {
    // Na primeira execução o acumulador vai ser igual ao item da primeira posição do array (10) e o valorAtual vai ser igual ao item da segunda posição do array (20)
    // Na segunda execução o acumulador vai valer 30, pois a soma de 10 + 20 é igual a 30, já o valorAtual vai ser igual ao terceiro item do array (30)
    // Na terceira execução o acumulador vai valer 60, pois 30 + 30 é igual a 60
    // Assim vai continuar até meu array acabar
    return acumulador + valorAtual;
});

console.log(soma);

Exemplo de uso:

Vamos imaginar que queremos somar o preço de todos os produtos para saber quanto temos no nosso estoque. Esse é um caso típico de uso para o reduce já que queremos retornar um único novo valor que não é um array.

const produtos = [
    { nome: 'Celular', preco: 1227 },
    { nome: 'Notebook', preco: 3000 },
    { nome: 'Monitor', preco: 1550 },
    { nome: 'Desktop', preco: 2500 },
    { nome: 'Mouse', preco: 197 },
    { nome: 'Teclado', preco: 250 },
    { nome: 'Fone', preco: 400 },
];

const valorTotalDoEstoque = produtos.reduce((acumulador, produtoAtual) => {
    return acumulador + produtoAtual.preco;
}, 0);
console.log(valorTotalDoEstoque);

/*
A variavel valorTotalDoEstoque agora armazena: 9124
*/

Podemos melhorar o nosso código usando destructuring e o retorno implícito da arrow function.

const valorTotalDoEstoque = produtos.reduce(
    (acumulador, { preco }) => acumulador + preco,
    0,
);
console.log(valorTotalDoEstoque);

📝 Nota: Nesse caso somos obrigados a passar o segundo parâmetro do reduce, se não tivéssemos passado o acumulador na primeira iteração seria um objeto e não é possível fazer uma operação matemática em um objeto.