Javascript Logo
en español

Domina el arte del 'destructuring' en Javascript

Fácil - 2 min. lectura

Si has estado trabajando con Javascript durante un tiempo, es probable que ya hayas utilizado arrays y objetos para almacenar y manipular datos. Sin embargo, ¿alguna vez has necesitado extraer ciertos valores de estos tipos de datos y te has encontrado escribiendo varias líneas de código solo para obtenerlos? Aquí es donde entra en juego el "destructuring" de Javascript.

Por ejemplo, imagina que tienes un array con tres elementos, y quieres extraer cada uno de ellos en una variable diferente:

const myArray = [1, 2, 3];
const first = myArray[0];
const second = myArray[1];
const third = myArray[2];

Con "array destructuring", puedes hacer lo mismo en una sola línea de código:

const [first, second, third] = [1, 2, 3];

Como ves, esta sintaxis es mucho más clara y fácil de entender. Además, es posible utilizar valores por defecto en caso de que algún elemento no exista en el array:

const [first, second, third, fourth = 4] = [1, 2, 3];

En este caso, la variable "fourth" tendrá el valor por defecto de 4 si no se encuentra en el array.

El "array destructuring" también es útil cuando trabajas con objetos. Puedes extraer sus propiedades de manera similar a como lo haces con los arrays:

const myObj = { name: "Juan", age: 30 };
const { name, age } = myObj;

En este caso, las variables "name" y "age" tomarán los valores de las propiedades correspondientes del objeto.

También puedes utilizar valores por defecto y renombrar las variables al extraerlas de un objeto:

const { name: firstName, age = 18 } = { name: "Juan" };

Aquí, la variable "firstName" tendrá el valor de la propiedad "name" del objeto, mientras que la variable "age" tomará el valor por defecto de 18.

Como ves, el "destructuring" es una herramienta poderosa y útil que te permite extraer valores de arrays y objetos de manera más sencilla.