Dev.to

Funciones Recursivas en JavaScript: Modificando Datos Anidados por ID - Guía Práctica

1. Introducción y Objetivos de Aprendizaje: (Nota de Repaso): Al finalizar esta nota, usted podrá: Definir qué es una función recursiva y sus componentes (caso base, paso recursivo). Identificar por qué la recursión es adecuada para estructuras de datos anidadas. Implementar una función recursiva para buscar un elemento por ID en un objeto/array anidado. Modificar un campo específico del elemento encontrado de forma inmutable (buenas prácticas). 2. Conceptos Fundamentales (Definiciones Clave): Recursión: Técnica de programación donde una función se llama a sí misma para resolver una versión más pequeña del problema original. Caso Base: Condición dentro de una función recursiva que detiene las llamadas sucesivas a sí misma. Es crucial para evitar un desbordamiento de pila (stack overflow). Generalmente, representa el caso más simple del problema que se puede resolver directamente. Paso Recursivo: La parte de la función donde se llama a sí misma, pero típicamente con datos modificados que se acercan al caso base. Estructura de Datos Anidada: Una colección de datos donde los elementos pueden contener otras colecciones (ej: un objeto con propiedades que son otros objetos o arrays, que a su vez pueden contener más). Inmutabilidad: Práctica de no modificar los datos originales. En su lugar, se crean copias modificadas. Esto mejora la predictibilidad y facilita el debugging. 3. Desarrollo del Tema: Navegación y Modificación Recursiva Imaginen que tenemos una caja que puede contener objetos o más cajas. Queremos encontrar un objeto específico (marcado con una etiqueta, nuestro ID) dentro de cualquier caja, sin importar cuán adentro esté, y cambiarle algo. La recursión nos permite "abrir" cada caja: ¿Es esta caja el objeto que busco? (Verificar ID). Si sí, ¡lo encontré! Lo modifico y termino. (Parte del Caso Base) ¿Esta caja está vacía o no contiene más cajas/objetos? Si sí, no hay nada más que hacer aquí. (Otro Caso Base) Si no es el objeto buscado y contiene más cosas (otras cajas/objetos), repito el proceso (llamo a la misma función) para cada una de las cosas que hay dentro. (Paso Recursivo) El desafío técnico está en manejar correctamente los diferentes tipos de "contenedores" (principalmente objetos y arrays en JavaScript) y en cómo propagar la modificación hacia arriba una vez que se encuentra el elemento. Para la búsqueda, iteramos sobre las propiedades de un objeto o los elementos de un array. Si el elemento actual coincide con el ID, realizamos la modificación. Si no, y si el elemento actual es a su vez un objeto o array, llamamos recursivamente a nuestra función sobre ese elemento. Es fundamental manejar la inmutabilidad: en lugar de modificar el objeto/array original, creamos uno nuevo con los cambios. Esto se logra típicamente con Object.assign(), el operador spread (...), o métodos como .map() para arrays. La función debe devolver la estructura (potencialmente modificada). Lógica Central: Chequeo Inicial (Caso Base Parcial): ¿Es el nodo actual null o no es un objeto/array? Si es así, no podemos buscar dentro, retornamos el nodo tal cual. Chequeo de ID (Caso Base Principal): ¿Tiene el nodo actual el targetId buscado? Si sí: Crea una copia del nodo, modifica el campo deseado en la copia y retorna la copia. ¡Éxito! Si no: Proceder al paso recursivo. Paso Recursivo (Manejo de Tipos): Si el nodo es un Array: Itera sobre cada elemento. Llama recursivamente a la función con cada elemento. Construye un nuevo array con los resultados de estas llamadas recursivas (usando .map() es ideal para inmutabilidad). Retorna el nuevo array. Si el nodo es un Objeto (y no un array): Itera sobre las claves (Object.keys()). Llama recursivamente a la función con el valor de cada propiedad. Construye un nuevo objeto acumulando los resultados. Retorna el nuevo objeto. (Nota de Repaso): La clave es verificar el ID en el nivel actual. Si no coincide, delegar la búsqueda a los hijos (elementos de array o valores de propiedades de objeto) llamando a la misma función sobre ellos. Siempre construir y retornar nuevas estructuras (arrays/objetos) para mantener la inmutabilidad. 4. Ejemplo Práctico (JavaScript) /** * Busca recursivamente un item por ID en una estructura anidada * y actualiza un campo específico de forma inmutable. * * @param {object|array} data La estructura de datos donde buscar. * @param {string|number} targetId El ID del item a buscar. * @param {string} fieldToUpdate El nombre del campo a modificar en el item encontrado. * @param {} newValue El nuevo valor para el campo. @returns {object|array} La nueva estructura de datos con el item modificado (o la original si no se encontró). */ function updateNestedItemById(data, targetId, fieldToUpdate, newValue) { // Caso Base 1: Si no es objeto/array, no podemos buscar dentro. if (typeof data !== 'object' || data === null) { return data; } // Si es un

Apr 5, 2025 - 18:39

Funciones Recursivas en JavaScript: Modificando Datos Anidados por ID - Guía Práctica

1. Introducción y Objetivos de Aprendizaje:

(Nota de Repaso): Al finalizar esta nota, usted podrá:
- Definir qué es una función recursiva y sus componentes (caso base, paso recursivo).
- Identificar por qué la recursión es adecuada para estructuras de datos anidadas.
- Implementar una función recursiva para buscar un elemento por ID en un objeto/array anidado.
- Modificar un campo específico del elemento encontrado de forma inmutable (buenas prácticas).

2. Conceptos Fundamentales (Definiciones Clave):

Recursión: Técnica de programación donde una función se llama a sí misma para resolver una versión más pequeña del problema original.
Caso Base: Condición dentro de una función recursiva que detiene las llamadas sucesivas a sí misma. Es crucial para evitar un desbordamiento de pila (stack overflow). Generalmente, representa el caso más simple del problema que se puede resolver directamente.
Paso Recursivo: La parte de la función donde se llama a sí misma, pero típicamente con datos modificados que se acercan al caso base.
Estructura de Datos Anidada: Una colección de datos donde los elementos pueden contener otras colecciones (ej: un objeto con propiedades que son otros objetos o arrays, que a su vez pueden contener más).
Inmutabilidad: Práctica de no modificar los datos originales. En su lugar, se crean copias modificadas. Esto mejora la predictibilidad y facilita el debugging.

3. Desarrollo del Tema: Navegación y Modificación Recursiva

Imaginen que tenemos una caja que puede contener objetos o más cajas. Queremos encontrar un objeto específico (marcado con una etiqueta, nuestro ID) dentro de cualquier caja, sin importar cuán adentro esté, y cambiarle algo. La recursión nos permite "abrir" cada caja:
1. ¿Es esta caja el objeto que busco? (Verificar ID). Si sí, ¡lo encontré! Lo modifico y termino. (Parte del Caso Base)
2. ¿Esta caja está vacía o no contiene más cajas/objetos? Si sí, no hay nada más que hacer aquí. (Otro Caso Base)
3. Si no es el objeto buscado y contiene más cosas (otras cajas/objetos), repito el proceso (llamo a la misma función) para cada una de las cosas que hay dentro. (Paso Recursivo)
El desafío técnico está en manejar correctamente los diferentes tipos de "contenedores" (principalmente objetos y arrays en JavaScript) y en cómo propagar la modificación hacia arriba una vez que se encuentra el elemento. Para la búsqueda, iteramos sobre las propiedades de un objeto o los elementos de un array. Si el elemento actual coincide con el ID, realizamos la modificación. Si no, y si el elemento actual es a su vez un objeto o array, llamamos recursivamente a nuestra función sobre ese elemento. Es fundamental manejar la inmutabilidad: en lugar de modificar el objeto/array original, creamos uno nuevo con los cambios. Esto se logra típicamente con Object.assign(), el operador spread (...), o métodos como .map() para arrays. La función debe devolver la estructura (potencialmente modificada).
- Lógica Central:
  1. Chequeo Inicial (Caso Base Parcial): ¿Es el nodo actual null o no es un objeto/array? Si es así, no podemos buscar dentro, retornamos el nodo tal cual.
  2. Chequeo de ID (Caso Base Principal): ¿Tiene el nodo actual el targetId buscado?
    - Si sí: Crea una copia del nodo, modifica el campo deseado en la copia y retorna la copia. ¡Éxito!
    - Si no: Proceder al paso recursivo.
  3. Paso Recursivo (Manejo de Tipos):
    - Si el nodo es un Array: Itera sobre cada elemento. Llama recursivamente a la función con cada elemento. Construye un nuevo array con los resultados de estas llamadas recursivas (usando .map() es ideal para inmutabilidad). Retorna el nuevo array.
    - Si el nodo es un Objeto (y no un array): Itera sobre las claves (Object.keys()). Llama recursivamente a la función con el valor de cada propiedad. Construye un nuevo objeto acumulando los resultados. Retorna el nuevo objeto.
(Nota de Repaso): La clave es verificar el ID en el nivel actual. Si no coincide, delegar la búsqueda a los hijos (elementos de array o valores de propiedades de objeto) llamando a la misma función sobre ellos. Siempre construir y retornar nuevas estructuras (arrays/objetos) para mantener la inmutabilidad.

4. Ejemplo Práctico (JavaScript)

/**
 * Busca recursivamente un item por ID en una estructura anidada
 * y actualiza un campo específico de forma inmutable.
 *
 * @param {object|array} data La estructura de datos donde buscar.
 * @param {string|number} targetId El ID del item a buscar.
 * @param {string} fieldToUpdate El nombre del campo a modificar en el item encontrado.
 * @param {*} newValue El nuevo valor para el campo.
 * @returns {object|array} La nueva estructura de datos con el item modificado (o la original si no se encontró).
 */
function updateNestedItemById(data, targetId, fieldToUpdate, newValue) {
    // Caso Base 1: Si no es objeto/array, no podemos buscar dentro.
    if (typeof data !== 'object' || data === null) {
        return data;
    }

    // Si es un Array: Procesar cada elemento recursivamente
    if (Array.isArray(data)) {
        // Usamos map para crear un NUEVO array con los resultados
        return data.map(item => updateNestedItemById(item, targetId, fieldToUpdate, newValue));
    }

    // Si es un Objeto:
    // Caso Base 2: ¿Es este el objeto que buscamos?
    if (data.id === targetId) {
        // ¡Encontrado! Crear copia y modificar el campo especificado.
        console.log(`-- Encontrado item con ID: ${targetId}. Actualizando campo '${fieldToUpdate}'.`);
        return {
            ...data, // Copia inmutable de las propiedades existentes
            [fieldToUpdate]: newValue // Actualiza/añade el campo específico
        };
    }

    // Paso Recursivo para Objetos: Procesar cada propiedad recursivamente
    const updatedObject = {}; // Empezar con un objeto vacío para la nueva versión
    for (const key in data) {
        if (data.hasOwnProperty(key)) {
            // Llamada recursiva para el valor de la propiedad
            updatedObject[key] = updateNestedItemById(data[key], targetId, fieldToUpdate, newValue);
        }
    }
    return updatedObject; // Retornar el nuevo objeto construido
}

// --- Ejemplo de Uso ---
const initialData = [
    { id: 1, name: "Root", children: [
        { id: 11, name: "Child 1", status: "active", children: [] },
        { id: 12, name: "Child 2", status: "pending", children: [
            { id: 121, name: "Grandchild 2.1", status: "active" }
        ]}
    ]},
    { id: 2, name: "Another Root", status: "inactive" }
];

console.log("Datos Iniciales:", JSON.stringify(initialData, null, 2));

// Modificar el status del item con id 12 a 'completed'
const targetIdToUpdate = 12;
const field = 'status';
const value = 'completed';

const updatedData = updateNestedItemById(initialData, targetIdToUpdate, field, value);

console.log("\nDatos Actualizados:", JSON.stringify(updatedData, null, 2));

// Verificar que el original no cambió (si hicimos bien la inmutabilidad)
console.log("\nDatos Originales (sin cambios):", JSON.stringify(initialData, null, 2));

// Intentar actualizar un ID que no existe
const nonExistentUpdate = updateNestedItemById(initialData, 999, 'status', 'failed');
// Debería ser igual a initialData
// console.log("\nIntento con ID no existente:", JSON.stringify(nonExistentUpdate, null, 2));

5. Buenas Prácticas y Consideraciones Adicionales:

*   **Inmutabilidad:** Como se demostró, usar `map` para arrays y crear nuevos objetos con el operador spread (`...`) o `Object.assign()` es crucial para evitar efectos secundarios inesperados.
*   **Stack Overflow:** Con estructuras *extremadamente* profundas, la recursión puede exceder el límite de la pila de llamadas. En esos casos (raros en datos JSON típicos, pero posibles), se podría considerar una solución iterativa usando una pila manual.
*   **Performance:** Para estructuras gigantescas, la creación constante de nuevos objetos/arrays puede tener un impacto en la memoria/rendimiento. Evaluar si es un problema real antes de optimizar prematuramente. Librerías como Immer.js pueden ayudar a manejar la inmutabilidad de forma más eficiente.
*   **Complejidad del Objeto:** El ejemplo asume que el ID está en una propiedad llamada `id`. La función podría hacerse más flexible para aceptar una función `finder` o el nombre de la propiedad ID.

¡No olvides el caso base! Sin él, tu función recursiva correrá indefinidamente (o hasta que la pila se desborde). Asegúrate de manejar tanto objetos como arrays correctamente en tu paso recursivo.
(Nota de Repaso):
- Do: Tener un caso base claro para detener la recursión. Manejar objetos y arrays. Priorizar la inmutabilidad (crear copias).
- Don't: Olvidar el caso base. Modificar los datos originales directamente (mutación). Usar recursión si un simple bucle es suficiente (para estructuras planas).

6. Resumen / Puntos Clave para el Repaso:

Recursión: Función que se llama a sí misma.
Componentes: Caso Base (detiene) y Paso Recursivo (continúa con subproblema).
Aplicación: Ideal para estructuras anidadas (objetos/arrays dentro de otros).
Proceso:
1. Verificar ID en el nodo actual (si aplica).
2. Si es el nodo, copiar y modificar.
3. Si no es el nodo, llamar recursivamente a la función para cada hijo/propiedad.
4. Construir la nueva estructura (array/objeto) con los resultados de las llamadas recursivas.
Inmutabilidad: Esencial para código predecible; crear copias en lugar de modificar originales.

7. Preguntas de Autoevaluación:

¿Cuál es el propósito principal del "caso base" en una función recursiva?
En el ejemplo de código, ¿cómo se asegura la inmutabilidad al procesar un array? ¿Y al procesar un objeto que no es el objetivo?
¿Qué pasaría si la función updateNestedItemById no retornara nada en el paso recursivo (cuando procesa hijos)?

Espero que este artículo detallado te sirva como una excelente guía y nota de repaso sobre cómo usar la recursión para esta tarea específica. ¡Avísame si quieres explorar otro tema!