DEV Community: Lucas Gabriel

Funções em JavaScript: Array.filter()

Lucas Gabriel — Sun, 07 Jan 2024 17:46:17 +0000

Introdução

Listas são estruturas de dados que estão presentes no dia a dia de programadores. Cada linguagem de programação possui suas especificidades na implementação dessas estruturas, oferecendo diferentes métodos para se trabalhar com os dados nela armazenados.

O JavaScript oferece algumas funções especiais para manipular listas/arrays: as HOF's (High Order Functions). Estas, basicamente, são funções que podem receber como parâmetro outras funções e também podem retornar uma função como resultado do seu processamento 🤯. Leia mais sobre HOF's aqui.

Hoje vamos aprender sobre uma HOF que muito útil para quem precisa filtrar dados em uma lista: filter().

Problematização

Vamos considerar o seguinte cenário: nos foi dada uma lista de clientes cadastrados em um site. Esta lista, inclui clientes com cadastros ativos e inativos, e precisamos filtrar a partir dela somente os cliente com cadastro ativo.
Segue abaixo nossa lista:

const clientes = [{
    'nome': 'Lucas',
    'ativo': true
  },
  {
    'nome': 'Maria',
    'ativo': false
  },
  {
    'nome': 'Mateus',
    'ativo': true
  },
  {
    'nome': 'Renan',
    'ativo': false
  },
  {
    'nome': 'Julya',
    'ativo': false
  },
  {
    'nome': 'Jéssica',
    'ativo': true
  }
]

Para filtrarmos esta lista, a solução mais intuitiva talvez seja estruturar um laço de repetição for:

const clientesAtivos = []

for (let i = 0; i <= clientes.length - 1; i++) {
  if (clientes[i]['ativo']) {
    clientesAtivos.push(clientes[i])
  }
}

console.log(clientesAtivos)
/* Saída:
[
  { nome: 'Lucas', ativo: true },
  { nome: 'Mateus', ativo: true },
  { nome: 'Jéssica', ativo: true }
]
*/

Criamos uma laço de repetição for cuja variável de controle i começa em zero, porque vamos utilizá-la para acessar as posições do array, que como sabemos começa em 0. Essa variável será incrementada em +1 até que ela atinja a quantidade de elementos do array - 1, ou seja, a última posição do array, que é o seu número de elementos - 1.
Acessamos a chave ativo do objeto usando o ´bracket notation`(notação de colchetes). Como ela guarda um valor booleano, no bloco if, se for o valor for true o objeto será adiciona ao array clientesAtivos.

A solução acima funciona perfeitamente. Obteremos o resultado desejado. Porém, como programadores precisamos sempre pensar na melhor solução para um problema. Em muitos casos, haverão várias alternativas para solucionar o mesmo problema. E nestes casos, nosso trabalho é escolher a melhor alternativa para aquele problema, naquele contexto específico.

É possível resolver esse problema da filtragem da lista com código menor e maior legibilidade, diminuindo nossa chance erro e facilitando a vida de quem eventualmente venha a trabalhar no nosso código posteriormente.

filter()

filter() é uma HOF do JavaScript, cujo objetivo é filtrar dados de um array e armazenar o resultado em um novo array. Note que o filter() não faz alterações no array em que ele é usado, ele cria um novo array e armazena nele os valores que atendem ao critério do filtro aplicado.

A sintaxe do filter é a seguinte:

js array.filter(function callback(valorAtual, indice, arrayOriginal) {});

callback: função que é aplicada em todos os elementos do array;
valorAtual: parâmetro obrigatório e é referente ao elemento que está sendo acessado no momento;
indice: parâmetro opcional. Representa a posição do valorAtual no array;
arrayOriginal: parâmetro opcional. Array original em que o valorAtual está armazenado;

Podemos observar que o filter recebe obrigatoriamente uma função como parâmetro. Essa função é uma callback (aprenda sobre callbacks aqui) que aplica um teste em cada elemento do array. Os valores que passam no teste são adicionados no novo array que é retornado pelo filter.

Vamos aplicar o filter para solucionar nosso problema de filtrar clientes ativos:

`js
const clientesAtivosFilter = clientes.filter(cliente =>
cliente['ativo']);

console.log(clientesAtivosFilter);

/**
Saída:
[
{ nome: 'Lucas', ativo: true },
{ nome: 'Mateus', ativo: true },
{ nome: 'Jéssica', ativo: true }
]
*/
`
Sim, resolvemos o mesmo problema com uma única linha de código. Esse é o poder do JavaScript!
Vamos entender como tudo isso está funcionando:

chamamos o filter e passamos para ele uma callback usando uma sintaxe mais curta, conhecida como arrow function;
no parâmetro da callback, acessamos o elemento do array, que no caso é um objeto com as chaves nome e ativo;
acessamos a chave ativo, e sendo ela true o objeto será adicionado ao array criado e retornado pelo filter;

Vamos para um exemplo um pouco mais complexo. Considere a seguinte lista:

js const produtos = [ {id: 1, descricao: "Smartphone", categoria: "Eletrônico", preco: 1000}, {id: 2, descricao: "Notebook", categoria: "Eletrônico", preco: 3000}, {id: 3, descricao: "Geladeira", categoria: "Eletrodoméstico", preco: 1800}, {id: 4, descricao: "Liquidificador", categoria: "Eletrodoméstico", preco: 150}, {id: 5, descricao: "Fogão", categoria: "Eletrodoméstico", preco: 500}, {id: 6, descricao: "AirFryer", categoria: "Eletrodoméstico", preco: 600}, {id: 7, descricao: "PS5", categoria: "Eletrônico", preco: 4500}, {id: 8, descricao: "Smart TV 50 4k", categoria: "Eletrônico", preco: 3200}, {id: 9, descricao: "Monitor Gamer", categoria: "Eletrônico", preco: 1800}, {id: 10, descricao: "Máquina de Lavar", categoria: "Eletrodoméstico", preco: 1600} ];
O desafio agora é filtrar esses produtos pela categoria(Eletrônico) e preço(a partir de 2000R$). A solução com filter ficaria assim:

`js
onst eletronicosCaros = produtos.filter(produto => produto.categoria === 'Eletrônico' && produto.preco >= 2000)

console.log(eletronicosCaros)

/**
Saída:
[
{
id: 2,
descricao: 'Notebook',
categoria: 'Eletrônico',
preco: 3000
},
{ id: 7, descricao: 'PS5', categoria: 'Eletrônico', preco: 4500 },
{
id: 8,
descricao: 'Smart TV 50 4k',
categoria: 'Eletrônico',
preco: 3200
}
]
*/
`

Conclusão

filter é um recurso poderoso que dispomos no JavaScript para trabalharmos com listas. Existem várias outras HOF's no JavaScript e você pode conferir algumas aqui.

Disponibilizei esses códigos que usei como exemplo em um repositório no meu GitHub. Fique a vontade para clonar, criar fork's e praticar.
Sugestões e feedbacks são sempre bem-vindos. Você pode me contactar no LinkedIn
Espero que este conteúdo tenha sido útil de alguma forma. Até mais!

Docker: Conceitos Básicos e Comandos Iniciais (+ um jogo no final)

Lucas Gabriel — Thu, 25 May 2023 01:13:08 +0000

Escrevo este artigo na intenção de que seja uma introdução ao Docker e a alguns conceitos relacionados a ele. Espero que ele seja útil para te apresentar a uma ferramenta tão importante.

Agora, imagine-se em uma equipe de desenvolvimento. Você desenvolve parte da aplicação em uma distro Linux, e os demais integrantes da equipe possuem diferentes sistemas operacionais do seu, como Windows ou MacOS. Como garantir que a aplicação vai rodar em cada Sistema Operacional? Como garantir que ela funcionará no ambiente de testes e em produção? Como evitar o cansativo trabalho de instalar todas as bibliotecas e dependências necessárias, além das configurações, toda vez que o ambiente mudar?

A resposta é relativamente simples: containers.

O que são containers?

Um container é um processo ou conjunto de processos que são organizados de forma isolada no SO hospedeiro. São processos que o kernel do sistema operacional coloca em uma ‘caixa’, assim eles são isolados dos demais processos que estão sendo executados. Ele não possui acesso ao sistema de arquivos, à rede ou a outros containers. O kernel simula todo um ambiente que possui um sistema de arquivos próprio, além disso controla o quanto de recurso os processos do container podem consumir. Mas como isso é feito?

Por meio de cgroups e namespaces. Control Groups ou cgroups são ferramentas do kernel do Linux que controlam o quanto de recurso um processo pode consumir, por exemplo, a quantidade de RAM, CPU, disco, realizar operações de I/O, etc… Afinal, se um processo pode consumir recurso indefinidamente, isso pode vir a atrapalhar o funcionamento do SO, tornando todas as operações muito lentas ou derrubando o sistema inteiro. Namespaces são responsáveis por segregar os processos. Lembra do filme Matrix, em que os humanos vivem uma realidade simulada por máquinas? Namespaces fazem o mesmo, simulam todo um ambiente alternativo para os processos, assim tudo que os processos executam não afetam o sistema principal, o que torna os containers seguros. Para se aprofundar mais nesses conceitos, recomento este artigo do etcd.

É comum confundir containers com máquinas virtuais, porém existem diferenças fundamentais entre as duas tecnologias. Um container usa o mesmo kernel do SO em que foi criado e é isso que torna o container leve e eficiente, ele é simplesmente um processo sendo executado dentro do SO hospedeiro. Tanto que containers de sistema Linux x64 só rodam em sistemas Linux x64, conatiners Windows x86 somente em sistemas Windows x86.

Máquinas virtuais servem para rodar outro sistema operacional, como MacOS, usando o mesmo hardware do SO hospedeiro. Para isso é necessário o hypervisor, um software que abstrai parte do hardware para a máquina virtual funcionar. Sendo assim, com uma máquina virtual você tem outro kernel, tem um SO inteiro para trabalhar, porém isso é muito mais custoso e difícil de escalar.

Máquinas virtuais e containers são soluções para problemas diferentes. Enquanto containers são mais úteis para empacotar e executar aplicações, máquinas virtuais são úteis em casos que é necessário um SO inteiro.

Diferença entre VM’s e Containers

Para se aprofundar mais nestes conceitos e diferenças, recomendo este vídeo do Fabio Akita sobre containers e VM's.

O que é o Docker?

Docker é um software que visa simplificar a criação e o gerenciamento de containers. Ele foi desenvolvido por Solomon Hykes e apresentado na PyCon de 2013 e foi um divisor de águas na manipulação de containers e imagens. Com ele é possível empacotar aplicações e todas suas dependências em imagens e executá-las em containers.

Empacotamos nossas aplicações em imagens, que são como scripts que contém tudo o que é necessário para a execução do container, como por exemplo: o código-fonte, bibliotecas, dependências, etc… Imagem é a matéria prima do container.

O Docker possui um hub de imagens, o Docker Hub, que é um repositório onde estão imagens oficiais das mais diferentes tecnologias como banco de dados, runtimes, So’s, etc… Nesse repositório podemos baixar imagens e após criar uma conta subir as nossas próprias.

Docker ficou muito popular e muito útil pois simplificou e tornou eficiente a manipulação de containers e imagens. Docker não inventou essas tecnologias, elas já existiam no kernel do Linux. Seu grande mérito está em tornar o uso dessas tecnologias amigável e produtivo.

Instalação do Docker e Comandos Básicos

Caso não tenha o Docker instalado: Guia Instalação Oficial - Docker. Escolha a opção do seu SO e siga o passo a passo da instalação.

Vamos agora botar a mão na massa e desbravar o Docker. Para criar o seu primeiro container, digite o comando abaixo no terminal do Docker:

docker container run hello-world

O que acabamos de fazer é baixar a imagem hello-world e executá-la em um container. Porém há informações nesse output que vale a pena analisarmos para entendermos um pouco mais sobre o funcionamento do Docker.

Temos um descrição do procecedimento que o Docker seguiu após a execução do comando run. Primeiro o comando digitado no CLI foi enviado para Docker Daemon, que, por sua vez verificou se a imagem “hello-world” estava disponível localmente. Como não estava a imagem foi baixado do hub do Docker num processo semelhante ao ***git pull.*** Após baixar a imagem, o daemon criou um novo container, cujo o output é o que obtivemos no terminal.

Você pode verificar quais imagens você tem localmente com o comando abaixo:

docker images

Para verificar quais containers estão em execução:

docker container ls

Mas se foi criado um container a partir da imagem ***********hello-world,*********** por que ele não aparece na saída do comando acima? Isso é porque o container foi criado, executado e finalizado. Para listar containers que já foram finalizados, utilizamos o parâmetro -a.

docker container ls -a

Agora sim podemos ver todos os containers, tanto os que estão em execução como os que já foram finalizados. Aqui também há alguns detalhes que valem a pena serem observados.

Primeiro podemos ver que o container criado possui um ID, que é importante caso seja necessário realizar uma operação em um container específico. Podemos observar também o nome da imagem, além do comando que é executado no container logo quando é iniciado. Podemos ver quando o container foi criado e o seu status atual, a porta que ele está disponibilizando e por fim um nome, que é aleatório dado pelo Docker.

No output do comando docker container run hello-world há uma sugestão de um comando mais ambicioso. Vamos exexutá-lo? Além disso, vamos também nomear esse nosso novo container? 🤩

docker container run -it --name meu-container ubuntu bash

Automagicamente temos um novo terminal diante de nós! Agora vamos entender o que fizemos: por meio do comando run pedimos a criação de um novo container, o parâmetro -it indica que queremos interagir com o container, já o --name nos permite passar um nome para o container (************meu-container),************ depois especificamos a imagem que queremos (***********ubuntu) e*********** por fim damos o comando bash para entrarmos no terminal do container. E sim, agora estamos em um terminal do Ubuntu. Incrível, né!?

Execute o comando abaixo e veja por si mesmo que é de fato um Ubuntu:

cat /etc/os-release

Podemos criar um arquivo e escrever nele:

Porém, quando finalizarmos esse container esse arquivo e qualquer outro que foi criado não persistirá no disco. Isso ocorre porque, como aprendemos no início desse artigo, esses containers são isolados do SO hospedeiro e esse isolamento inclui o sistema de arquivos.

Contudo, é possível permitir que o container tenha acesso ao sistema de arquivos, à rede, à outros containers… mas, isso é assunto para um próximo artigo, em que podemos aprender sobre mapeamento de portas, de volume, comunicação entre containers, entre outros assuntos. Até lá, para se aprofundar mais recomendo Documentação Oficial do Docker e também este vídeo do canal Full Cycle, que é excelente e possui vários outros conteúdos. Vale a pena conferir.

Por fim, vamos sair do terminal do nosso container digitando exit e apertando **Enter**, e agora vamos listar nossos containers com docker ps -a (um comando mais curto para listar os containers):

Agora vamos aprender a remover containers e a apagar imagens. Isso é útil pois, ainda que containers sejam leves eles consomem recursos de CPU e memória, muitos containers podem vir a afetar o desempenho da sua máquina. As imagens também são leves, porém o acúmulo de imagens desnecessárias ocupam armazenameto. Para remover um container específico, você pode usar o nome ou o ID do container. Vamos usar o nome que demos ao nosso

docker rm meu-container

Da mesma forma você pode remover imagens específicas por meio do ID ou nome, o que muda é que o comando é o rmi (remove image). Porém aqui vou ensinar um truque. Como possuímos mais de uma imagem vamos apagá-las numa tacada só:

docker rmi $(docker images -aq)

$() indica uma variável no shell. Neste caso o valor dessa variável é o retorno do comando docker images -aq que lista todas as imagens locais do Docker, o rmi será aplicado nessas imagens. O mesmo pode ser feito nos containers porém substituindo por docker ps -aq . O parâmetro -f pode ser usado após rm ou rmi para forçar a remoção dos containers em execução ou imagens que estejam servindo de base para containers em execução.

E chegamos ao fim desse artigo introdutório sobre Docker. Espero que tenha sido útil de algum jeito. Dúvidas, sugestões e feedbacks são muito bem-vindos 😄. Ah, e antes de ir quero deixar aqui uma dica divertida: execute o comando docker run -it andrius/ascii-patrol .

Até a próxima!