La desestructuración de objetos es una característica introducida en ECMAScript 6 (ES6) que permite extraer datos de arrays u objetos y asignarlos a variables de forma más concisa y legible.

Antes de ES6

Antes de ES6, para extraer valores de un objeto o un array, debíamos acceder a cada propiedad o elemento de forma manual:

Ejemplo con Arrays

const numeros = [1, 2, 3];

const primero = numeros[0];
const segundo = numeros[1];
const tercero = numeros[2];

console.log(primero, segundo, tercero); // 1 2 3

Ejemplo con Objetos

const persona = {
  nombre: 'Michael',
  edad: 30,
  ciudad: 'New York'
};

const nombre = persona.nombre;
const edad = persona.edad;
const ciudad = persona.ciudad;

console.log(nombre, edad, ciudad); // Michael 30 New York

Desestructuración con ES6

Con ES6, podemos desestructurar arrays y objetos de forma más simple.

Ejemplo con Arrays

const numeros = [1, 2, 3];

const [primero, segundo, tercero] = numeros;

console.log(primero, segundo, tercero); // 1 2 3

Aquí usamos corchetes [] para desestructurar el array directamente en variables.

Ejemplo con Objetos

const persona = {
  nombre: 'Michael',
  edad: 30,
  ciudad: 'New York'
};

const { nombre, edad, ciudad } = persona;

console.log(nombre, edad, ciudad); // Michael 30 New York

En este caso, usamos llaves {} para extraer propiedades del objeto en variables con el mismo nombre.

Conclusión

La desestructuración en JavaScript permite escribir código más limpio y legible, especialmente al trabajar con estructuras de datos complejas. Este artículo es una introducción rápida para mostrar cómo ha evolucionado esta técnica desde las versiones anteriores de JavaScript hasta ES6 y las posibilidades que otorga esta forma de accedere al contenido de distintos tipos de objeto en JavaScript.