Desestruturação aninhada

A desestruturação em JavaScript pode parecer confusa no início, mas a verdade é que a desestruturação pode tornar seu código um pouco mais lógico e direto. A desestruturação parece um pouco mais complexa quando o senhor está procurando uma propriedade em vários objetos, portanto, vamos dar uma olhada em como fazer isso!

A desestruturação simples tem a seguinte aparência:

const { target } = event;

Aqui usamos {} e = para nomear uma variável com o mesmo nome da propriedade (o senhor também pode usar um durante a desestruturação!). Entretanto, pegar um valor de objeto aninhado é um pouco mais complicado:

// Object for testing
const x = { y: { z: { a: 1, b: 2} } }

// Get "b"
const { y: { z: { b } } } = x;

console.log(b); // 2
console.log(z); // z is not defined
console.log(y); // y is not defined

Aqui temos uma sintaxe semelhante a um objeto com {} e : para definir uma variável com base na propriedade de objeto aninhada. Observe que somente a última propriedade aninhada é fornecida como uma variável; as propriedades principais que referenciamos ao longo do caminho não são.

Para obter uma referência a ambas b e y, por exemplo, o senhor pode usar uma vírgula:

const { y, y: { z: { b } } } = x;

console.log(b); // 2
console.log(y); // {z: {…}}

A desestruturação pode demorar um pouco para o senhor se acostumar, mas, quanto mais eu a uso, mais aprecio a simplicidade do meu código: nenhum inferno de “pontos” e menos código geral!