A desestruturação de arrays é uma técnica única que permite extrair de maneira organizada os valores de um array para novas variáveis.
Por exemplo, sem utilizar a técnica de atribuição de desestruturação de arrays, você copiaria o valor de um array para uma nova variável da seguinte maneira:
const profile = ["Oluwatobi", "Sofela", "codesweetly.com"]; const firstName = profile[0]; const lastName = profile[1]; const website = profile[2]; console.log(firstName); // "Oluwatobi" console.log(lastName); // "Sofela" console.log(website); // "codesweetly.com"
Perceba que o trecho acima possui muito código repetido, o que não é uma abordagem DRY (Don't Repeat Yourself) na programação.
Agora, vejamos como a atribuição de desestruturação de arrays deixa as coisas mais organizadas e seguindo o princípio DRY.
const profile = ["Oluwatobi", "Sofela", "codesweetly.com"]; const [firstName, lastName, website] = profile; console.log(firstName); // "Oluwatobi" console.log(lastName); // "Sofela" console.log(website); // "codesweetly.com"
Veja, como que por magia, limpamos nosso código ao colocar as três novas variáveis (ou seja, firstName, lastName e website) em um objeto array ([...]). Em seguida, atribuímos a elas os valores do array profile.
Em outras palavras, instruímos o computador a extrair os valores do array profile e atribuí-los às variáveis no lado esquerdo do operador de atribuição.
Portanto, o JavaScript analisará o array profile e copiará seu primeiro valor ("Oluwatobi") para a primeira variável do array de desestruturação (firstName).
Da mesma forma, o computador extrairá o segundo valor do array profile ("Sofela") para a segunda variável do array de desestruturação (lastName).
Por fim, o JavaScript copiará o terceiro valor do array profile ("codesweetly.com") para a terceira variável do array de desestruturação (website).
Observe que o trecho acima fez a desestruturação do array profile fazendo referência a ele. No entanto, também é possível fazer a desestruturação direta de um array. Vamos ver como fazer isso.
Como Fazer a desestruturação Direta de um Array
O JavaScript permite que você faça a desestruturação direta de um array da seguinte forma:
const [firstName, lastName, website] = [ "Oluwatobi", "Sofela", "codesweetly.com", ]; console.log(firstName); // "Oluwatobi" console.log(lastName); // "Sofela" console.log(website); // "codesweetly.com"
Suponha que você prefira separar as declarações de variáveis de suas atribuições. Nesse caso, o JavaScript tem uma solução para você. Vamos ver como fazer isso.
Como Utilizar a desestruturação de Arrays Separando as Declarações de Variáveis das Atribuições
Sempre que você utiliza a desestruturação de arrays, o JavaScript permite que você separe as declarações de variáveis de suas atribuições.
Aqui está um exemplo:
let firstName, lastName, website; [firstName, lastName, website] = ["Oluwatobi", "Sofela", "codesweetly.com"]; console.log(firstName); // "Oluwatobi" console.log(lastName); // "Sofela" console.log(website); // "codesweetly.com"
E se você quiser atribuir "Oluwatobi" à variável firstName e o restante dos itens do array a outra variável? Como você faria isso? Vamos descobrir abaixo.
Como Utilizar a desestruturação de Arrays para Atribuir o Restante de um Array Literal a uma Variável
O JavaScript permite que você utilize o operador rest dentro de uma desestruturação de array para atribuir o restante de um array comum a uma variável.
Aqui está um exemplo:
const [firstName, ...otherInfo] = ["Oluwatobi", "Sofela", "codesweetly.com"]; console.log(firstName); // "Oluwatobi" console.log(otherInfo); // ["Sofela", "codesweetly.com"]
NOTA Sempre use o operador rest como o último item do seu array de desestruturação para evitar um SyntaxError.
Agora, e se você quiser extrair apenas "codesweetly.com"? Vamos discutir a técnica que você pode usar abaixo.
Como Utilizar a desestruturação de Arrays para Extrair Valores em Qualquer Posição de Índice
Veja como você pode usar a desestruturação de arrays para extrair valores em qualquer posição de índice de um array comum:
const [, , website] = ["Oluwatobi", "Sofela", "codesweetly.com"]; console.log(website); // "codesweetly.com"
No trecho acima, utilizamos vírgulas para pular variáveis nas posições de índice 1 e 2 do array de desestruturação.
Dessa forma, conseguimos associar a variável website ao valor do terceiro índice do array comum no lado direito do operador de atribuição (ou seja, "codesweetly.com").
No entanto, às vezes, o valor que você deseja extrair de um array é indefinido. Nesse caso, o JavaScript oferece uma maneira de definir valores padrão no array de desestruturação . Vamos aprender mais sobre isso abaixo.
Como Funcionam Valores Padrão em uma Atribuição de desestruturação de Arrays
Definir um valor padrão pode ser útil quando o valor que você deseja extrair de um array não existe (ou é definido como indefinido).
Veja como você pode definir um dentro de um array de desestruturação:
const [firstName = "Tobi", website = "CodeSweetly"] = ["Oluwatobi"]; console.log(firstName); // "Oluwatobi" console.log(website); // "CodeSweetly"
No trecho acima, definimos "Tobi" e "CodeSweetly" como os valores padrão das variáveis firstName e website.
Portanto, ao tentar extrair o valor do índice zero do array do lado direito, o computador usou "CodeSweetly" como padrão, pois apenas um valor existe no índice zero de ["Oluwatobi"].
Então, e se você precisar trocar o valor de firstName pelo de website? Novamente, você pode usar a desestruturação de arrays para realizar essa tarefa. Vamos ver como fazer isso.
Como Utilizar a desestruturação de Arrays para Trocar os Valores de Variáveis
Você pode utilizar a atribuição de desestruturação de arrays para trocar os valores de duas ou mais variáveis diferentes.
Aqui está um exemplo:
let firstName = "Oluwatobi"; let website = "CodeSweetly"; [firstName, website] = [website, firstName]; console.log(firstName); // "CodeSweetly" console.log(website); // "Oluwatobi"
No trecho acima, usamos a desestruturação direta de arrays para reatribuir as variáveis firstName e website com os valores do array literal do lado direito do operador de atribuição.
Assim, o valor de firstName será alterado de "Oluwatobi" para "CodeSweetly", enquanto o conteúdo de website mudará de "CodeSweetly" para "Oluwatobi".
Lembre-se de que você também pode usar a desestruturação de arrays para extrair valores de um array comum para os parâmetros de uma função. Vamos falar mais sobre isso abaixo.
Como Utilizar a desestruturação de Arrays para Extrair Valores de um Array para
Parâmetros de uma Função Veja como você pode utilizar a desestruturação de arrays para extrair valores de um array e atribuí-los aos parâmetros de uma função:
// Define um array com dois itens:
const profile = ["Oluwatobi", "Sofela"];
// Define uma função com um array de desestruturação contendo dois parâmetros:
function getUserBio([firstName, lastName]) {
return `Meu nome é ${firstName} ${lastName}.`;
}
// Chama getUserBio passando o array profile como argumento:
getUserBio(profile);
// A chamada acima retornará: "Meu nome é Oluwatobi Sofela."No trecho acima, usamos um parâmetro de desestruturação de arrays para extrair os valores do array profile nos parâmetros firstName e lastName da função getUserBio.
NOTA Um parâmetro de desestruturação de arrays é comumente chamado de parâmetro de desestruturação.
Aqui está outro exemplo:
// Define um array com dois valores de string e um array aninhado:
const profile = ["codesweetly.com", "Masculino", ["Oluwatobi", "Sofela"]];
// Define uma função com dois arrays de desestruturação contendo um parâmetro cada:
function getUserBio([website, , [userName]]) {
return `${userName} gerencia ${website}`;
}
// Chama getUserBio passando o array profile como argumento:
getUserBio(profile);
// A chamada acima retornará: "Oluwatobi gerencia codesweetly.com"No trecho acima, usamos dois parâmetros de desestruturação de arrays para extrair os valores do array profile nos parâmetros website e userName da função getUserBio.
Às vezes, pode ser necessário chamar uma função que contenha um parâmetro de desestruturação sem passar nenhum argumento para ela. Nesse caso, você precisará usar uma técnica que evite que o navegador lance um TypeError.
Vamos aprender sobre essa técnica abaixo.
Como Chamar uma Função Contendo Parâmetros de desestruturação de Arrays sem Fornecer Nenhum Argumento
Considere a seguinte função:
function getUserBio([firstName]) {
console.log(
"Faça algo mais que não precisa do parâmetro de desestruturação."
);
return `Meu nome é ${firstName}.`;
}Agora, vamos chamar a função getUserBio sem fornecer nenhum argumento para seu parâmetro de desestruturação:
Após chamar a função getUserBio acima, o navegador lançará um erro semelhante a TypeError: undefined is not iterable.
O erro TypeError ocorre porque funções que contêm um parâmetro de desestruturação esperam que você forneça pelo menos um argumento.
Portanto, você pode evitar tais mensagens de erro atribuindo um argumento padrão ao parâmetro de desestruturação.
Aqui está um exemplo:
function getUserBio([firstName] = []) {
console.log(
"Faça algo mais que não precisa do parâmetro de desestruturação."
);
return `Meu nome é ${firstName}.`;
}Observe no trecho acima que atribuímos um array vazio como argumento padrão do parâmetro de desestruturação.
Então, vamos agora chamar a função getUserBio sem fornecer nenhum argumento para seu parâmetro de desestruturação:
getUserBio();
A função irá gerar:
"Faça algo mais que não precisa do parâmetro de desestruturação."; "Meu nome é undefined.";
Lembre-se de que você não precisa usar um array vazio como argumento padrão do parâmetro de desestruturação. Você pode usar qualquer outro valor que não seja nulo ou indefinido.
Sugestão de Cursos
Descubra o caminho para se tornar um especialista em programação web. Aprenda HTML, CSS, JavaScript e os principais frameworks nesta jornada emocionante. Com instrutores experientes e materiais práticos, você desenvolverá habilidades práticas para criar sites impressionantes e aplicativos interativos. Impulsione sua carreira na indústria de tecnologia e abra portas para oportunidades de emprego lucrativas. Garanta sua vaga hoje mesmo e inicie sua jornada para se tornar um desenvolvedor web de sucesso.
Método Para Aprender a Programar do Absoluto ZERO com Node.js, React e React Native.
As tecnologias ensinadas no curso são responsáveis por muitas vagas no mercado de trabalho.
Além da alta demanda, os salários vão de R$47.000,00 até R$197.000,00 anuais tendo empresas que possibilitam o trabalho remoto e até vagas Internacionais.
Para que você possa estar apto a preencher uma dessas vagas eu vou te apresentar o passo a passo para você se tornar um verdadeiro expert nessas tecnologias.
O curso te dará o passo a passo de como criar estruturar de um sistema do zero com Node.js, React e React Native.