One place for hosting & domains

      Entendendo

      Entendendo o servidor Nginx e os algoritmos de seleção de blocos de localização


      Introdução

      O Nginx é um dos servidores Web mais populares do mundo. Ele é capaz de lidar com grandes cargas com muitas conexões de cliente simultâneas, e pode funcionar facilmente como um servidor Web, um servidor de e-mail ou um servidor de proxy reverso.

      Neste guia, vamos discutir alguns dos detalhes dos bastidores que determinam como o Nginx processa as solicitações de clientes. A compreensão dessas ideias pode ajudar a eliminar a necessidade de suposições ao projetar servidores e blocos de localização e pode tornar o processamento de solicitações menos imprevisível.

      Configurações em bloco do Nginx

      O Nginx divide logicamente as configurações destinadas a atender diferentes conteúdo em blocos, que operam em uma estrutura hierárquica. Cada vez que uma solicitação de cliente é feita, o Nginx começa um processo para determinar quais blocos de configuração devem ser usados para lidar com a solicitação. Este processo de decisão é o que discutiremos neste guia.

      Os principais blocos que discutiremos são o bloco de servidor e o bloco de localização.

      Um bloco de servidor é um subconjunto da configuração do Nginx que define um servidor virtual usado para manusear solicitações de um determinado tipo. Os administradores geralmente configuram vários blocos de servidor e decidem qual bloco deve lidar com qual conexão com base no nome de domínio, porta e endereço IP solicitados.

      Um bloco de localização fica dentro de um bloco de servidor e é usado para definir como o Nginx deve manusear solicitações para diferentes recursos e URIs para o servidor pai. O espaço URI pode ser subdividido da maneira que o administrador preferir usando esses blocos. Ele é um modelo extremamente flexível.

      Como o Nginx decida qual bloco de servidor irá manusear uma solicitação

      Como o Nginx permite que o administrador defina vários blocos de servidor que funcionam como instâncias de servidor Web separadas, ele precisa de um procedimento para determinar qual desses blocos de servidor será usado para satisfazer uma solicitação.

      Ele faz isso através de um sistema definido de verificações que são usadas para encontrar a melhor combinação possível. As principais diretivas do bloco de servidor com as quais o Nginx se preocupa durante esse processo são a diretiva listen (escuta) e a diretiva server_name (nome do servidor).

      Analisando a diretiva “listen” para encontrar possíveis correspondências

      Primeiramente, o Nginx analisa o endereço IP e a porta da solicitação. Ele compara esses valores com a diretiva listen de cada servidor para construir uma lista dos blocos de servidor que podem resolver a solicitação.

      A diretiva listen tipicamente define quais endereços IP e portas que serão respondidos pelo bloco de servidor. Por padrão, qualquer bloco de servidor que não inclua uma diretiva listen recebe os parâmetros de escuta de 0.0.0.0:80 (ou 0.0.0.0:8080 se o Nginx estiver sendo executado por um usuário normal, não root). Isso permite que esses blocos respondam a solicitações em qualquer interface na porta 80, mas esse valor padrão não possui muito peso dentro do processo de seleção de servidor.

      A diretiva listen pode ser definida como:

      • Uma combinação de endereço IP/porta.
      • Um endereço IP solto que então escutará na porta padrão 80.
      • Uma porta solta que escutará todas as interfaces nessa porta.
      • O caminho para um soquete do Unix.

      Geralmente, a última opção só terá implicações ao passar solicitações entre servidores diferentes.

      Ao tentar determinar para qual bloco de servidor enviar uma solicitação, o Nginx primeiro tentará decidir com base na especificidade da diretiva listen usando as seguintes regras:

      • O Nginx traduz todas as diretivas listen “incompletas” substituindo valores que estão faltando pelos seus valores padrão para que cada bloco possa ser avaliado por seu endereço IP e porta. Alguns exemplos dessas traduções são:
        • Um bloco sem a diretiva listen usa o valor 0.0.0.0:80.
        • Um bloco definido para um endereço IP 111.111.111.111 sem porta se torna 111.111.111.111:80
        • Um bloco definido para a porta 8888 sem endereço IP torna-se 0.0.0.0:8888
      • Em seguida, o Nginx tenta coletar uma lista dos blocos de servidor que correspondem à solicitação, mais especificamente com base no endereço IP e porta. Isso significa que qualquer bloco que esteja funcionalmente usando 0.0.0 0 como endereço IP (para corresponder a qualquer interface), não será selecionado se houver blocos correspondentes que listam um endereço IP específico. Em todo caso, a porta deve ser exatamente a mesma.
      • Se houver apenas uma correspondência mais específica, o bloco de servidor será usado para atender a solicitação. Se houver vários blocos de servidor com o mesmo nível de especificidade correspondente, o Nginx então começa a avaliar a diretiva server_name de cada bloco de servidor.

      É importante entender que o Nginx avaliará apenas a diretiva server_name quando precisar distinguir entre blocos de servidor que correspondem ao mesmo nível de especificidade na diretiva listen. Por exemplo, se o example.com for hospedado na porta 80 de 192.168.1.10, uma solicitação para example.com será sempre atendida pelo primeiro bloco neste exemplo, apesar da diretiva server_name no segundo bloco.

      server {
          listen 192.168.1.10;
      
          . . .
      
      }
      
      server {
          listen 80;
          server_name example.com;
      
          . . .
      
      }
      

      Caso mais de um bloco de servidor corresponda com o mesmo nível de especificidade, o próximo passo é verificar a diretiva server_name.

      Analisando a diretiva “server_name” para escolher uma correspondência

      Em seguida, para avaliar ainda mais as solicitações que possuem diretivas listen igualmente específicas, o Nginx verifica o cabeçalho “Host” da solicitação. Esse valor possui o domínio ou endereço IP que o cliente estava tentando realmente alcançar.

      O Nginx tenta achar a melhor correspondência para o valor que ele encontra olhando a diretiva server_name dentro de cada um dos blocos de servidor que ainda são candidatos a seleção. O Nginx avalia eles usando a seguinte fórmula:

      • O Nginx primeiro tentará encontrar um bloco de servidor com um server_name que corresponda exatamente ao valor no cabeçalho “Host” da solicitação. Se for encontrado, o bloco associado será usado para atender à solicitação. Se mais de uma correspondência exata for encontrada, a primeira é usada.
      • Se nenhuma correspondência exata for encontrada, o Nginx então tentará encontrar um bloco de servidor com um server_name correspondente usando um curinga inicial (indicado por um * no início do nome na configuração). Se for encontrado, o bloco será usado para atender à solicitação. Se várias correspondências forem encontradas, a correspondência mais longa será usada para atender à solicitação.
      • Se nenhuma correspondência for encontrada usando um curinga inicial, o Nginx então procura um bloco de servidor com um server_name correspondente usando um curinga à direita (indicado por um nome de servidor que termina com um * na configuração). Se for encontrado, o bloco será usado para atender à solicitação. Se várias correspondências forem encontradas, a correspondência mais longa será usada para atender à solicitação.
      • Se nenhuma correspondência for encontrada usando um curinga à direita, o Nginx então avalia blocos de servidor que definem o server_name usando expressões regulares (indicado por um ~ antes do nome). O primeiro server_name com uma expressão regular que corresponda ao cabeçalho “Host” será usado para atender à solicitação.
      • Se nenhuma expressão regular correspondente for encontrada, o Nginx seleciona então o bloco de servidor padrão para aquele endereço IP e porta.

      Cada combinação de endereço IP/porta possui um bloco de servidor padrão que será usado quando um plano de ação não puder ser determinado com os métodos acima. Para uma combinação de endereço IP/porta, ele será o primeiro bloco na configuração ou o bloco que contém a opção default_server como parte da diretiva listen (que iria se sobrepor ao algoritmo encontrado por primeiro). Pode haver apenas uma declaração default_server para cada combinação de endereço IP/porta.

      Exemplos

      Se houver um server_name definido que corresponda exatamente ao valor de cabeçalho “Host”, o bloco de servidor é selecionado para processar a solicitação.

      Neste exemplo, se o cabeçalho “Host” da solicitação fosse definido como ”host1.example.com”, o segundo servidor seria selecionado:

      server {
          listen 80;
          server_name *.example.com;
      
          . . .
      
      }
      
      server {
          listen 80;
          server_name host1.example.com;
      
          . . .
      
      }
      

      Se nenhuma correspondência exata for encontrada, o Nginx então verifica se há um server_name com um curinga inicial que se encaixa. A correspondência mais longa que começa com um curinga será selecionada para atender à solicitação.

      Neste exemplo, se a solicitação tivesse um cabeçalho “Host” de ”www.example.org”, o segundo bloco de servidor seria selecionado:

      server {
          listen 80;
          server_name www.example.*;
      
          . . .
      
      }
      
      server {
          listen 80;
          server_name *.example.org;
      
          . . .
      
      }
      
      server {
          listen 80;
          server_name *.org;
      
          . . .
      
      }
      

      Se nenhuma correspondência for encontrada com um curinga inicial, o Nginx então verá se uma correspondência existe usando um curinga no final da expressão. Neste ponto, a correspondência mais longa que termina com um curinga será selecionada para atender à solicitação.

      Por exemplo, se a solicitação tiver um cabeçalho “Host” definido como ”www.example.com”, o terceiro bloco de servidor será selecionado:

      server {
          listen 80;
          server_name host1.example.com;
      
          . . .
      
      }
      
      server {
          listen 80;
          server_name example.com;
      
          . . .
      
      }
      
      server {
          listen 80;
          server_name www.example.*;
      
          . . .
      
      }
      

      Se nenhuma correspondência com curingas puder ser encontrada, o Nginx então seguirá adiante para tentar corresponder o termo com as diretivas do server_name que usam expressões regulares. A primeira expressão regular correspondente será selecionada para responder à solicitação.

      Por exemplo, se o cabeçalho “Host” da solicitação for definido como ”www.example.com”, então o segundo bloco de servidor será selecionado para satisfazer a solicitação:

      server {
          listen 80;
          server_name example.com;
      
          . . .
      
      }
      
      server {
          listen 80;
          server_name ~^(www|host1).*.example.com$;
      
          . . .
      
      }
      
      server {
          listen 80;
          server_name ~^(subdomain|set|www|host1).*.example.com$;
      
          . . .
      
      }
      

      Se nenhum dos passos acima for capaz de satisfazer a solicitação, então a solicitação será passada ao servidor padrão para o endereço IP e porta correspondentes.

      Fazendo correspondência de blocos de localização

      De maneira similar ao processo que o Nginx usa para selecionar o bloco de servidor que processará uma solicitação, o Nginx também possui um algoritmo estabelecido para decidir qual bloco de localização dentro do servidor usar para manusear solicitações.

      Sintaxe do bloco de localização

      Antes de abordarmos como o Nginx decide qual bloco de localização usar para manusear solicitações, vamos analisar algumas das sintaxes que podem ser vistas nas definições de blocos de localização. Os blocos de localização localizam-se dentro de blocos de servidor (ou outros blocos de localização) e são usados para decidir como processar o URI de solicitação (a parte da solicitação que vem após o nome de domínio ou endereço IP/porta).

      Os blocos de localização geralmente possuem a seguinte forma:

      location optional_modifier location_match {
      
          . . .
      
      }
      

      O location_match no exemplo acima define com o que o Nginx deve comparar o URI de solicitação. A existência ou não existência do modificador no exemplo acima afeta a maneira como o Nginx tenta corresponder o bloco de localização. Os modificadores abaixo farão com que o bloco de localização associado seja interpretado da seguinte forma:

      • (none): se nenhum modificador estiver presente, o local é interpretado como uma correspondência por prefixo. Isso significa que o local dado será comparado ao início do URI de solicitação para determinar se há correspondência.
      • =: se um sinal de igual for usado, o bloco será considerado uma correspondência se o URI de solicitação corresponder exatamente ao local dado.
      • ~: se um modificador til estiver presente, o local será interpretado como uma correspondência de expressão regular sensível a maiúsculas e minúsculas.
      • ~*: se um modificador de til e asterisco for usado, o bloco de localização será interpretado como uma correspondência de expressão regular que não diferencia maiúsculas de minúsculas.
      • ^~: se um modificador de acento circunflexo e til estiver presente, e se este bloco for selecionado como a melhor correspondência de expressão não regular, a correspondência de expressão regular não será realizada.

      Exemplos demonstrando a sintaxe do bloco de localização

      Como um exemplo de correspondência de prefixos, o bloco de localização a seguir pode ser selecionado para responder aos URIs de solicitação que se pareçam com /site, /site/page1/index.html ou /site/index.html:

      location /site {
      
          . . .
      
      }
      

      Para demonstrar a correspondência exata de URIs de solicitação, esse bloco será sempre usado para responder a um URI de solicitação que se pareça com /page1. Ele não será usado para responder a um URI de solicitação /page1/index.html. Lembre-se de que se esse bloco for selecionado e a solicitação for realizada usando uma página de índice, um redirecionamento interno será feito para outro local. Ele será o manuseador real da solicitação:

      location = /page1 {
      
          . . .
      
      }
      

      Como um exemplo de um local que deve ser interpretado como uma expressão regular sensível a maiúsculas e minúsculas, este bloco poderia ser usado para manusear solicitações para /tortoise.jpg, mas não para /FLOWER.PNG:

      location ~ .(jpe?g|png|gif|ico)$ {
      
          . . .
      
      }
      

      Um bloco que permitiria a correspondência sem diferenciar maiúsculas de minúsculas parecido com o exemplo acima é mostrado abaixo. Aqui, tanto /tortoise.jpg quanto /FLOWER.PNG poderiam ser manuseados por este bloco:

      location ~* .(jpe?g|png|gif|ico)$ {
      
          . . .
      
      }
      

      Por fim, este bloco impediria a ocorrência de correspondências de expressão regular se ele fosse escolhido como a melhor correspondência de expressão não regular. Ele poderia manusear solicitações para /costumes/ninja.html:

      location ^~ /costumes {
      
          . . .
      
      }
      

      Como se vê, os modificadores indicam como o bloco de localização deve ser interpretado. No entanto, isso não nos informa qual algoritmo o Nginx usa para decidir para qual bloco de localização enviar a solicitação. Vamos analisar isso a seguir.

      Como o Nginx escolhe qual localização usar para processar solicitações

      O Nginx escolhe o local que será usado para atender a uma solicitação de forma semelhante a como seleciona um bloco de servidor. Ele executa um processo que determina o melhor bloco de localização para qualquer solicitação. Entender esse processo é um requisito crucial para ser capaz de configurar o Nginx de maneira confiável e precisa.

      Tendo em mente os tipos de declaração de localização que descrevemos acima, o Nginx avalia os possíveis contextos de localização comparando o URI de solicitação com cada um dos locais. Ele faz isso usando o seguinte algoritmo:

      • O Nginx começa verificando todas as correspondências de localização baseadas em prefixos (todos os tipos de localização que não envolvem expressões regulares). Ele compara cada localização com o URI de solicitação completo.
      • Primeiramente, o Nginx procura por uma correspondência exata. Se um bloco de localização usando o modificador = for encontrado para corresponder exatamente ao URI de solicitação, este bloco de localização é selecionado imediatamente para atender à solicitação.
      • Se nenhuma correspondência exata de bloco de localização (com o modificador =) for encontrada, o Nginx então passa a avaliar prefixos não exatos. Ele descobre o prefixo de correspondência mais longo para um determinado URI de solicitação, que é então avaliado da seguinte forma:
        • Se o prefixo correspondente mais longo possuir o modificador ^~, então o Nginx imediatamente terminará sua pesquisa e selecionará esse local para atender à solicitação.
        • Se o prefixo correspondente mais longo não usar o modificador ^~, a correspondência é armazenada pelo Nginx por enquanto, para que o foco da pesquisa possa mudar.
      • Após o prefixo correspondente mais longo ser determinado e armazenado, o Nginx passa a avaliar as localizações de expressões regulares (tanto as que diferenciam, quanto as que não diferenciam letras maiúsculas de minúsculas). Se houver alguma localização de expressão regular dentro da localização do prefixo correspondente mais longo, o Nginx as moverá para o topo de sua lista de localizações de regex para verificação. Em seguida, o Nginx tenta fazer a correspondência com as localizações das expressões regulares sequencialmente. A primeira localização de expressão regular que corresponder ao URI de solicitação é selecionada imediatamente para atender à solicitação.
      • Se nenhuma localização de expressão regular que corresponda ao URI de solicitação for encontrada, a localização de prefixo armazenada anteriormente será selecionada para atender à solicitação.

      É importante entender que, por padrão, o Nginx atenderá correspondências por expressão regular preferencialmente em relação a correspondências por prefixo. No entanto, ele avalia primeiro as localizações de prefixos, permitindo que o administrador altere essa tendência especificando localizações usando os modificadores = e ^~.

      Também é importante notar que, embora as localizações de prefixo geralmente selecionarem com base na correspondência mais longa e específica, a avaliação de expressões regulares é interrompida quando a primeira localização correspondente é encontrada. Isso significa que o posicionamento dentro da configuração tem vastas implicações para as localizações de expressões regulares.

      Por fim, é importante entender que as correspondências por expressões regulares dentro da correspondência de prefixo mais longa “passam à frente” quando o Nginx avalia as localizações de regex. Elas serão avaliadas, por ordem, antes de qualquer uma das outras correspondências por expressão regular serem consideradas. Maxim Dounin, um desenvolvedor do Nginx incrivelmente prestativo, explica nesta postagem essa parte do algoritmo de seleção.

      Quando a avaliação de blocos de localização salta para outras localizações?

      De maneira geral, quando um bloco de localização é selecionado para atender a uma solicitação, a solicitação é manuseada inteiramente dentro desse contexto a partir daquele ponto. Apenas a localização selecionada e as diretivas herdadas determinam como a solicitação é processada, sem a interferência de blocos de localização irmãos.

      Embora essa seja uma regra geral que permite projetar seus blocos de localização de maneira previsível, é importante perceber que há momentos em que uma nova procura de localização é acionada por determinadas diretivas dentro da localização selecionada. As exceções à regra de “apenas um bloco de localização” podem ter implicações sobre como a solicitação é realmente atendida e podem não se alinhar com as expectativas que você tinha quando projetou seus blocos de localização.

      Algumas diretivas que podem levar a esse tipo de redirecionamento interno são:

      • index
      • try_files
      • rewrite
      • error_page

      Vamos analisa-los brevemente.

      A diretiva index sempre leva a um redirecionamento interno se for usada para processar a solicitação. As correspondências exatas de localização são frequentemente usadas para acelerar o processo de seleção por finalizarem imediatamente a execução do algoritmo. No entanto, se você fizer uma correspondência exata de localização que é um diretório, existe uma boa chance de a solicitação ser redirecionada para uma localização diferente para ser de fato processada.

      Neste exemplo, a primeira localização corresponde a um URI de solicitação /exact, mas, para manusear a solicitação, a diretiva index herdada pelo bloco inicia um redirecionamento interno para o segundo bloco:

      index index.html;
      
      location = /exact {
      
          . . .
      
      }
      
      location / {
      
          . . .
      
      }
      

      No caso acima, se fosse realmente necessário que a execução permanecesse no primeiro bloco, você precisaria escolher um método diferente para satisfazer a solicitação para o diretório. Por exemplo, você poderia definir um index inválido para esse bloco e ativar o autoindex:

      location = /exact {
          index nothing_will_match;
          autoindex on;
      }
      
      location  / {
      
          . . .
      
      }
      

      Essa é uma maneira de impedir que o index mude os contextos, mas provavelmente não é útil para a maioria das configurações. Geralmente, uma correspondência exata nos diretórios pode ser útil para coisas como reescrever a solicitação (que também resulta em uma nova pesquisa de localização).

      Outra situação onde a localização de processamento pode ser reavaliada é com a diretiva try_files. Essa diretiva diz ao Nginx para verificar a existência de um conjunto de arquivos ou diretórios nomeados. O último parâmetro pode ser um URI para o qual o Nginx fará um redirecionamento interno.

      Considere a configuração a seguir:

      root /var/www/main;
      location / {
          try_files $uri $uri.html $uri/ /fallback/index.html;
      }
      
      location /fallback {
          root /var/www/another;
      }
      

      No exemplo acima, se uma solicitação for feita para /blahblah, a primeira localização inicialmente receberá a solicitação. Ele tentará encontrar um arquivo chamado blahblah no diretório /var/www/main. Se ele não puder encontrar um, ele seguirá procurando por um arquivo chamado blahblah.html. Em seguida, ele tentará ver se há um diretório chamado blahblah/ dentro do diretório /var/www/main. Se todas essas tentativas falharem, ele redirecionará para /fallback/index.html. Isso desencadeará outra pesquisa de localização que será capturada pelo segundo bloco de localização. Isso atenderá o arquivo /var/www/another/fallback/index.html.

      Outra diretiva que pode levar a uma mudança de bloco de localização é a rewrite. Quando se usa o último parâmetro com a diretiva rewrite, ou quando não se usa nenhum parâmetro, o Nginx procurará uma nova localização correspondente com base nos resultados de rewrite.

      Por exemplo, se modificarmos o último exemplo para incluir uma rewrite, é possível ver que a solicitação às vezes é passada diretamente para a segunda localização sem depender da diretiva try_files:

      root /var/www/main;
      location / {
          rewrite ^/rewriteme/(.*)$ /$1 last;
          try_files $uri $uri.html $uri/ /fallback/index.html;
      }
      
      location /fallback {
          root /var/www/another;
      }
      

      No exemplo acima, uma solicitação para /rewriteme/hello será manuseada inicialmente por um primeiro bloco de localização. Ela será reescrita para /hello e uma localização será pesquisada. Neste caso, ela corresponderá novamente à primeira localização e será processada pelo try_files como de costume, talvez retornando para /fallback/index.html se nada for encontrado (usando o redirecionamento interno do try_files que discutimos acima).

      No entanto, se uma solicitação for feita para /rewriteme/fallback/hello, o primeiro bloco novamente corresponderá. A diretiva rewrite é aplicada novamente, dessa vez resultando em /fallback/hello. A solicitação será então atendida a partir do segundo bloco de localização.

      Uma situação relacionada acontece com a diretiva return ao enviar os códigos de status 301 ou 302. Neste caso, a diferença é que isso resulta em uma solicitação inteiramente nova na forma de um redirecionamento visível externamente. Essa mesma situação pode ocorrer com a diretiva rewrite ao usar os sinalizadores redirect ou permanent. No entanto, essas pesquisas de localização não devem ser inesperadas, uma vez que os redirecionamentos visíveis externamente sempre resultam em uma nova solicitação.

      A diretiva error_page pode levar a um redirecionamento interno parecido com aquele criado por try_files. Essa diretiva é usada para definir o que deve acontecer quando certos códigos de status são encontrados. Isso provavelmente nunca será executado se o try_files estiver definido, já que essa diretiva manuseia todo o ciclo de vida de uma solicitação.

      Considere este exemplo:

      root /var/www/main;
      
      location / {
          error_page 404 /another/whoops.html;
      }
      
      location /another {
          root /var/www;
      }
      

      Todas as solicitações (que não sejam aquelas que começam com /another) serão manuseadas pelo primeiro bloco, que atenderá arquivos em /var/www/main. No entanto, se um arquivo não for encontrado (um status 404), um redirecionamento interno para /another/whoops.html ocorrerá, levando a uma nova pesquisa de localização que eventualmente chegará no segundo bloco. Este arquivo será atendido por /var/www/another/whoops.html.

      Como se vê, entender as circunstâncias nas quais o Nginx aciona uma nova pesquisa de localização pode ajudar a prever o comportamento que você verá ao fazer solicitações.

      Conclusão

      Compreender as maneiras como o Nginx processa as solicitações de clientes pode tornar seu trabalho como um administrador muito mais fácil. Você será capaz de saber qual bloco de servidor o Nginx selecionará com base em cada solicitação de cliente. Você também será capaz de dizer como o bloco de localização será selecionado com base no URI de solicitação. De maneira geral, saber como o Nginx seleciona diferentes blocos lhe dará a capacidade de rastrear os contextos que o Nginx aplicará para atender a cada solicitação.



      Source link

      Entendendo as sintaxes de desestruturação, parâmetros rest e espalhamento em JavaScript


      O autor selecionou a COVID-19 Relief Fund​​​​​ para receber uma doação como parte do programa Write for DOnations.

      Introdução

      Muitas novas funcionalidades para trabalhar com matrizes e objetos foram disponibilizadas para a linguagem JavaScript desde a Edição de 2015 da especificação ECMAScript. Alguns dos elementos notáveis que você aprenderá neste artigo são a desestruturação, os parâmetros rest e a sintaxe de espalhamento. Esses recursos nos dão maneiras mais diretas de acessar os membros de uma matriz ou objeto, e podem tornar o trabalho com essas estruturas de dados mais rápido e sucinto.

      Muitas outras linguagens não possuem sintaxes correspondentes para a desestruturação, parâmetros rest e espalhamento. Por este motivo, esses recursos podem ter uma curva de aprendizado tanto para novos desenvolvedores JavaScript quanto para aqueles que estejam vindo de outra linguagem. Neste artigo, você aprenderá como desestruturar objetos e matrizes, como usar o operador de espalhamento para descompactar objetos e matrizes e como usar os parâmetros rest em chamadas de função.

      Desestruturação

      A atribuição de desestruturação é uma sintaxe que permite que você atribua propriedades de objetos ou itens de matrizes como variáveis. Isso pode reduzir de maneira significativa as linhas de código necessárias para manipular dados nessas estruturas. Existem dois tipos de desestruturação: a desestruturação de objetos e a desestruturação de matrizes.

      Desestruturação de objetos

      A desestruturação de objetos permite que você crie novas variáveis usando uma propriedade de objeto como o valor.

      Considere este exemplo, onde um objeto que representa uma nota com um id, title e date:

      const note = {
        id: 1,
        title: 'My first note',
        date: '01/01/1970',
      }
      

      Tradicionalmente, se você quisesse criar uma nova variável para cada propriedade, você teria que atribuir cada variável individualmente, com muitas repetições:

      // Create variables from the Object properties
      const id = note.id
      const title = note.title
      const date = note.date
      

      Com a desestruturação de objetos, tudo isso pode ser feito em uma linha. Ao colocar cada variável entre chaves {}, o JavaScript criará novas variáveis a partir de cada propriedade com o mesmo nome:

      // Destructure properties into variables
      const { id, title, date } = note
      

      Agora, use o console.log() nas novas variáveis:

      console.log(id)
      console.log(title)
      console.log(date)
      

      Você receberá os valores originais das propriedades como resultado:

      Output

      1 My first note 01/01/1970

      Nota: a desestruturação de objetos não modifica o objeto original. Você ainda pode chamar a note (nota) original com todas as entradas intactas.

      A atribuição padrão para a desestruturação de objetos cria novas variáveis com o mesmo nome que a propriedade do objeto. Se você não quiser que a nova variável tenha o mesmo nome que o nome da propriedade, você também tem a opção de renomear a nova variável usando dois pontos (:) para decidir um novo nome, como visto com o noteId no seguinte exemplo:

      // Assign a custom name to a destructured value
      const { id: noteId, title, date } = note
      

      Registre a nova variável noteId no console:

      console.log(noteId)
      

      Você receberá o seguinte resultado:

      Output

      1

      Você também pode desestruturar valores aninhados de objetos. Por exemplo, atualize o objeto note para que tenha um objeto aninhado author:

      const note = {
        id: 1,
        title: 'My first note',
        date: '01/01/1970',
        author: {
          firstName: 'Sherlock',
          lastName: 'Holmes',
        },
      }
      

      Agora, você pode desestruturar o note, então desestruturar novamente para criar variáveis a partir das propriedades de author:

      // Destructure nested properties
      const {
        id,
        title,
        date,
        author: { firstName, lastName },
      } = note
      

      Em seguida, registre as novas variáveis firstName e lastName usando os template literals:

      console.log(`${firstName} ${lastName}`)
      

      Isso dará o seguinte resultado:

      Output

      Sherlock Holmes

      Observe que neste exemplo, embora você tenha acesso ao conteúdo do objeto author, o objeto author em si não está acessível. Para acessar um objeto, bem como seus valores aninhados, você teria que declará-los separadamente:

      // Access object and nested values
      const {
        author,
        author: { firstName, lastName },
      } = note
      
      console.log(author)
      

      Este código irá gerar o objeto author como resultado:

      Output

      {firstName: "Sherlock", lastName: "Holmes"}

      Desestruturar um objeto é útil não apenas para reduzir a quantidade de código que você precisa escrever, mas também permite que você mire seu acesso nas propriedades que julga importantes.

      Por fim, a desestruturação pode ser utilizada para acessar as propriedades de objetos de valores primitivos. Por exemplo, String é um objeto global para strings e possui uma propriedade length (comprimento):

      const { length } = 'A string'
      

      Isso encontrará a propriedade de comprimento inerente de uma string e a definirá como sendo igual à variável length. Registre length para ver se o processo funcionou:

      console.log(length)
      

      Você receberá o seguinte resultado:

      Output

      8

      Aqui, a string A string foi implicitamente convertida em um objeto para recuperar a propriedade length.

      Desestruturação de matrizes

      A desestruturação de matrizes permite que você crie novas variáveis usando um item de uma matriz como valor. Considere este exemplo, onde há uma matriz com as várias partes de uma data:

      const date = ['1970', '12', '01']
      

      As matrizes em JavaScript garantem a preservação de sua ordem. Dessa forma, neste caso, o primeiro índice será sempre um ano, o segundo será o mês e assim por diante. Sabendo isso, você pode criar variáveis a partir dos itens da matriz:

      // Create variables from the Array items
      const year = date[0]
      const month = date[1]
      const day = date[2]
      

      Apesar disso, fazer isso manualmente pode tomar muito espaço do seu código. Com a desestruturação da matriz, você pode descompactar os valores da matriz em ordem e atribuí-los às suas próprias variáveis, desta forma:

      // Destructure Array values into variables
      const [year, month, day] = date
      

      Agora, registre as novas variáveis:

      console.log(year)
      console.log(month)
      console.log(day)
      

      Você receberá o seguinte resultado:

      Output

      1970 12 01

      Os valores podem ser ignorados deixando a sintaxe de desestruturação em branco entre vírgulas:

      // Skip the second item in the array
      const [year, , day] = date
      
      console.log(year)
      console.log(day)
      

      Ao executar isso, você receberá o valor de year (ano) e day (dia):

      Output

      1970 01

      As matrizes aninhadas também podem ser desestruturadas. Primeiro, crie uma matriz aninhada:

      // Create a nested array
      const nestedArray = [1, 2, [3, 4], 5]
      

      Em seguida, desestruture aquela matriz e registre as novas variáveis:

      // Destructure nested items
      const [one, two, [three, four], five] = nestedArray
      
      console.log(one, two, three, four, five)
      

      Você receberá o seguinte resultado:

      Output

      1 2 3 4 5

      A sintaxe de desestruturação pode ser aplicada na desestruturação dos parâmetros em uma função. Para testar isso, você irá desestruturar as keys (chaves) e values (valores) do Object.entries().

      Primeiro, declare o objeto de note:

      const note = {
        id: 1,
        title: 'My first note',
        date: '01/01/1970',
      }
      

      Dado este objeto, você poderia listar os pares de chave de valor através da desestruturação de argumentos à medida em que eles são passados ao método forEach():

      // Using forEach
      Object.entries(note).forEach(([key, value]) => {
        console.log(`${key}: ${value}`)
      })
      

      Ou você poderia alcançar o mesmo resultado usando um loop for:

      // Using a for loop
      for (let [key, value] of Object.entries(note)) {
        console.log(`${key}: ${value}`)
      }
      

      De qualquer maneira, você receberá o seguinte:

      Output

      id: 1 title: My first note date: 01/01/1970

      A desestruturação de objetos e de matrizes podem ser combinadas em uma única atribuição de desestruturação. Os parâmetros padrão também podem ser usados com a desestruturação, como visto no exemplo a seguir que define a data como new Date().

      Primeiro, declare o objeto de note:

      const note = {
        title: 'My first note',
        author: {
          firstName: 'Sherlock',
          lastName: 'Holmes',
        },
        tags: ['personal', 'writing', 'investigations'],
      }
      

      Em seguida, desestruture o objeto, ao mesmo tempo em que você também define uma nova variável date com o padrão de new Date():

      const {
        title,
        date = new Date(),
        author: { firstName },
        tags: [personalTag, writingTag],
      } = note
      
      console.log(date)
      

      Então, o console.log(date) gerará um resultado semelhante ao seguinte:

      Output

      Fri May 08 2020 23:53:49 GMT-0500 (Central Daylight Time)

      Como mostrado nesta seção, a sintaxe de atribuição de desestruturação adiciona muita flexibilidade ao JavaScript e permite que você escreva códigos mais sucintos. Na próxima seção, você verá como a sintaxe de espalhamento pode ser utilizada para expandir estruturas de dados nas entradas de dados constituintes.

      Espalhamento

      A sintaxe de espalhamento (...) é outra adição ao JavaScript bastante útil para trabalhar com matrizes, objetos e chamadas de função. O espalhamento permite que objetos e iteráveis (como matrizes) sejam descompactados ou expandidos. Isso pode ser usado para fazer cópias superficiais de estruturas de dados para facilitar a manipulação de dados.

      Espalhamento com matrizes

      O espalhamento simplifica as tarefas comuns com matrizes. Por exemplo, vamos supor que você tenha duas matrizes e deseja combiná-las:

      // Create an Array
      const tools = ['hammer', 'screwdriver']
      const otherTools = ['wrench', 'saw']
      

      Originalmente, você usaria o concat() para concatenar as duas matrizes:

      // Concatenate tools and otherTools together
      const allTools = tools.concat(otherTools)
      

      Agora, você também pode usar o espalhamento para descompactar as matrizes em uma nova matriz:

      // Unpack the tools Array into the allTools Array
      const allTools = [...tools, ...otherTools]
      
      console.log(allTools)
      

      Executar isso resultaria no seguinte:

      Output

      ["hammer", "screwdriver", "wrench", "saw"]

      Isso pode ser particularmente útil com a imutabilidade. Por exemplo, você poderia estar trabalhando com um app que possui users (usuários) armazenados em uma matriz de objetos:

      // Array of users
      const users = [
        { id: 1, name: 'Ben' },
        { id: 2, name: 'Leslie' },
      ]
      

      Você poderia usar o push para modificar a matriz existente e adicionar um novo usuário, o que seria a opção mutável:

      // A new user to be added
      const newUser = { id: 3, name: 'Ron' }
      
      users.push(newUser)
      

      Mas isso altera a matriz user, que pode ser que queiramos preservar.

      O espalhamento permite que você crie uma nova matriz a partir de uma existente e adicione um novo item no final:

      const updatedUsers = [...users, newUser]
      
      console.log(users)
      console.log(updatedUsers)
      

      Agora, a nova matriz updatedUsers possui o novo usuário, mas a matriz users original permanece inalterada:

      Output

      [{id: 1, name: "Ben"} {id: 2, name: "Leslie"}] [{id: 1, name: "Ben"} {id: 2, name: "Leslie"} {id: 3, name: "Ron"}]

      Criar cópias de dados em vez de alterar dados existentes ajuda a evitar alterações inesperadas. Em JavaScript, quando você cria um objeto ou matriz e a atribui a outra variável, você não está criando, de fato, um novo objeto — você está passando uma referência.

      Observe este exemplo, onde uma matriz é criada e atribuída a outra variável:

      // Create an Array
      const originalArray = ['one', 'two', 'three']
      
      // Assign Array to another variable
      const secondArray = originalArray
      

      Remover o último item da segunda matriz modificará o primeiro:

      // Remove the last item of the second Array
      secondArray.pop()
      
      console.log(originalArray)
      

      Isso dará o resultado:

      Output

      ["one", "two"]

      O espalhamento permite que você crie uma cópia superficial de uma matriz ou objeto. Isso significa que qualquer propriedade de nível superior será clonada, mas objetos aninhados ainda serão passados por referência. Para matrizes ou objetos simples, uma cópia superficial pode ser tudo o que você precisa.

      Se você escrever o mesmo código de exemplo, mas copiar a matriz com o espalhamento, a matriz original não será mais modificada:

      // Create an Array
      const originalArray = ['one', 'two', 'three']
      
      // Use spread to make a shallow copy
      const secondArray = [...originalArray]
      
      // Remove the last item of the second Array
      secondArray.pop()
      
      console.log(originalArray)
      

      O seguinte ficará registrado no console:

      Output

      ["one", "two", "three"]

      O espalhamento também pode ser usado para converter um conjunto, ou qualquer outro iterável em uma matriz.

      Crie um novo conjunto e adicione algumas entradas a ele:

      // Create a set
      const set = new Set()
      
      set.add('octopus')
      set.add('starfish')
      set.add('whale')
      

      Em seguida, utilize o operador de espalhamento com o set (conjunto) e registre os resultados:

      // Convert Set to Array
      const seaCreatures = [...set]
      
      console.log(seaCreatures)
      

      Isso resultará no seguinte:

      Output

      ["octopus", "starfish", "whale"]

      Isso também pode ser útil para criar uma matriz a partir de uma string:

      const string = 'hello'
      
      const stringArray = [...string]
      
      console.log(stringArray)
      

      Isso resultará em uma matriz com cada caractere sendo um item na matriz:

      Output

      ["h", "e", "l", "l", "o"]

      Espalhamento com objetos

      Ao trabalhar com objetos, o espalhamento pode ser usado para copiar e atualizar objetos.

      Originalmente, o Object.assign() era usado para copiar um objeto:

      // Create an Object and a copied Object with Object.assign()
      const originalObject = { enabled: true, darkMode: false }
      const secondObject = Object.assign({}, originalObject)
      

      O secondObject será agora um clone do originalObject.

      Isso é simplificado com a sintaxe de espalhamento — você pode copiar um objeto superficialmente, espalhando-o em um novo:

      // Create an object and a copied object with spread
      const originalObject = { enabled: true, darkMode: false }
      const secondObject = { ...originalObject }
      
      console.log(secondObject)
      

      Isso dará como resultado o seguinte:

      Output

      {enabled: true, darkMode: false}

      Assim como com matrizes, isso criará apenas uma cópia superficial e objetos aninhados ainda serão passados por referência.

      Adicionar ou modificar propriedades em um objeto existente de maneira imutável torna-se mais simplificado com o espalhamento. Neste exemplo, a propriedade isLoggedIn é adicionada ao objeto user:

      const user = {
        id: 3,
        name: 'Ron',
      }
      
      const updatedUser = { ...user, isLoggedIn: true }
      
      console.log(updatedUser)
      

      Isso irá mostrar o seguinte:

      Output

      {id: 3, name: "Ron", isLoggedIn: true}

      Uma coisa importante a se notar com a atualização de objetos através do espalhamento é que qualquer objeto aninhado também terá que ser espalhado. Por exemplo, vamos supor que no objeto user existe um objeto organization aninhado:

      const user = {
        id: 3,
        name: 'Ron',
        organization: {
          name: 'Parks & Recreation',
          city: 'Pawnee',
        },
      }
      

      Se você tentasse adicionar um novo item ao organization, ele substituiria os campos existentes:

      const updatedUser = { ...user, organization: { position: 'Director' } }
      
      console.log(updatedUser)
      

      Isso resultaria no seguinte:

      Output

      id: 3 name: "Ron" organization: {position: "Director"}

      Se a mutabilidade não for um problema, o campo poderia ser atualizado diretamente:

      user.organization.position = 'Director'
      

      Mas como estamos buscando uma solução imutável, podemos espalhar o objeto interno para reter as propriedades existentes:

      const updatedUser = {
        ...user,
        organization: {
          ...user.organization,
          position: 'Director',
        },
      }
      
      console.log(updatedUser)
      

      Isso resultará no seguinte:

      Output

      id: 3 name: "Ron" organization: {name: "Parks & Recreation", city: "Pawnee", position: "Director"}

      Espalhamento com chamadas de função

      O espalhamento também pode ser usado com argumentos em chamadas de função.

      Como um exemplo, aqui está uma função multiply que recebe três parâmetros e os multiplica:

      // Create a function to multiply three items
      function multiply(a, b, c) {
        return a * b * c
      }
      

      Normalmente, você passaria três valores individualmente como argumentos para a chamada de função, desta forma:

      multiply(1, 2, 3)
      

      Isso resultaria no seguinte:

      Output

      6

      No entanto, se todos os valores que você deseja passar para a função já existirem em uma matriz, a sintaxe de espalhamento permitirá que você utilize cada item em uma matriz como um argumento:

      const numbers = [1, 2, 3]
      
      multiply(...numbers)
      

      Isso gerará o mesmo resultado:

      Output

      6

      Nota: sem o espalhamento, isso pode ser feito usando o apply():

      multiply.apply(null, [1, 2, 3])
      

      Isso dará:

      Output

      6

      Agora que você viu como o espalhamento pode encurtar seu código, dê uma olhada em um outro uso da sintaxe ...: os parâmetros rest.

      Parâmetros rest

      O último recurso que você aprenderá neste artigo é a sintaxe do parâmetro rest. A sintaxe aparece da mesma forma que o espalhamento (...) mas possui o efeito oposto. Ao invés de descompactar uma matriz ou objeto em valores individuais, a sintaxe do rest criará uma matriz de um número de argumentos indefinido.

      Na função restTest por exemplo, se quiséssemos que o args fosse uma matriz composta por um número de argumentos indefinido, poderíamos ter o seguinte:

      function restTest(...args) {
        console.log(args)
      }
      
      restTest(1, 2, 3, 4, 5, 6)
      

      Todos os argumentos passados para a função restTest estão agora disponíveis na matriz args:

      Output

      [1, 2, 3, 4, 5, 6]

      A sintaxe rest pode ser usada como o único parâmetro ou como o último parâmetro na lista. Se usada como único parâmetro, ela reunirá todos os argumentos. No entanto, se for usada no final de uma lista, ela reunirá todos os argumentos remanescentes, como visto neste exemplo:

      function restTest(one, two, ...args) {
        console.log(one)
        console.log(two)
        console.log(args)
      }
      
      restTest(1, 2, 3, 4, 5, 6)
      

      Isso pegará os dois primeiros argumentos individualmente. Em seguida, agrupará o restante em uma matriz:

      Output

      1 2 [3, 4, 5, 6]

      Em código mais antigo, a variável arguments poderia ser usada para reunir todos os argumentos passados para uma função:

      function testArguments() {
        console.log(arguments)
      }
      
      testArguments('how', 'many', 'arguments')
      

      O resultaria no seguinte:

      Output

      1Arguments(3) ["how", "many", "arguments"]

      No entanto, isso possui algumas desvantagens. Primeiro, a variável arguments não pode ser usada com funções de flecha.

      const testArguments = () => {
        console.log(arguments)
      }
      
      testArguments('how', 'many', 'arguments')
      

      Isso geraria um erro:

      Output

      Uncaught ReferenceError: arguments is not defined

      Além disso, arguments não é uma matriz verdadeira e não pode usar métodos como map e filter sem que seja primeiro convertida em uma matriz. Ela também irá coletar todos os argumentos passados em vez de apenas o restante dos argumentos, como visto no exemplo restTest(one, two, ...args).

      Os parâmetros rest também podem ser usados na desestruturação de matrizes:

      const [firstTool, ...rest] = ['hammer', 'screwdriver', 'wrench']
      
      console.log(firstTool)
      console.log(rest)
      

      Isso dará:

      Output

      hammer ["screwdriver", "wrench"]

      Os parâmetros rest também podem ser usados na desestruturação de objetos:

      const { isLoggedIn, ...rest } = { id: 1, name: 'Ben', isLoggedIn: true }
      
      console.log(isLoggedIn)
      console.log(rest)
      

      Gerando o seguinte resultado:

      Output

      true {id: 1, name: "Ben"}

      Desta forma, a sintaxe rest fornece métodos eficientes para reunir uma quantidade indeterminada de itens.

      Conclusão

      Neste artigo, você aprendeu sobre desestruturação, sintaxe de espalhamento e parâmetros rest. Resumindo:

      • A desestruturação é utilizada para criar variáveis a partir dos itens de matrizes ou propriedades de objetos.
      • A sintaxe de espalhamento é usada para descompactar iteráveis como matrizes, objetos e chamadas de função.
      • A sintaxe do parâmetro rest criará uma matriz a partir de um número indefinido de valores.

      As sintaxes de desestruturação, parâmetros rest e espalhamento são recursos úteis no JavaScript que ajudam a manter seu código sucinto e limpo.

      Se você quiser ver a desestruturação em ação, dê uma olhada em Como personalizar componentes React com o Props, que utiliza essa sintaxe para desestruturar dados e passá-los para componentes personalizados de front-end. Se você quiser aprender mais sobre o JavaScript, retorne para nossa página da série Como programar em JavaScript.



      Source link

      Entendendo os parâmetros predefinidos em JavaScript


      O autor selecionou a COVID-19 Relief Fund​​​​​ para receber uma doação como parte do programa Write for DOnations.

      Introdução

      No ECMAScript 2015, os parâmetros predefinidos de funções introduzidos na linguagem JavaScript. Eles permitem que os desenvolvedores inicializem uma função com valores predefinidos, caso os argumentos não sejam fornecidos à chamada da função. Inicializar parâmetros de função desta maneira tornará a leitura delas mais fácil e menos propensa a erros. Além disso, isso providencia um comportamento padrão para elas Isso ajudará você a evitar erros decorrentes da passagem de argumentos undefined (não definidos) e desestruturação de objetos que não existem.

      Neste artigo, você irá revisar a diferença entre parâmetros e argumentos, aprender como usar os parâmetros predefinidos em funções, ver maneiras alternativas para dar suporte aos parâmetros predefinidos, além de aprender quais tipos de valores e expressões podem ser usados como parâmetros predefinidos. Você também verá exemplos que demonstram como os parâmetros predefinidos funcionam em JavaScript.

      Argumentos e parâmetros

      Antes de explicar os parâmetros predefinidos de funções, é importante saber o que esses parâmetros podem usar como predefinição. Por isso, vamos primeiro analisar a diferença entre argumentos e parâmetros em uma função. Se quiser aprender mais sobre essa distinção, verifique nosso artigo anterior da série JavaScript, Como definir funções em JavaScript.

      No bloco de código seguinte, você criará uma função que retorna o cubo de um número determinado, definido como x:

      // Define a function to cube a number
      function cube(x) {
        return x * x * x
      }
      

      A variável x neste exemplo é um parâmetro — uma variável com nome passada para uma função. Um parâmetro deve estar sempre contido em uma variável e nunca deve possuir um valor direto.

      Agora, dê uma olhada neste próximo bloco de código, que chama a função cube (cubo) que você acabou de criar:

      // Invoke cube function
      cube(10)
      

      Isso dará o seguinte resultado:

      Output

      1000

      Neste caso, 10 é um argumento: um valor passado para uma função quando ela é invocada. Muitas vezes, o valor também estará contido em uma variável, como neste próximo exemplo:

      // Assign a number to a variable
      const number = 10
      
      // Invoke cube function
      cube(number)
      

      Isso gerará o mesmo resultado:

      Output

      1000

      Se você não passar um argumento para uma função que espere um, a função utilizará implicitamente undefined como o valor:

      // Invoke the cube function without passing an argument
      cube()
      

      Isso retornará:

      Output

      NaN

      Neste caso, cube() está tentando calcular o valor de undefined * undefined * undefined, que resulta em NaN, ou “not a number” (não é um número). Para obter mais informações sobre isso, consulte a seção de números do Entendendo tipos de dados em JavaScript.

      Às vezes, esse comportamento automático pode causar problemas. Em alguns casos, você pode querer que o parâmetro tenha um valor, mesmo se nenhum argumento tiver sido passado para a função. São nesse casos em que a funcionalidade de parâmetros predefinidos vem a calhar, um tópico que será abordado na próxima seção.

      Sintaxe dos parâmetros predefinidos

      Com a adição dos parâmetros predefinidos no ES2015, você pode agora atribuir um valor predefinido para qualquer parâmetro. A função utilizará esse valor, ao invés de undefined quando chamada sem um argumento. Esta seção mostrará primeiro como fazer isso manualmente. Em seguida, irá guiar você na definição de parâmetros predefinidos.

      Sem os parâmetros predefinidos, você teria que verificar explicitamente se há valores undefined para definir os padrões, como mostrado neste exemplo:

      // Check for undefined manually
      function cube(x) {
        if (typeof x === 'undefined') {
          x = 5
        }
      
        return x * x * x
      }
      
      cube()
      

      Ele utiliza uma instrução condicional para verificar se o valor foi provisionado automaticamente como undefined. Em seguida, define o valor de x como 5. Isso resultará no seguinte:

      Output

      125

      Em contrapartida, usar os parâmetros predefinidos atinge o mesmo objetivo com um código muito menor. Defina um valor predefinido para o parâmetro em cube, atribuindo-lhe o operador de atribuição de igualdade (=), como destacado aqui:

      // Define a cube function with a default value
      function cube(x = 5) {
        return x * x * x
      }
      

      Agora, quando a função cube for invocada sem um argumento, ela atribuirá 5 a x e retornará o cálculo ao invés de NaN:

      // Invoke cube function without an argument
      cube()
      

      Output

      125

      Ela ainda funcionará como previsto quando um argumento for passado, ignorando o valor predefinido:

      // Invoke cube function with an argument
      cube(2)
      

      Output

      8

      No entanto, um ponto negativo importante a se considerar é que o valor predefinido do parâmetro também substituirá um undefined explicitamente passado como um argumento para uma função, como demonstrado aqui:

      // Invoke cube function with undefined
      cube(undefined)
      

      Isso resultará no cálculo com x igual a 5:

      Output

      125

      Neste caso, os valores predefinidos dos parâmetros foram calculados, e um valor undefined explícito não os substituíram.

      Agora que você tem uma ideia da sintaxe básica dos parâmetros predefinidos, a próxima seção mostrará como os parâmetros predefinidos funcionam com diferentes tipos de dados.

      Tipos de dados dos parâmetros predefinidos

      Qualquer valor primitivo ou objeto pode ser usado como um valor predefinido do parâmetro. Nesta seção, você verá como essa flexibilidade aumenta as maneiras como os parâmetros predefinidos podem ser usados.

      Primeiro, defina os parâmetros usando um número, string, booleano, objeto, matriz e valor nulo como um valor predefinido. Este exemplo utilizará a sintaxe arrow function:

      // Create functions with a default value for each data type
      const defaultNumber = (number = 42) => console.log(number)
      const defaultString = (string = 'Shark') => console.log(string)
      const defaultBoolean = (boolean = true) => console.log(boolean)
      const defaultObject = (object = { id: 7 }) => console.log(object)
      const defaultArray = (array = [1, 2, 3]) => console.log(array)
      const defaultNull = (nullValue = null) => console.log(nullValue)
      

      Quando essas funções forem invocadas sem parâmetros, elas usarão todos os valores predefinidos:

      // Invoke each function
      defaultNumber()
      defaultString()
      defaultBoolean()
      defaultObject()
      defaultArray()
      defaultNull()
      

      Output

      42 "Shark" true {id: 7} (3) [1, 2, 3] null

      Note que qualquer objeto criado em um parâmetro predefinido será criado sempre que a função for chamada. Um dos casos de uso comum para os parâmetros predefinidos é o uso deste comportamento para obter valores de um objeto. Se você tentar desestruturar ou acessar um valor de um objeto que não existe, ele emitirá um erro. No entanto, se o parâmetro predefinido for um objeto vazio, ele simplesmente retornará valores undefined, ao invés de emitir um erro:

      // Define a settings function with a default object
      function settings(options = {}) {
        const { theme, debug } = options
      
        // Do something with settings
      }
      

      Isso evitará erros causados pela desestruturação de objetos que não existem.

      Agora que você viu como os parâmetros predefinidos operam com diferentes tipos de dados, a próxima seção explicará como vários parâmetros predefinidos podem funcionar em conjunto.

      Usando multiplos parâmetros predefinidos

      Use quantos parâmetros predefinidos quiser em uma função. Esta seção mostrará como fazê-lo e como usar isso para manipular o DOM em um exemplo real.

      Primeiro, declare uma função sum() com múltiplos parâmetros predefinidos:

      // Define a function to add two values
      function sum(a = 1, b = 2) {
        return a + b
      }
      
      sum()
      

      Isso resultará no cálculo predefinido a seguir:

      Output

      3

      Além disso, o valor usado em um parâmetro pode ser usado em qualquer parâmetro predefinido subsequente, da esquerda para a direita. Por exemplo, esta função createUser cria um objeto de usuário userObj como sendo o terceiro parâmetro e tudo o que a função faz é retornar userObj com os dois primeiros parâmetros:

      // Define a function to create a user object using parameters
      function createUser(name, rank, userObj = { name, rank }) {
        return userObj
      }
      
      // Create user
      const user = createUser('Jean-Luc Picard', 'Captain')
      

      Se você chamar o user aqui, você receberá o seguinte:

      Output

      {name: "Jean-Luc Picard", rank: "Captain"}

      Geralmente, é recomendável colocar todos os parâmetros predefinidos no final de uma lista de parâmetros, para que você possa deixar de fora valores opcionais facilmente. Se você usar um parâmetro predefinido primeiro, você terá que passar explicitamente undefined para usar o valor predefinido.

      Aqui está um exemplo com o parâmetro predefinido no início da lista:

      // Define a function with a default parameter at the start of the list
      function defaultFirst(a = 1, b) {
        return a + b
      }
      

      Ao chamar esta função, você teria que chamar o defaultFirst() com dois argumentos:

      defaultFirst(undefined, 2)
      

      Isso resultaria no seguinte:

      Output

      3

      Aqui está um exemplo com o parâmetro predefinido no final da lista:

      // Define a function with a default parameter at the end of the list
      function defaultLast(a, b = 1) {
        return a + b
      }
      
      defaultLast(2)
      

      Isso resultaria no mesmo valor:

      Output

      3

      Ambas as funções têm o mesmo resultado, mas aquela com o valor predefinido por último resulta em uma chamada de função muito mais limpa.

      Para um exemplo real, aqui está uma função que criará um elemento DOM e adicionará um rótulo de texto e classes, caso existam.

      // Define function to create an element
      function createNewElement(tag, text, classNames = []) {
        const el = document.createElement(tag)
        el.textContent = text
      
        classNames.forEach(className => {
          el.classList.add(className)
        })
      
        return el
      }
      

      Chame a função com algumas classes em uma matriz:

      const greeting = createNewElement('p', 'Hello!', ['greeting', 'active'])
      

      Chamar greeting resultará no valor a seguir:

      Output

      <p class="greeting active">Hello!</p>

      No entanto, se você deixar a matriz classNames fora da chamada da função, ela ainda funcionará.

      const greeting2 = createNewElement('p', 'Hello!')
      

      greeting2 tem agora o valor a seguir:

      Output

      <p>Hello!</p>

      Neste exemplo, o forEach() pode ser usado em uma matriz vazia sem problemas. Se aquela matriz vazia não fosse definida no parâmetro predefinido, você receberia o erro a seguir:

      Output

      VM2673:5 Uncaught TypeError: Cannot read property 'forEach' of undefined at createNewElement (<anonymous>:5:14) at <anonymous>:12:18

      Agora que você viu como multiplos parâmetros predefinidos podem interagir, continue para a próxima seção para ver como as chamadas de função funcionam como parâmetros predefinidos.

      Chamadas de função como parâmetros predefinidos

      Além dos primitivos e objetos, o resultado de chamar uma função pode ser usado como parâmetro predefinido.

      Neste bloco de código, você criará uma função para retornar um número aleatório e, em seguida, usará o resultado como o valor predefinido de parâmetro em uma função cube:

      // Define a function to return a random number from 1 to 10
      function getRandomNumber() {
        return Math.floor(Math.random() * 10)
      }
      
      // Use the random number function as a default parameter for the cube function
      function cube(x = getRandomNumber()) {
        return x * x * x
      }
      

      Agora, invocar a função cube sem um parâmetro vai gerar resultados potencialmente diferentes sempre que você chamá-la:

      // Invoke cube function twice for two potentially different results
      cube()
      cube()
      

      Os resultados destas chamadas de função variará:

      Output

      512 64

      Você pode até mesmo usar métodos integrados, como aqueles presentes no objeto Math, e usar o valor retornado em uma chamada de função como um parâmetro em outra função.

      No exemplo a seguir, um número aleatório é atribuído a x, que é usado como parâmetro na função cube que você criou. Em seguida, o parâmetro y calculará a raiz cúbica do número e verificará para ver se x e y são iguais:

      // Assign a random number to x
      // Assign the cube root of the result of the cube function and x to y
      function doesXEqualY(x = getRandomNumber(), y = Math.cbrt(cube(x))) {
        return x === y
      }
      
      doesXEqualY()
      

      Isso resultará no seguinte:

      Output

      true

      Um parâmetro predefinido pode até ser uma definição de função, como visto neste exemplo, que define um parâmetro como a função inner (interna) e retorna a chamada de função de parameter:

      // Define a function with a default parameter that is an anonymous function
      function outer(
        parameter = function inner() {
          return 100
        }
      ) {
        return parameter()
      }
      
      // Invoke outer function
      outer()
      

      Output

      100

      Essa função inner será criada a partir do zero toda vez que a função outer (externa) for invocada.

      Conclusão

      Neste artigo, você aprendeu o que são os parâmetros predefinidos de função e como usá-los. Agora, você pode usar os parâmetros predefinidos para ajudar a manter suas funções limpas e fáceis de ler. Você também pode atribuir objetos vazios e matrizes a parâmetros logo no início. Isso reduz a complexidade e o número de linhas de código ao lidar com situações como a recuperação de valores de um objeto ou a execução de um loop em uma matriz.

      Se quiser aprender mais sobre o JavaScript, confira a página inicial de nossa série sobre Como programar em JavaScript, ou pesquise nossa série sobre Como programar em Node.js para obter artigos sobre o desenvolvimento de back-end.



      Source link