Playgrounds: Hacer freeze de un objeto de forma recursiva

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

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

    Object.freeze(obj); 

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

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.

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;
}

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])
    } 
  }
}```

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;
};

MI RESPUESTA
.
.
.
.
.
.
…
.
.
.
.
.
.
.
…

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;
}

// 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.

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])
  }
} 

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;
  }
}

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.

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);
}

No funciona el playground

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 …

Aquí esta mi solución:

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

deepFreeze(juan);

export function deepFreeze(obj) {
  // Congela el objeto completo para evitar modificaciones
  Object.freeze(obj);
  // Itera a través de todas las propiedades de juan
  for (let key in obj) {
    // Comprueba si el valor es un objeto (excluyendo null)
    if (typeof (obj[key]) === 'object' && obj[key] !== null) {
      // Congela recursivamente los objetos anidados para lograr la inmutabilidad profunda
      deepFreeze(obj[key]);
    }
  }
}

Solución 👈🤯🔥

Me gustó mucho esta solución porque aprendí y recordé varias cosas, este código está muy interesante para practicar y aprender… 👉 Código en GitHub

reto solucionado
mi codigo

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)
}

Tengo un problema y es que en mi terminal y cuando trato de eliminar o editar desde mi visual estudio code, este no me deja pero aun así no pasa en los tests o sera que me estoy equivocando🤔

const juan = {
  name: "Juanito",
  approvedCourses: ["Curso 1", "Curso 2"],
  caracteristicas: {
    age: 18,
    colorCabello: "Negro",
    gustos: {
      musica: ["rock", "punk", "ska"],
      peliculas: ["drama", "horros", "comedia"],
    },
  },
  addCourse(newCourse) {
    console.log("This", this);
    console.log("This.approvedCourses", this.approvedCourses);
    this.approvedCourses.push(newCourse);
  },
};

function isObject(obj) {
  return typeof obj === "object" && !isArray(obj);
}

function isArray(obj) {
  return Array.isArray(obj);
}

function deepFreeze(obj) {
  let copyFreeze;

  if (isObject(obj)) {
    copyFreeze = {};
  } else if (isArray(obj)) {
    copyFreeze = [];
  } else {
    return Object.freeze(obj);
  }

  for (const key in obj) {
    copyFreeze[key] = deepFreeze(obj[key]);
  }

  Object.freeze(copyFreeze);
  return copyFreeze;
}

const COPY = deepFreeze(juan);

COPY.caracteristicas.age = 20;
delete COPY.name;
delete COPY.caracteristicas;
COPY.caracteristicas = [];
COPY.caracteristicas.gustos = "";
COPY.caracteristicas.gustos.musica = [];
delete COPY.caracteristicas.age;
delete COPY.caracteristicas.gustos;
delete COPY.caracteristicas.gustos.musica;
delete COPY.caracteristicas.gustos.musica[0];
delete COPY.addCourse;

console.log(COPY);
console.log(COPY.caracteristicas.gustos.musica);

Y estos son todos los tests que le hice, pero bueno puede que me este equivocando, no quito esa posibilidad. Bueno esta es mi solución 😅

const juan = {
  name: "Juanito",
  approvedCourses: ["Curso 1","Curso 2"],
  caracteristicas: {
    age: 18,
    colorCabello: 'Negro',
    gustos: {
      musica: ['rock', 'punk', 'ska'],
      peliculas: ['drama', 'horros', 'comedia'],
    },
  },
  addCourse(newCourse) {
    console.log("This", this);
    console.log("This.approvedCourses", this.approvedCourses);
    this.approvedCourses.push(newCourse);
  }
};

Estoy entendiendo cada vez más estos conceptos, pero creo que aún me falta más práctica xd

Otra forma de solucionarlo…

export function deepFreeze(obj) {

  //console.log(obj);
  if (typeof obj == 'object') {

    let keys = Object.entries(obj);
    for (let i = 0; i < keys.length; i++ ) {
      //console.log(obj[keys[i][0]]);
      if (typeof obj[keys[i][0]] == 'object') {        
        deepFreeze(obj[keys[i][0]]);        
      }      

    }

    Object.freeze(obj);

  }
  
}

Propuesta 😃

export function deepFreeze(obj) {
  const isThisAObject = subject => typeof subject === "object" && subject !== null;

  for (let key in obj) {
    if (isThisAObject(obj[key])) {
      deepFreeze(obj[key]); // Primero llama recursivamente a deepFreeze
      Object.freeze(obj[key]); // Luego congela el objeto
    }
  }
  return Object.freeze(obj); // Congela y retorna el objeto principal
}

mi solucion
solo corre en la consola del navegador o del vscode

export function deepFreeze(obj) {

  if (typeof (obj) == 'object') {

    for (const key of Object.keys(obj)) {
      Object.freeze(obj[key]);

    }
    Object.freeze(obj)
  } else {
    return obj
}```

Esta fue mi solución para el desafio:

function deepFreeze(obj){

  Object.freeze(obj)

  for(let key in obj){
    if(typeof obj == 'object'){
      deepFreeze(obj[key])
    }
  }

  return obj
}

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

Mi solucion:

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

mi aporte

export function deepFreeze(obj) {
  // Primero, se congela el objeto actual
  Object.freeze(obj);

  // Recorrer todas las propiedades del objeto
  for (let propKey in obj) {
    if (obj.hasOwnProperty(propKey)) {
      let propValue = obj[propKey];

      // Se verifica si la propiedad es un objeto y no nulo
      if (typeof propValue === "object" && propValue !== null) {
        // Llamada recursiva a deepFreeze para congelar el objeto anidado
        deepFreeze(propValue);
      }
    }
  }

  return obj;
}

export function deepFreeze(obj) {
  // Primero, congelamos el objeto actual
  Object.freeze(obj);

  // Recorremos todas las propiedades del objeto
  for (let prop in obj) {
    if (obj.hasOwnProperty(prop) && typeof obj[prop] === 'object' && obj[prop] !== null) {
      // Si la propiedad es un objeto, lo congelamos también de forma recursiva
      deepFreeze(obj[prop]);
    }
  }

  return obj;
}

Aqui esta mi solución:
.
.
.
.

.
.
.
.
.
.
.
.
.

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

  Object.freeze(obj);

  for (let key in obj) {
    if (typeof obj[key] === 'object') {
      deepFreeze(obj[key]);
    }
  }

  return obj;
}

Mi solución…pero no reconoce la prueba…lo probé en VS Code y si funciona:

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

console.log(Object.getOwnPropertyDescriptors(juan));
console.log(Object.getOwnPropertyDescriptors(juan.caracteristicas));
console.log(Object.getOwnPropertyDescriptors(juan.caracteristicas.gustos));

Heyy acá una solución:

.
.
.
.
.
.

function deepFreeze(obj) {
  // Primero, congelamos el objeto raíz
  Object.freeze(obj);

  // Luego, iteramos sobre todas las propiedades del objeto
  Object.getOwnPropertyNames(obj).forEach(prop => {
    const value = obj[prop];

    // Si la propiedad es un objeto y no está congelada, lo congelamos recursivamente
    if (typeof value === 'object' && value !== null && !Object.isFrozen(value)) {
      deepFreeze(value);
    }
  });

  return obj; // Retornamos el objeto congelado
}

¡Pero que suerte!
¡A la primera!

export function deepFreeze(obj) {
  Object.freeze(obj);

  for (let key in obj) {
    if (typeof obj[key] === "object") {
      deepFreeze(obj[key]);
    }
  }
  return obj;
}

export function deepFreeze(obj) {
  Object.freeze(obj);
  for (let key in obj) {
    if (!Array.isArray(obj[key]) && typeof obj[key] === 'object') {
      deepFreeze(obj[key]);
    }
  }
}

Hola, este es mi codigo!

const isObject = (object) => {
    return typeof object == "object"
}//es un array o un objeto


function deepFreeze(obj) {

    for (key in obj) {
        let keyIsObject = isObject(obj[key])

        if(keyIsObject) {
             deepFreeze(obj[key])
        } else {
            Object.freeze(obj[key])
        }
    }

    return Object.freeze(obj)

}

MI solución:

Es increible lo mucho que siento que he avanzado; al principio llegaba a ver este código y me desmayaba pensando en lo mucho que tardaría en entenderlo.

Ahora siento lo mismo cuando veo algo de React, pero se que de a poco llegaré ahí así como llegué hasta aquí.

function deepFreeze(obj) {
  const juan = {
    name: "Juanito",
    approvedCourses: ["Curso 1", "Curso 2"],
    caracteristicas: {
      age: 18,
      colorCabello: "Negro",
      gustos: {
        musica: ["rock", "punk", "ska"],
        peliculas: ["drama", "horros", "comedia"],
      },
    },
    addCourse(newCourse) {
      console.log("This", this);
      console.log("This.approvedCourses", this.approvedCourses);
      this.approvedCourses.push(newCourse);
    },
  };

  if (obj === undefined) {
    obj = juan;
  };
  Object.freeze(obj);
  for (let property in obj) { 
    if (typeof obj[property] === "object") {
      if (!Array.isArray(obj[property])) {
        deepFreeze(obj[property]);
      }
    }
  }

  return obj;
}
console.log(deepFreeze())

Mi solucion aunque en playground no funcionase u.u

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

¡Saludos!
Aquí mi solución:

function deepFreeze(obj) {
   if (typeof obj !== "object" || obj === null) return;

   Object.freeze(obj);

   for (let key of Object.keys(obj)) deepFreeze(obj[key]);
   
   return;
}

Holis, no pude hacer nada. Me aparece la pantalla en blanco con un error:
Application error: a client-side exception has occurred (see the browser console for more information).

Bastante difícil de entender, al menos para mi.

export function deepFreeze(obj) {

  const propNames = Object.getOwnPropertyNames(obj);

  for (let a of propNames) {
    let prop = obj[a];

    if (typeof prop === 'object' && prop !== null) {
      deepFreeze(prop);
    }
  }
  return Object.freeze(obj);
}

No me anda, lo hice así:

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

¿Alguien sabe por qué?

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