Desestruturando em JS

Com a desestruturação, podemos “desempacotar” um objeto e atribuir suas propriedades a novas variáveis. Por exemplo, vejamos a desestruturação de objetos:

Podemos ver a Destructuring como uma tentativa de fazer um saboroso sanduíche de ovo. Nós só tiramos da geladeira os componentes que precisamos para o sanduíche, ou seja, pão, mortadela, ovo, etc. Não tiraríamos todos os itens que temos na geladeira, certo? Esse é o mesmo caso do elemento Destruct em JS.

Destructuring é uma expressão JavaScript que nos permite extrair dados de arrays, objetos e mapas e armazená-los em variáveis ​​separadas. A desestruturação nos permite extrair vários atributos ou objetos de uma vez de uma matriz.

Vejamos a sintaxe:

const obj = {
  a: 2,
  b: 3,
}

// destructure assignment
const { a, b } = obj;

console.log(a); // 2
console.log(b); // 3

const { a,b } = obj;

Tipos de Desestruturação:

Atribuição a nomes de variáveis ​​existentes:

var student = {    // Object we will be destructuring
    firstname: 'Mohajit',
    lastname: 'Paul',
    dateofbirth: '2002'
};

// Destructuring:
const { firstname, lastname, dateofbirth } = student;
console.log( firstname, lastname, dateofbirth);

2. Atribuição de novos nomes de variáveis:

Entrada:

var student = {    // Object to destructure
    firstname: 'Mohajit',
    lastname: 'Paul',
    dateofbirth: '2002'
};

// Destructuring obj with different names:
const { firstname: F1N, lastname: L1N, dateofbirth: dob } = student;
console.log( F1N, L1N , dob);

3. Atribuição com valores padrão:

Entrada:

var student = {    // Object to destructure
    firstname: 'Mohajit',
    lastname: 'Paul',
    dateofbirth: '2002'
};
// Destructuring - variables without 
// assigning default values 
var { firstname, lastname, country } = student;
console.log("Without setting default values")
console.log( firstname, lastname, grade);

// Destructuring - variables by 
// assigning default values 
var { firstname = 'default firstname', 
      lastname = 'default lastname', 
      grade = 'default grade' } = student;
console.log("\n After setting default values")
console.log( firstname, lastname, grade);

Assim conclui a história da desestruturação em JS.

Siga-me nas minhas redes sociais:

GithubGenericName

Linkedin

Twitter