Playgrounds: Hacer freeze de un objeto de forma recursiva

Cursos Empresas Blog Live Conf Precios

Contenido del curso

Introducción

1
Programación Orientada a Objetos Avanzada en JavaScript
04:18 min

Profundicemos en los objetos

Cómo copiar objetos en JavaScript

Recursividad en JavaScript

Abstracción y encapsulamiento sin prototipos

Cómo identificar objetos

Próximos pasos

20
Programación Orientada a Objetos Avanzada en JavaScript
03:02 min

Tomar examen

Playgrounds: Hacer freeze de un objeto de forma recursiva

Comentarios

David Alvarez

Estudiante

Hola compartro solucion abajo . . . . . . . . . . . . . .

export function deepFreeze(obj) {
    if( typeof(obj)!=="object") return

    Object.freeze(obj); 

    for(let key in obj){
      deepFreeze(obj[key]) 
    }
}

Edgar Oliveros

Estudiante

tuve que copiarla, escribirla, repasar la otra clase y volve a intentarlo, pero por fin entendi jajajaj, gracias por dejar tu solucion!!

Leopoldo Martinez

Estudiante

el play ground esta siendo muy deficiente, en la pestaña vista muestra errores que pareciera que esta fallando el codio. Incluso lo hace con el codigo de ofrece el boton de “ver solucion”. Asi como hay otras soluciones al ejercicio que el playground las toma como erradas. No permite solucionarlo por medio de for…in.

Lo que hemos visto en todos los cursos es que no importa el camino siempre que logres el resultado y estos ejercicios estan siendo restrictivos a una unica respuesta valida, me ha pasado en los ultimos 6 playground que hecho en los ultimos 3 cursos. Y en los ultimos 2 he tenido el inconveniente que incluso la solucion ofrecida por la plataforma tiene un comportamiento extraño en la pestaña de “vista”

Por favor revisenlo xq nos causa dudas a los que estamos aprendiendo y necesitamos aprender con seguridad y esto nos hace dudar mucho.

Cristian Andres Amaya Torrado

Estudiante

Mi Solucion 😎

function deepFreeze(obj) {
  // Tu código aquí 👈
  if (typeof obj != 'object') return obj;

  Object.freeze(obj);

  for (let key in obj) {
    deepFreeze(obj[key])
  }

  return obj;
}

Kevin Daniel Hincapie Lumbaque

Estudiante

Agrego mi solución Aunque debo decir que el playground no me la valio si funciona XD ¬¬ ¬¬ ¬¬ ¬¬ ¬¬ ¬¬ ¬¬ Tuve dos de las validaciones bien pero me pide que lance un error cuando se intenta agregar o borrar una propiedad y pues no se hacer eso aun (se supone que por el freeze igual no dejaria, no ? ) entiendo que lo que quieren es literal hacer un throw error o algo asi .. no ?

function isObject(obj) {
  return typeof obj === 'object' && obj !== null;
}
export function deepFreeze(obj) {
  for (let prop in obj) {
    console.log(prop)
    let keyIsObj = isObject(obj[prop])

    console.log(keyIsObj)
    if (keyIsObj) {
      console.log('entro a prop anidada');
      deepFreeze(obj[prop]);
      Object.freeze(obj[prop])
    } 
  }
}```

Ivan Rojas

Estudiante

Hi!! 👋 Comparto mi solución

export function deepFreeze(obj) {
  if (typeof obj == "object") {
    Object.freeze(obj);
  } else {
    return obj;
  }
  for (let key in obj) {
    deepFreeze(obj[key]);
  };
  return obj;
};

Juan Camilo Sandoval Hernandez

Estudiante

MI RESPUESTA . . . . . . .. . . . . . . . ..

Gonzalo Gutiérrez Castillo

Estudiante

Para que no tenga ningún problema al reconocer si realmente es una instancia del prototipo object, y no confundirlo con una instancia del prototipo array le añadí una función que hace una validación de tipo de dato mas estricta

export function deepFreeze(obj) {
  let isObject = typeOfElem(obj) == "object"
  if (isObject) {
    Object.freeze(obj);
    for (let value in obj) {
      deepFreeze(obj[value])
    }
    return obj
  } else {
    return obj
  }
}
function typeOfElem(elem) {
  let result;

  switch (Object.prototype.toString.call(elem)) {
    case "[object Object]":
      result = "object";
      break;
    case "[object Array]":
      result = "array";
      break;
    default:
      result = "other";
      break;
  }
  return result;
}

Andrés Schuster

Estudiante

// Esta función comprueba si un objeto es válido (no nulo) y es un objeto.
function isObject(obj) {
  return obj !== null && typeof obj === "object";
}

// Esta es la función principal que se exporta. Toma un objeto y lo congela de forma recursiva.
export function deepFreeze(obj) {
  // Primero, comprobamos si el objeto es un objeto válido y si aún no está congelado.
  if (isObject(obj) && !Object.isFrozen(obj)) {
    // Luego, obtenemos las claves del objeto y las recorremos con forEach().
    Object.keys(obj).forEach((key) => {
      // Para cada clave, llamamos a la función deepFreeze() de forma recursiva.
      deepFreeze(obj[key]);
    });
    // Después de que todas las claves hayan sido congeladas, congelamos el objeto completo.
    Object.freeze(obj);
  }
  // Devolvemos el objeto, que ahora está completamente congelado.
  return obj;
}

En resumen, la función deepFreeze toma un objeto y lo congela de forma recursiva. Para hacer esto, comprueba si el objeto es válido y no está congelado, luego recorre todas sus claves y congela de forma recursiva cada subobjeto, antes de finalmente congelar el objeto completo. La función devuelve el objeto congelado.

Agustin Javier Alvarez Yudica

Estudiante

ALERTA SPOILER . . . . . . . . . . . Object.freeze() impide que se le agreguen nuevas propiedades e impide que se puedan eliminar las propiedades ya existentes a un objeto, volviendo "false" las propiedades writable y configurable. Pero este metodo solo hace un shallow freeze, porque si dentro del objeto tenemos un objeto, las propiedades de este si podrán ser modificadas. Pero gracias a la recursividad podemos hacer un deep freeze, que aplica Object.freeze() a cada una de las propiedades del objeto:

 export function deepFreeze(obj) {
  if (typeof (obj) !== "object") return

  Object.freeze(obj);

  for (let key in obj) {
    deepFreeze(obj[key])
  }
}

Jefferson Ramos

Estudiante

Me complique un poco por el metodo Object.freeze pero lo logre.

export function deepFreeze(obj) {
  if (typeof obj == "object") {
    Object.freeze(obj);
    for (let key in obj) {
      if (typeof obj[key] == "object") {
        deepFreeze(obj[key])
      }
    }
    return obj;
  } else {
    return obj;
  }
}

Juan Manuel Rodríguez Lanza

Estudiante

Intente tres soluciones funcionales, eso si refactorice en cada una cada vez mas hasta llegar a esta:

function deepFreeze(obj) {
  
for (item in obj)
  if(typeof obj[item] === 'object')
     deepFreeze(Object.freeze(obj[item]))   
 return Object.freeze(obj)
}

Valido en mi RunJS y en consola y es funcional a parecer, recorrí todos los elementos intentando elminiar y queda completamente Freeze. Pero al final, solo valida la solución dada en el ejercicio.

Juan Manuel Rodríguez Lanza

Estudiante

Ya se que pasa, el software no pasa las iteraciones en esa sintaxis, no define la variable. Miren en vista y corran su codigo.

Tomas Pucutay

Estudiante

Hola, tu código está bien, solo que item no ha sido declarado, coloca let dentro del ciclo for y funciona

Christian Valenzuela

Estudiante

Alguien me puede explicar por que el playground me da un error a mi solucion y que de diferente es a lo que ellos califican como bueno?

Mi codigo:

function deepFreeze(obj) {
  for (key in obj) {
    if (typeof obj[key] == "object") {
      deepFreeze(obj[key])
    }
  }
  return Object.freeze(obj)
}

El del playground:

export function deepFreeze(obj) {
  Object.keys(obj).forEach(prop => {
    if (typeof obj[prop] === 'object') deepFreeze(obj[prop]);
  });
  return Object.freeze(obj);
}

Juan Manuel Rodríguez Lanza

Estudiante

Ya se por que es, al parecer no toma la iteración for (x in obj), uso tambien esa iteración y arroja:

ReferenceError: item is not defined.

En tu caso ese ReferenceError: key is not defined.

Jhon Eduard Bocanegra Ortiz

Estudiante

No funciona el playground

Daniel Steven Cano Zapata

Estudiante

Esta es mi solución

export function freezer(param) {
  Object.keys(param).forEach((element) => {
    if (typeof param[element] == "object") {
      freezer(param[element]);
    } else {
      Object.freeze(param);
    }
  });
}

PERO A pesar de que es muy similar a la solución y que ya lo corrí en mi VSCode con toda la depuración y corroboro que funciona, esta página no me vale el ejercicio ...

Oscar Mauricio Acevedo Porras

Estudiante

Sin contar con que los Media Queries no funcionan para ciertos viewports. Uno que trabaja con escritorio dividido...

Erik Elyager

Estudiante

Hola Daniel! Asegúrate de que la función retorna el objeto para que las pruebas pasen :wink:

Andrés Sebastián Cabrera Paladines

Estudiante

Hola, les dejo mi solución aquí.

function deepFreeze(obj){
    const keys = Object.keys(obj);
    
    for(let i = 0; i <= keys.length; i++){
        if(typeof obj[keys[i]] === 'object'){
            Object.freeze(obj[keys[i]]);
            deepFreeze(obj[keys[i]]);
        }else if(Array.isArray(obj[keys[i]]) ){
            Object.freeze(obj[keys[i]]);
            const arr = obj[keys[i]];
            for(let i = 0; i <= arr.length; i ++){
                if(typeof arr[i] === 'object'){
                    Object.freeze(arr[i]);
                    deepFreeze(arr[i]);
                }
            }
        }else {
            Object.freeze(obj);
        }
    }
};

David Higuera

Estudiante

export function deepFreeze(obj) {
  // Tu código aquí 👈
    for (let key in obj) {
      if (typeof obj[key] === 'object') {
        deepFreeze(obj[key])
      }
    }
    return Object.freeze(obj)
}

Romario André Julio B

Estudiante

¿alguien podría decirme porque debemos verificar si es tipo objeto ?

Orangel Brito

Estudiante

Romario, esta verificación es importante para asegurarnos de que todos los objetos anidados estén congelados y que no se pueda modificar el estado de ninguno de ellos. De lo contrario, cualquier objeto anidado que no se congele también podría ser modificado y no estaríamos realmente bloqueando todo el objeto de forma efectiva.

Jesus Marquez Martini

Estudiante

coloque mi solucion pero me dice que no aunque cuando la pruebo por mi mismo funciona y veo la prueba de los demas y es parecida no se que pasara

export function deepFreeze(obj) {
  const is_array = Array.isArray(obj);

  const is_object = typeof obj == 'object';

  if (is_object) {

    for (key in obj) {
      if (Array.isArray(obj[key])) {

      } else if (typeof obj[key] == 'object') {
        Object.freeze(obj)
        obj_freeze(obj[key])
        console.log('sali')
      } else {

      }
    }
  }
}

Ellioth Aguirre Gonzales

Estudiante

export function deepFreeze(obj) { for (let item of Object.keys(obj)) { if (obj[item] && typeof obj[item] === "object") { deepFreeze(obj[item]) } } return Object.freeze(obj)}

Ellioth Aguirre Gonzales

Estudiante

export function deepFreeze(obj) { for (let item of Object.keys(obj)) { if (obj[item] && typeof obj[item] === "object") { deepFreeze(obj[item]) } } return Object.freeze(obj)}

santiago Miranda

Estudiante

El objetivo de este reto es que al intentar modificar las propiedades de error, por eso en la pestaña de vista da error por mas que sea la solución correcta

export function deepFreeze(obj) {
  if (typeof obj == 'object') {
    Object.freeze(obj)
  } else {
    return obj;
  }
  for (let ele in obj) {
    deepFreeze(obj[ele]);
  }
  return obj;
}

function isObject(obj) {
  return typeof obj === 'object' && obj !== null;
}
export function deepFreeze(obj) {
  for (let prop in obj) {
    console.log(prop)
    let keyIsObj = isObject(obj[prop])

    console.log(keyIsObj)
    if (keyIsObj) {
      console.log('entro a prop anidada');
      deepFreeze(obj[prop]);
      Object.freeze(obj[prop])
    } 
  }
}```

export function deepFreeze(obj) {
  let isObject = typeOfElem(obj) == "object"
  if (isObject) {
    Object.freeze(obj);
    for (let value in obj) {
      deepFreeze(obj[value])
    }
    return obj
  } else {
    return obj
  }
}
function typeOfElem(elem) {
  let result;

  switch (Object.prototype.toString.call(elem)) {
    case "[object Object]":
      result = "object";
      break;
    case "[object Array]":
      result = "array";
      break;
    default:
      result = "other";
      break;
  }
  return result;
}

// Esta función comprueba si un objeto es válido (no nulo) y es un objeto.
function isObject(obj) {
  return obj !== null && typeof obj === "object";
}

// Esta es la función principal que se exporta. Toma un objeto y lo congela de forma recursiva.
export function deepFreeze(obj) {
  // Primero, comprobamos si el objeto es un objeto válido y si aún no está congelado.
  if (isObject(obj) && !Object.isFrozen(obj)) {
    // Luego, obtenemos las claves del objeto y las recorremos con forEach().
    Object.keys(obj).forEach((key) => {
      // Para cada clave, llamamos a la función deepFreeze() de forma recursiva.
      deepFreeze(obj[key]);
    });
    // Después de que todas las claves hayan sido congeladas, congelamos el objeto completo.
    Object.freeze(obj);
  }
  // Devolvemos el objeto, que ahora está completamente congelado.
  return obj;
}

export function deepFreeze(obj) {
  if (typeof obj == "object") {
    Object.freeze(obj);
    for (let key in obj) {
      if (typeof obj[key] == "object") {
        deepFreeze(obj[key])
      }
    }
    return obj;
  } else {
    return obj;
  }
}

export function freezer(param) {
  Object.keys(param).forEach((element) => {
    if (typeof param[element] == "object") {
      freezer(param[element]);
    } else {
      Object.freeze(param);
    }
  });
}

function deepFreeze(obj){
    const keys = Object.keys(obj);
    
    for(let i = 0; i <= keys.length; i++){
        if(typeof obj[keys[i]] === 'object'){
            Object.freeze(obj[keys[i]]);
            deepFreeze(obj[keys[i]]);
        }else if(Array.isArray(obj[keys[i]]) ){
            Object.freeze(obj[keys[i]]);
            const arr = obj[keys[i]];
            for(let i = 0; i <= arr.length; i ++){
                if(typeof arr[i] === 'object'){
                    Object.freeze(arr[i]);
                    deepFreeze(arr[i]);
                }
            }
        }else {
            Object.freeze(obj);
        }
    }
};

export function deepFreeze(obj) {
  // Tu código aquí 👈
    for (let key in obj) {
      if (typeof obj[key] === 'object') {
        deepFreeze(obj[key])
      }
    }
    return Object.freeze(obj)
}

export function deepFreeze(obj) {
  const is_array = Array.isArray(obj);

  const is_object = typeof obj == 'object';

  if (is_object) {

    for (key in obj) {
      if (Array.isArray(obj[key])) {

      } else if (typeof obj[key] == 'object') {
        Object.freeze(obj)
        obj_freeze(obj[key])
        console.log('sali')
      } else {

      }
    }
  }
}

Introducción

Programación Orientada a Objetos Avanzada en JavaScript

Profundicemos en los objetos

Uso de Métodos Estáticos del Objeto en JavaScript

Métodos y Atributos Estáticos en JavaScript

Definición y Control de Propiedades en Objetos JavaScript

Cómo copiar objetos en JavaScript

Funcionamiento de la Memoria y Copia de Objetos en JavaScript

Copias superficiales y profundas en JavaScript: Shallow Copy y Object Assign

Copiar objetos complejos y métodos en JavaScript

Recursividad en JavaScript

Recursividad en JavaScript: Conceptos y Ejemplos Prácticos

Recursividad en JavaScript: Implementación de Deep Copy