JS - Descontruíndo o Destructuring (Objetos)

O Destructuring foi um recurso incluído nas últimas versões do Javascript e que talvez tenha passado batido por muita gente. Ele, basicamente, te permite escrever códigos mais limpos e menos repetitivos.

O Ecmascript 2015 (ES2015), que define os padrões da linguagem Javascript,  o revolucionou em muitas coisas, tornando-o mais global e elevando-o a patamares mais altos, e isso não é novidade alguma. Mas, mesmo já estando aí há mais de 3 anos, muitas pessoas ainda não conhecem diversos de seus recursos que podem facilitar, e muito, a vida dos desenvolvedores. E sabemos que não são poucas as utilidades do Javascript hoje, a linguagem que, por muito tempo, foi até mesmo ridicularizada por desenvolvedores de linguagens mais 'nobres', por assim dizer, hoje está em praticamente tudo.

Se antes estávamos limitados aos browser, às interações com usuários, alertas e animações, hoje podemos rodar o Javascript num servidor completo e executar basicamente qualquer coisa nele. Podemos ainda executar num app Mobile utilizando frameworks como React-Native, Nativescript e Ionic; Podemos ainda criar um aplicativo multiplataforma para Windows, Linux e Mac  com Electron; e, hoje já está se tornando uma realidade, executar códigos em linguagens como C e C++ direto no browser através da camada de WebAssembly. Enfim, Javascript está em todo o lugar, você pode criar basicamente qualquer coisa com ele e é certo que ainda não atingimos nem 50% do que ele é capaz, longe disso!

Bom, então vamos falar desse recurso incluído nessa versão do Javascript e que ainda gera muitas dúvidas em sua utilização no dia a dia, para quê que serve? o que posso construir utilizando esse recurso? Em quê pode fazer diferença nas minhas tarefas diárias? Enfim, pretendo ao menos tentar responder a algumas dessas perguntas aqui.

Vamos lá! Enfim, Destructuring é basicamente uma técnica que, como disse antes, te faz economizar muito no código e deixar ele mais limpo e fácil de ler. Ele permite criar variáveis a partir de objetos ou arrays. Como? Segue um exemplo:

Antes, quando se precisava atribuir variáveis a partir de objetos, utilizávamos o seguinte código:

// Objeto person apenas para exemplificar
var person = {
    name: "Flávio",
    lastName: "Lima",
    age: 30
    }
// Criando variáveis a partir do objeto:
var name = person.name
var lastName = person.lastName
var age = person.age
// Logando as variáveis no terminal
console.log(name) //Flávio
console.log(lastName) //Lima
console.log(age) // 30

Bom, não parece grande coisa, né? afinal, nosso objeto tem apenas três propriedades. Mas imagine a complexidade disso em objetos maiores. É muita mão de obra e o Destructuring veio justamente pra facilitar nisso.

Segue agora o mesmo código escrito usando Destructuring:

let person = {
    name: "Flávio",
    lastName: "Lima",
    age: 30
}
// Atribuindo as variáveis
const {name, lastName, age} = person
// Logando as variáveis no terminal
console.log(name) // Flávio
console.log(lastName) // Lima
console.log(age) // 30

Viu só? nesse caso, o código ficou bem mais simples de ler e só ocupou uma linha para declarar as variáveis. E isso não é tudo, também é possível utilizar nomes diferentes para as variáveis. Por exemplo:

// Abrasileirando as variáveis
const { name: nome, lastName: sobreNome, age: idade } = person
// Verificando no terminal
console.log(`Nome completo: ${nome} ${sobrenome}; 
    Idade: ${idade}`) // Nome Completo: Flávio Lima; Idade: 30

Também é possível atribuir valores default para variáveis pois caso você inicialize uma variável usando Destructuring e ela não existir no objeto, ela retornará undefined. Então podemos fazer dessa forma:

// Vamos continuar a utilizar o objeto Person, 
// mas dessa vez vou criar uma variável não declarada antes
const { name, lastName, age, favMovie } = person
// Ao tentar logar a variável não existente, receberemos undefined
console.log(name) // Flávio
console.log(favMovie) // undefined

Para evitar isso, definiremos um valor padrão para a variável:

const { name, lastName, age, favMovie = "Forrest Gump" } = person
// Dessa vez, não obteremos undefined mas sim o valor padrão informado
console.log(name) // Flávio
console.log(favMovie) // Forrest Gump

Bom, por hoje é isso mas logo logo trarei mais posts sobre o uso de Destructuring com Arrays e também outras coisinhas mais que podemos fazer com ele.

Valeu!