Desestructuración de arrays en JavaScript

15/05/2023
|Por Yoné Rocha

Primero presentaremos el código JavaScript que queremos desestructurar:

JavaScript
1
2
3
4
5
6
7
  getLocale() {
    let locale = I18n.locale.split('-');
    if (locale && locale.length > 0) {
      return locale[0];
    }
    return Config.defaultLocale;
  }

Mismo código con desestructuración de arrays:

JavaScript
1
2
3
4
  getLocale() {
    const [languageCode] = I18n.locale.split('-');
    return languageCode || Config.defaultLocale;
  }

Este código JavaScript optimiza la función getLocale() al introducir las siguientes mejoras:

  • En lugar de declarar una variable locale y asignarle I18n.locale, simplemente extraemos el código de idioma utilizando la desestructuración de arrays: [languageCode] = I18n.locale.split(‘-‘). Esto nos permite obtener directamente el código de idioma sin la necesidad de una variable adicional.
  • Luego, comprobamos si languageCode tiene un valor. Si es así, significa que se encontró un código de idioma válido. En ese caso, retornamos languageCode. Si no se encuentra un código de idioma válido, retornamos Config.defaultLocale, que representa el idioma predeterminado configurado en Config.

Esta versión del código es más concisa y legible, manteniendo la funcionalidad original de obtener el código de idioma de la configuración local o, en su defecto, utilizar el idioma predeterminado.

Ejemplos de uso de desestructuración de arrays

Asignación de valores a variables individuales:

JavaScript
1
2
3
4
5
6
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
 
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

Ignorar valores:

JavaScript
1
2
3
4
5
const numbers = [1, 2, 3];
const [a, , c] = numbers;
 
console.log(a); // 1
console.log(c); // 3

Asignación de valores predeterminados:

JavaScript
1
2
3
4
5
const numbers = [1];
const [a = 0, b = 2] = numbers;
 
console.log(a); // 1
console.log(b); // 2

Desestructuración anidada:

JavaScript
1
2
3
4
5
6
const numbers = [1, [2, 3]];
const [a, [b, c]] = numbers;
 
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

Estos ejemplos te muestran cómo puedes extraer y asignar valores de un array utilizando la sintaxis de desestructuración. Es una forma útil y concisa de trabajar con arrays en JavaScript.

JavaScript optimización