Comprender el problema
A menudo nos encontramos con estructuras de datos complejas en aplicaciones JavaScript. Estas estructuras pueden ser objetos profundamente anidados, lo que dificulta su manipulación o procesamiento directo. Una operación común es aplanar estos objetos, transformándolos en una estructura más simple donde todas las propiedades están en el nivel superior.

En este blog, profundizaremos en un fragmento de código JavaScript que aplana efectivamente un objeto profundamente anidado. Desglosaremos el código línea por línea, explicando su lógica y funcionalidad.

El desglose del código

let user = {
  name : 'Chiranjit',
  address : {
    personal : {
      city: 'Kolkata',
      state: 'West Bengal'
    },
    office : {
      city: 'Bengaluru',
      state: 'Karnataka',
      area: {
        landmark:'Waterside',
        post: 433101
      }
    }
  }
}
var finalObj = {} 

const flatObjFn = (obj, parent) => {
  for(let key in obj){
    if(typeof obj[key] === 'object'){
      flatObjFn(obj[key], parent '_' key)
    }else{
      finalObj[parent   '_'   key] = obj[key]
    }
  }
}

flatObjFn(user, 'user');
console.log(finalObj);

Explicación línea por línea

1. Creando el objeto anidado:
   • Comenzamos creando un objeto profundamente anidado llamado usuario. contiene propiedades como nombre, dirección y otros objetos anidados dentro DIRECCIÓN.

2. Inicializando el objeto de salida:

   • Se crea un objeto vacío finalObj para almacenar el resultado aplanado.

3. Definición de la función de aplanamiento:

   • Se define una función llamada flatObjFn, que acepta dos parámetros: a) obj: El objeto a aplanar. b) padre: una cadena para anteponer los nombres de las propiedades para mayor claridad.

4. Iterando a través de las propiedades del objeto:

   • Un bucle for...in itera sobre cada propiedad del objeto de entrada obj.

5. Manejo de objetos anidados:

   • Si el valor de una propiedad es un objeto, la función flatObjFn es llamado recursivamente a ese objeto. El parámetro principal es concatenado con el nombre de propiedad actual para crear un nuevo prefijo para las propiedades anidadas.

6. Manejo de valores primitivos:

   • Si el valor de una propiedad no es un objeto (es decir, un valor primitivo como una cadena o un número), se agrega al finalObj con una clave formado concatenando el padre y el nombre de propiedad actual.

7. Llamar a la función de aplanamiento:

   • FlatObjFn se llama con el objeto de usuario como entrada y 'usuario' como el prefijo principal inicial.

8. Registrar el objeto aplanado:

   • El objeto aplanado final se imprime en la consola usando console.log(finalObj).

¿Cómo funciona?
La función flatObjFn atraviesa recursivamente el objeto, descomponiendo las estructuras anidadas en un objeto plano. El parámetro principal realiza un seguimiento de la jerarquía de objetos, lo que permite que la función cree nombres de propiedades significativos en el objeto de salida.

Conectémonos en Twitter o LinkedIn