Claves de objeto en minúsculas

Beginner

This tutorial is from open-source community. Access the source code

Introducción

En este laboratorio (lab), aprenderemos cómo convertir todas las claves de un objeto a minúsculas utilizando JavaScript. Esta técnica es especialmente útil cuando se trabaja con datos de diferentes fuentes donde la capitalización de las claves de los objetos puede ser inconsistente.

Utilizaremos varios métodos de JavaScript para realizar esta tarea:

  • Object.keys() para obtener todas las claves de un objeto
  • Array.prototype.reduce() para transformar los datos en un nuevo objeto
  • String.prototype.toLowerCase() para convertir cadenas de texto a minúsculas

Al final de este laboratorio, podrás crear una función reutilizable que pueda transformar las claves de cualquier objeto a minúsculas mientras se preservan sus valores.

Comprender los objetos en JavaScript

Antes de comenzar a convertir las claves de los objetos a minúsculas, entendamos qué son los objetos de JavaScript y cómo podemos trabajar con ellos.

En JavaScript, un objeto es una colección de pares clave-valor. Las claves son cadenas de texto (o Símbolos), y los valores pueden ser de cualquier tipo de dato, incluyendo otros objetos.

Comencemos abriendo la shell interactiva de Node.js:

  1. Abra la terminal en su WebIDE
  2. Escriba node y presione Enter

Ahora debería ver el indicador de Node.js (>), que le permite escribir código JavaScript directamente.

Creemos un objeto simple con claves en mayúsculas y minúsculas mezcladas:

const user = {
  Name: "John",
  AGE: 30,
  Email: "john@example.com"
};

Escriba este código en el indicador de Node.js y presione Enter. Para ver el objeto, simplemente escriba user y presione Enter:

user;

Debería ver la salida:

{ Name: 'John', AGE: 30, Email: 'john@example.com' }

Como puede ver, este objeto tiene claves con diferentes estilos de capitalización. En el siguiente paso, aprenderemos cómo acceder a estas claves y convertirlas a minúsculas.

Accediendo a las claves de un objeto

Antes de poder transformar las claves de un objeto, necesitamos entender cómo acceder a ellas. JavaScript proporciona el método Object.keys(), que devuelve un array que contiene todas las claves de un objeto.

En la shell interactiva de Node.js, intenta lo siguiente:

Object.keys(user);

Deberías ver una salida como esta:

[ 'Name', 'AGE', 'Email' ]

Ahora, intentemos convertir cada clave a minúsculas utilizando el método toLowerCase(). Podemos usar el método map() para transformar cada clave:

Object.keys(user).map((key) => key.toLowerCase());

La salida debería ser:

[ 'name', 'age', 'email' ]

¡Genial! Ahora tenemos un array con todas las claves convertidas a minúsculas. Sin embargo, todavía necesitamos crear un nuevo objeto con estas claves en minúsculas y los valores originales. Para esto, usaremos el método reduce() en el siguiente paso.

Entendamos el método reduce() antes de continuar. Este método ejecuta una función reductora en cada elemento del array, resultando en un solo valor de salida.

Aquí hay un ejemplo sencillo de reduce():

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

sum;

La salida será 10, que es la suma de todos los números en el array. El 0 en el método reduce() es el valor inicial del acumulador.

Creando la función para convertir a minúsculas

Ahora que entendemos cómo acceder a las claves de un objeto y usar el método reduce(), creemos una función que convierta todas las claves de un objeto a minúsculas.

En la shell interactiva de Node.js, define la siguiente función:

const lowerizeKeys = (obj) => {
  return Object.keys(obj).reduce((acc, key) => {
    acc[key.toLowerCase()] = obj[key];
    return acc;
  }, {});
};

Desglosemos lo que hace esta función:

  1. Object.keys(obj) obtiene todas las claves del objeto de entrada
  2. .reduce() transforma estas claves en un nuevo objeto
  3. Para cada clave, creamos una nueva entrada en el objeto acumulador (acc) con:
    • La clave convertida a minúsculas usando key.toLowerCase()
    • El valor original del objeto de entrada (obj[key])
  4. Comenzamos con un objeto vacío {} como valor inicial para el acumulador
  5. Finalmente, devolvemos el acumulador, que es nuestro nuevo objeto con claves en minúsculas

Ahora, probemos nuestra función con el objeto user que creamos anteriormente:

const lowercaseUser = lowerizeKeys(user);
lowercaseUser;

Deberías ver la salida:

{ name: 'John', age: 30, email: 'john@example.com' }

¡Perfecto! Todas las claves ahora están en minúsculas.

Intentemos otro ejemplo para asegurarnos de que nuestra función funcione correctamente:

const product = {
  ProductID: 101,
  ProductName: "Laptop",
  PRICE: 999.99
};

lowerizeKeys(product);

La salida debería ser:

{ productid: 101, productname: 'Laptop', price: 999.99 }

Nuestra función funciona correctamente para diferentes objetos con varios estilos de capitalización de claves.

Manejo de casos extremos

Nuestra función funciona bien para objetos simples, pero ¿qué pasa con casos más complejos? Exploremos algunos casos extremos y veamos cómo nuestra función los maneja.

Objetos vacíos

Primero, probemos con un objeto vacío:

lowerizeKeys({});

La salida debería ser un objeto vacío:

{}

Objetos con objetos anidados

¿Qué pasa si el objeto contiene objetos anidados? Intentémoslo:

const nestedObject = {
  User: {
    Name: "John",
    Contact: {
      EMAIL: "john@example.com",
      PHONE: "123-456-7890"
    }
  }
};

lowerizeKeys(nestedObject);

La salida será:

{ user: { Name: 'John', Contact: { EMAIL: 'john@example.com', PHONE: '123-456-7890' } } }

Observa que solo la clave de primer nivel User se convierte a minúsculas. Las claves dentro de los objetos anidados permanecen sin cambios.

Para manejar objetos anidados, necesitaríamos modificar nuestra función para procesar recursivamente todos los objetos. Creemos una versión mejorada:

const deepLowerizeKeys = (obj) => {
  return Object.keys(obj).reduce((acc, key) => {
    const value = obj[key];
    // Check if the value is an object and not null
    const newValue =
      value && typeof value === "object" && !Array.isArray(value)
        ? deepLowerizeKeys(value)
        : value;

    acc[key.toLowerCase()] = newValue;
    return acc;
  }, {});
};

Esta función mejorada:

  1. Verifica si cada valor es también un objeto (y no un array o nulo)
  2. Si lo es, llama a sí misma recursivamente en ese objeto anidado
  3. De lo contrario, utiliza el valor original

Probémosla con nuestro objeto anidado:

const deepLowerizedObject = deepLowerizeKeys(nestedObject);
deepLowerizedObject;

Ahora deberías ver todas las claves convertidas a minúsculas, incluso en objetos anidados:

{ user: { name: 'John', contact: { email: 'john@example.com', phone: '123-456-7890' } } }

¡Buen trabajo! Has creado una función avanzada que puede manejar objetos anidados.

Creando un módulo reutilizable

Ahora que tenemos funciones que funcionan, creemos un archivo de módulo de JavaScript reutilizable que podamos importar en otros proyectos.

Primero, salgamos de la shell interactiva de Node.js presionando Ctrl+C dos veces o escribiendo .exit y presionando Enter.

Ahora, creemos un nuevo archivo llamado object-utils.js en el directorio del proyecto:

  1. En el WebIDE, navega al panel del explorador de archivos a la izquierda.
  2. Haz clic derecho en el directorio del proyecto y selecciona "Nuevo archivo".
  3. Nombrar el archivo object-utils.js.
  4. Agrega el siguiente código al archivo:
/**
 * Converts all keys of an object to lowercase
 * @param {Object} obj - The input object
 * @returns {Object} A new object with all keys in lowercase
 */
const lowerizeKeys = (obj) => {
  return Object.keys(obj).reduce((acc, key) => {
    acc[key.toLowerCase()] = obj[key];
    return acc;
  }, {});
};

/**
 * Recursively converts all keys of an object and its nested objects to lowercase
 * @param {Object} obj - The input object
 * @returns {Object} A new object with all keys in lowercase (including nested objects)
 */
const deepLowerizeKeys = (obj) => {
  return Object.keys(obj).reduce((acc, key) => {
    const value = obj[key];
    // Check if the value is an object and not null
    const newValue =
      value && typeof value === "object" && !Array.isArray(value)
        ? deepLowerizeKeys(value)
        : value;

    acc[key.toLowerCase()] = newValue;
    return acc;
  }, {});
};

// Export the functions
module.exports = {
  lowerizeKeys,
  deepLowerizeKeys
};

Ahora, creemos un archivo de prueba para verificar que nuestro módulo funcione correctamente. Crea un nuevo archivo llamado test.js:

  1. En el WebIDE, navega al panel del explorador de archivos a la izquierda.
  2. Haz clic derecho en el directorio del proyecto y selecciona "Nuevo archivo".
  3. Nombrar el archivo test.js.
  4. Agrega el siguiente código al archivo:
// Import the functions from our module
const { lowerizeKeys, deepLowerizeKeys } = require("./object-utils");

// Test with a simple object
const user = {
  Name: "John",
  AGE: 30,
  Email: "john@example.com"
};

console.log("Original object:");
console.log(user);

console.log("\nObject with lowercase keys:");
console.log(lowerizeKeys(user));

// Test with a nested object
const nestedObject = {
  User: {
    Name: "John",
    Contact: {
      EMAIL: "john@example.com",
      PHONE: "123-456-7890"
    }
  }
};

console.log("\nNested object:");
console.log(nestedObject);

console.log("\nNested object with lowercase keys (shallow):");
console.log(lowerizeKeys(nestedObject));

console.log("\nNested object with lowercase keys (deep):");
console.log(deepLowerizeKeys(nestedObject));

Ahora, ejecutemos el archivo de prueba:

node test.js

Deberías ver una salida similar a:

Original object:
{ Name: 'John', AGE: 30, Email: 'john@example.com' }

Object with lowercase keys:
{ name: 'John', age: 30, email: 'john@example.com' }

Nested object:
{
  User: {
    Name: 'John',
    Contact: { EMAIL: 'john@example.com', PHONE: '123-456-7890' }
  }
}

Nested object with lowercase keys (shallow):
{
  user: {
    Name: 'John',
    Contact: { EMAIL: 'john@example.com', PHONE: '123-456-7890' }
  }
}

Nested object with lowercase keys (deep):
{
  user: {
    name: 'John',
    contact: { email: 'john@example.com', phone: '123-456-7890' }
  }
}

¡Felicidades! Has creado con éxito un módulo de JavaScript reutilizable con funciones para convertir las claves de un objeto a minúsculas. Ahora este módulo se puede importar en cualquiera de tus proyectos de JavaScript.

Resumen

En este laboratorio (lab), has aprendido cómo convertir las claves de un objeto a minúsculas en JavaScript. Has:

  1. Explorado los objetos de JavaScript y cómo acceder a sus claves.
  2. Utilizado el método Object.keys() para obtener todas las claves de un objeto.
  3. Utilizado el método reduce() para transformar un objeto.
  4. Creado una función para convertir todas las claves de un objeto a minúsculas.
  5. Mejorado la función para manejar objetos anidados de forma recursiva.
  6. Creado un módulo de JavaScript reutilizable con ambas funciones.

Estas técnicas son útiles cuando se trabaja con datos de diferentes fuentes donde la capitalización de las claves de los objetos puede ser inconsistente. Las funciones que has creado pueden ayudar a normalizar los datos y facilitar su manipulación.

Puedes ampliar estas utilidades agregando más funciones, como:

  • Convertir las claves de un objeto a mayúsculas.
  • Convertir las claves a camelCase o snake_case.
  • Filtrar objetos basados en criterios de clave o valor.
  • Comparar objetos en profundidad para verificar su igualdad.

Sigue practicando con objetos y su manipulación para mejorar tus habilidades en la programación de JavaScript.