Desestructuración en JavaScript y React-Native

La palabra desestructuración proviene del verbo desestructurar y se define algo así como quitar una estructura definida y en su uso en el lenguaje javascript es más o menos eso, pero se puede decir que es extraer una propiedad de un objeto aunque también se usa en arreglos, en general en programación siempre manipulamos con estructuras de datos y esta característica ayuda muchísimo.

Esta característica fue introducida en ES6 y su uso en JavaScript en la actualidad es amplio está por todos lados en frameworks como React, Angular, Vue y en casi cualquier proyecto desde el más pequeño al más grande te podrás encontrar con esta práctica.

Ejemplos en arreglos

Tradicionalmente para acceder a los elementos de un arreglo se usa la posición la que se encuentran

let frutas = ['banana', 'manzana', 'pera'];
let banana = frutas[0];
let manzana = frutas[1];
let pera = frutas[2];

Claro esto funciona pero es una sintaxis demasiado larga y la podemos simplificar de la siguiente forma

let frutas = ['banana', 'manzana', 'pera'];
let [banana, manzana, pera] = frutas; 

console.log(banana, manzana, pera); // Resultado: 'banana', 'manzana', 'pera'

De esta forma accedemos de forma implícita a los elementos del arreglo y asignamos directamente sus elementos a las variables que deseamos.
Podemos incluso saltar algunos elementos usando la , (coma)

let frutas = ['banana', 'manzana', 'pera'];
let [banana,,] = frutas;

Otro uso de la coma se complementa con el uso del parámetros rest

let frutas = ['banana', 'manzana', 'pera'];
let [banana,..rest] = frutas; 
console.log(rest) // Resultado ['manzana', 'pera']

También se puede combinar su uso con funciones como split, imaginemos que tenemos que separar un nombre que viene en un solo string

let [nombre, apellido] = "Kevin Gracia".split(' ');
console.log(nombre); // Kevin
console.log(apellido);  // Gracia

Ejemplos en objetos

Los objetos en javascript son estructuras de lo más común en Javascript y siempre se trata con ellos ya que son devueltos como respuesta desde algún servicio como una API o una Base de Datos

Suponiendo que tenemos un objeto persona

let persona  = {
firstname: "Kevin",
lastname: "Gracia"

Antes de ES6 para acceder al objeto y asignar su valor en variables se usaba la notación de punto (.)

let firstname = persona.firstname;
let lastname: persona.lastname;

Nuevamente se puede simplificar esta asignación con la desestructuración de la siguiente forma

let {firstname, lastname} = persona;

Y listo ya podemos usar las variables con los valores de las propiedades dentro del objeto persona

También podemos realizar una reasignación de la propiedad en una variable es una práctica muy común

Su sintaxis sería la siguiente

let {propiedad1: variable1, propiedad2: variable2} = objeto;

let {firstname: fname, lastname: lname} = persona;

Un error común es tratar de acceder a una propiedad que no existe por lo cual dará como respuesta "undefined"

let {firstname, midname, lastname} = persona;
console.log(midname) // Respuesta undefined

Se puede acceder a una propiedad anidada dentro de un objeto

const user = { 
        'name': 'Kevin',
        'address': 'Parada 12',
        'age': 22,
        'department':{
            'name': 'Develop',
            'Shift': 'Morning',
            'address': {
                'city': 'Quito',
                'street': '12th October',
                'zip': 1234
            }
        }
}

const { department: { address } } = user;

Ejemplos en funciones al recibir como parámetro

En lugar de recibir el objeto completo y luego desestructurar dentro de la función podemos recibir la propiedad lista para su uso

const cars = [
  { model: 'Camaro' },
  { model: 'Cayenne' }
];

const models = cars.map(
  function({ model }) {
    return model;
  }
);

models; // => ['Camaro', 'Cayenne']

Otro uso posible es dentro del bucle for ... of donde podemos iterar en las propiedades del objeto

const heroes = [
  { name: 'Batman' },
  { name: 'Joker' }
];

for (const { name } of heroes) {
  console.log(name); // Respuesta 'Batman', 'Joker'
}

Y con método Object.entires para obtener las clave 7 valores del objeto

let user = {
  name: "Kevin",
  age: 2
};


for (let [key, value] of Object.entries(user)) {
  alert(`${key}:${value}`); // name:Kevin, then age:22
}

function calculateArea({ width, height }) {
  console.log('Area is ' + width * height);
}

calculateArea({ width: 5, height: 6 }); 
// -> Area is 30

Ejemplo de uso en React Native donde se extrae el año de la ventana del dispositivo y y se la asigna a una nueva variable para después ser usada

const {width: windowWidth} = Dimensions.get('window');

Incluso esta técnica es recomendada en la guía de estilos de airbnb de javascript de la siguiente forma donde tomo el mismo ejemplo

// mal
function processInput(input) {
  // then a miracle occurs
  return [left, right, top, bottom];
}

// el que llama necesita pensar en el orden de la data de retorno
const [left, __, top] = processInput(input);

// bien
function processInput(input) {
  // then a miracle occurs
  return { left, right, top, bottom };
}

// el que llama elige solo la data que necesita
const { left, top } = processInput(input);

¿Por qué? Puedes agregar nuevas propiedades en el tiempo o cambiar el orden de las cosas sin afectar la forma en que se llama.

Para concluir esta guía un ejemplo de React Native donde se usa la técnica de múltiples formas

import React from 'react';
import {ActivityIndicator, Dimensions, View} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import Carousel from 'react-native-snap-carousel';
import {MoviePoster} from '../components/MoviePoster';
import {useMovies} from '../hooks/useMovies';

export const HomeScreen = () => {
  const {peliculasEnCine, isLoading} = useMovies(); // trae las variables de los hooks internos del hook use Movies
  const {top} = useSafeAreaInsets();

  const {width: windowWidth} = Dimensions.get('window'); //desestructuracion y renombrarlo

  if (isLoading) {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <ActivityIndicator color="red" size={100} />
      </View>
    );
  }

  return (
    <View style={{marginTop: top + 20}}>
      <View style={{height: 440}}>
        <Carousel
          data={peliculasEnCine}
          renderItem={({item}: any) => <MoviePoster movie={item} />}
          sliderWidth={windowWidth}
          itemWidth={300}
        />
      </View>
    </View>
  );
};

En este caso el Hook personalizado "useMovies" retorna un objeto con dos propiedades como lo indica la buena práctica mencionada anteriormente

import {useEffect, useState} from 'react';
import movieDB from '../api/movieDB';
import {Movie, MovieDBNowPlaying} from '../interfaces/movieInterface';

export const useMovies = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [peliculasEnCine, setPeliculasEnCine] = useState<Movie[]>([]);

  const getMovies = async () => {
    const resp = await movieDB.get<MovieDBNowPlaying>('/now_playing');
    const peliculas = resp.data.results;
    setPeliculasEnCine(peliculas);

    setIsLoading(false);
  };

  useEffect(() => {
    //now_playing
    getMovies();
  }, []);

  return {
    peliculasEnCine,
    isLoading,
  };
};

Como hemos visto a lo largo de este post la desestructuración es una propiedad muy usada y que se debe tener muy en cuenta al usar React

Referencias
Guía de estilos Javascript Airbnb

Blog

Desestructuración en JavaScript y React-Native

Kevin Gracia Orejuela

Join Our Newsletter. No Spam, Only the good stuff.

Related