Playground: Closure para Almacenar Datos de Mascotas

Me encantan estos playgrounds, espero los incorporen en todos los cursos 😃

export function createPetList() {
  const petList = [];
  return function addPet(myPet) {
    if (myPet) {
      petList.push(myPet);
    }
    return petList;
  }
}

Les comparto mi solución.

export function createPetList() {
  const pets = []
  return (info) => info ? pets.push(info): pets
}

Si quieren probar en VSCode con el Code Runner, sin el console.log no devuelve nada, también hay que quitar el “export”. A mí este me salió bien a la primera, el playground anterior fue frustrante, ya voy entendiendo xD

function createPetList() {
  // Tu código aquí 👈
  const petList = [];
  return function (newPet) {
    if (newPet) {
      petList.push(newPet);
    }
    return petList;
  };
}
const myPetList = createPetList();

console.log(myPetList("michi"));
console.log(myPetList("firulais"));
console.log(myPetList());

No pongan los resultados en los comentarios, si no no tiene sentido que pongan playgrounds… es lo mismo que hacer un spoiler 😦

Wow este sistema de Playground es incredible!

Tuve que ver la clase como 4 veces pero creo que lo tengo:
s closures son una característica importante de JavaScript, y entender cómo funcionan es esencial para escribir código limpio y eficiente. Un closure es una función que se define dentro de otra función, y que tiene acceso a las variables y parámetros de la función externa. Además, el closure mantiene una referencia a los valores de estas variables, incluso después de que la función externa ha terminado de ejecutarse.

Veamos un ejemplo para entender mejor cómo funcionan los closures. Imagina que queremos escribir una función que multiplique un número por un factor, pero queremos definir el factor en una función externa:

function multiplicarPor(factor) {
  return function(numero) {
    return numero * factor;
  }
}

var duplicar = multiplicarPor(2);
var triplicar = multiplicarPor(3);

console.log(duplicar(5)); // Output: 10
console.log(triplicar(5)); // Output: 15

En este ejemplo, la función multiplicarPor devuelve otra función que realiza la multiplicación. La función interna mantiene una referencia al valor de factor, que se define en la función externa. Cuando llamamos a multiplicarPor(2), se devuelve una función que multiplica el número por 2. Al llamar a multiplicarPor(3), se devuelve otra función que multiplica el número por 3. En ambos casos, se crea un closure que mantiene una referencia al valor de factor.

En resumen, los closures son útiles porque permiten crear funciones que mantienen una referencia a los valores de las variables y parámetros de la función externa, incluso después de que la función externa ha terminado de ejecutarse. Esto hace que las funciones sean más flexibles y reutilizables, y puede ayudar a evitar errores comunes en el código.

Yo quiero dar un consejo,
No se si alguien pasa por lo mismo que yo pase y aun me pasa, que al momento de que se te presenta un desafio piensas que no puedes.
Quiero decirte que si puedes, no importa cuantas veces te equivoques, tu puedes, inténtalo todas las veces que sea necesario, tu puedes conseguir la respuesta

Esto si que es la educación del futuro!

Para resolver este desafío, se puede crear una función llamada “createPetList” que al ser llamada inicialmente crea una closure que almacena un array vacío. Cada vez que se llama a esta función con un parámetro, se agrega ese parámetro al array almacenado en la closure. Si se llama a la función sin pasarle ningún parámetro, entonces se retorna el array completo almacenado en la closure. A continuación se presenta un ejemplo de código en JavaScript para ilustrar cómo podría implementarse esta solución:

export function createPetList() {
  let petList = [];
  return function (pet) {
    if (pet === undefined) {
      return petList;
    }
    petList.push(pet);
  }
}

la clase anterior estuvo genial y este playground estuvo acorde a lo explicado en la clase anterior

export function createPetList() {
  const petList = [];
  function savePet(pet) {
    if (pet) {
      petList.push(pet)
    } else {
      return petList
    }
  }
  return savePet
}```

Mi solución:

export function createPetList() {
  const petList = []

  return (pet) => {
    if (pet) petList.push(pet)
    
    return petList
  }
}

export function createPetList() {
  const pets = [];
  return petName => petName ? pets.push(petName) : pets;
}

Mi solucion

export function createPetList() {
  let _mascotas = [];

  return function guardarMascota(mascota) {
    if (mascota) {
      _mascotas.push(mascota);
    }
    return _mascotas;
  };
}

Comparto mi solución

export function createPetList() {
  let listaPerros = [];
  function agregarPerros(a) {
    if (!a) {
      return listaPerros;
    } else { 
      listaPerros.push(a);  
    }
  }
  return agregarPerros;
}

export function createPetList() {
  const list = [];
  return function addPet(myPet) {
    if (myPet) {
      list.push(myPet);
    }
    return list;
  }
}

export function createPetList() {
  let lista = [];
  function mascotas(mascota) {
    if (!mascota) {
      return lista;
    }
    lista.push(mascota);
  }
  return mascotas;
}

Aquí mi código:

function createPetList() {
    const pets = [];
    
    function addPet(pet) {
        if (pet) {
            pets.push(pet);
            return pets
        }
        return pets
    }
    console.log(pets);
    return addPet;
}
const myPetList = createPetList();
myPetList("michi");
myPetList("firulais");
myPetList();

Después de ver la clase anterior me quedó mucho más claro. Muchas gracias, Oscar.

Comparto mi solución al problema

export function createPetList() {
  let datos = [];

  function addElement(element) {

    if (!element) {
      return datos;
    } else {
    datos.push(element);
    }
  }

  return addElement;
}

Solución 👈👀🔥

function data() {
  let pet = [];

  function add(new_pet) {
    new_pet ? pet.push(new_pet) : console.log(pet);
  }

  return add;
}

const my_pet = data();
my_pet("cat");
my_pet({ pet: "dog" });
my_pet(["fish", "pig"]);
my_pet();

// [ 'cat', { pet: 'dog' }, [ 'fish', 'pig' ] ]

Solución al playground

export function createPetList() {
  const petList = [];
  return (arg) => {
    if (arg) {
      petList.push(arg);
    } else {
      return petList;
    }
  };
}

reto solcionado

export function createPetList() {
  // Tu código aquí 👈
  let animals = []
  return function addanimal(animal) {
    if (animal) {
      animals.push(animal)
      return animals
    } else {
      return animals
    }
  }
}

Explicación:

_

Mi solución al playground

Mi solución

export  function createPetList() {
  // Tu código aquí 👈
  const petsList = []

  function addPetlist(newPet) {
    return newPet ? petsList.push(newPet) : petsList

  }
  return addPetlist
}

export function createPetList() {
  let list = []
  return function (element) {
    return element ? list.push(element) : list
  }
}

Me fascina los playgrounds de plazi me parecen demasiado útiles sigan haciéndolos porfa!! 😃

export function createPetList() {
  // Tu código aquí 👈
  let petList = [];
  return function createList(name) { // Crear la funcion para crear listas
    if (name) {   // pregunta si hay nombre a agregar
      petList.push(name) // agrega el nombre
      return // se sale de funcion principal createPetList
    }
    return petList // Si no agrego nombre te regresa la lista de nombres
  }
}

Genial… no sabía que era el concepto de closures y me parece genial.

export function createPetList() {
  const animals = [];
  return (newAnimal) => {
    newAnimal && animals.push(newAnimal);
    return animals
  }
}

function pets (){

    let pets = new Array();
    function add (pet) {
        pets.push(pet)
        return console.log(`pets: ${pets}`);

    }
    return add;
}

const milena = pets();

milena("Firulais");
milena("Dam");
milena("Princesa");
milena();

Mi solución 😃

export function createPetList() {
  // Tu código aquí 👈
  const pets = [];
  return function(pet) {
    if (!pet) {
      return pets;
    }
    pets.push(pet);
  }
}

const myPetList = createPetList();
myPetList("michi");
myPetList("firulais");
myPetList();

function createPetList() {
  const petList = []
  return function (newPet) {
    if (newPet) {
      petList.push(newPet)
    }
    return pet
  }
}

Lo mas minimalista que pude.

export function createPetList() {
  let petList = [];
  return (pet) => {
    return (!pet) ? petList : petList.push(pet);
  }
}

Mi solución un poco minimalista:

export function createPetList() {
  let petList = [];
  return (pet) => { 
    return (pet == undefined) ? petList : petList.push(pet);
  }
}

Closure para guardar datos de mascotas

Para permitir que los datos de las mascotas puedan venir en forma de objetos, strings o arrays, se implementa la función agregaMascota() de la siguiente manera:

function createPetList() {
  let myMascota = [];

  function agregaMascota(data) {
    if (arguments.length !== 0) {
      if (Array.isArray(data)) {
        myMascota = myMascota.concat(data);
      } else {
        myMascota.push(data);
      }
    } else {
      return myMascota;
    }
  }

  return agregaMascota;
}
let resultado = createPetList();

• Si se pasó algún argumento a agregaMascota(), se verifica si data es un array utilizando Array.isArray().
  Si data es un array, se utiliza el método concat() para concatenar los elementos del array data con el array myMascota.

• Si data no es un array, se agrega data al final del array myMascota utilizando push().

• Si no se pasó ningún argumento a agregaMascota(), se devuelve el array myMascota con todos los datos de las mascotas introducidas hasta ese momento.

De esta manera, puedes llamar a agregaMascota() con diferentes tipos de datos como argumento, como objetos, strings o arrays, y el código se encargará de manejarlos correctamente.

Ejemplo:

resultado({ nombre: 'Max' });
resultado('Luna');
resultado(['Rocky', 'Bella']);

console.log(resultado()); // Resultado: [{ nombre: 'Max' }, 'Luna', 'Rocky', 'Bella']

Mi solucion al reto

export function createPetList() {
  // Variable para almacenar la lista de mascotas
  const petList = [];

  // Función de flecha que actúa como el closure
  return (info) => {
    // Si se proporciona un valor para 'info', se agrega a la lista de mascotas
    if (info) {
      petList.push(info);
    }
    // Se devuelve la lista de mascotas, ya sea vacía o con los elementos agregados
    return petList;
  };
}

Comparto mi solución

export function createPetList() {
  const petList = []
  return (newPet) => {
    if (!newPet) return petList

    petList.push(newPet)
    return petList
  }
}

Mi aporte. Agradecido por el curso 😃

export function createPetList() {
  // Tu código aquí 👈
  const mascotas = [];
  return (mascota) => {
    if (Boolean(mascota)) {
      mascotas.push(mascota);
    } else {
      return mascotas;
    }
  }
}

const myPetList = createPetList();

myPetList("michi");

myPetList("firulais");

myPetList();

function createPetList() {
  // Tu código aquí 👈
  let pets = [];
  return function PetList(animal) {
      if(animal)
        pets.push(animal);
      return pets;
  }
}
const myPetList = createPetList();
myPetList("michis");
myPetList("firulais");
myPetList();

500: INTERNAL_SERVER_ERROR
Code: INTERNAL_FUNCTION_INVOCATION_FAILED
ID: iad1::svkbg-1686687122105-3eaa933e789[

export function createPetList() {
  const pets = [];
  const save = (pet) => {
    if (!pet) return pets;
    pets.push(pet);
  };
  return save;
}

Prueba unitaria

import createPetList from "../../src/closure/createPetListClosure";
describe("Unit test suite for create a pet list", () => {
  test("Should make save a few pets and return a list and should return the pet list if it does not have params", () => {
    const expectedPetList = ["michi", "firulais"];

    const myPetList = createPetList();

    myPetList("michi");
    myPetList("firulais");
    const petList = myPetList();

    expect(petList).toEqual(expectedPetList);
  });
});

Repositorio: https://github.com/zearkiatos/javascript-closures-and-scopes-kata

export function createPetList() {
  // Tu código aquí 👈
  let list = [];
  function addPet(newPet) {
    if (newPet) {
      list.push(newPet);
    } else {
      return list;
    }
  }
  return addPet;
}

function petList(){
    let petList = [];
    return{
        add: function(pet){
            if(pet){
                petList.push(pet);
            }
            console.log(`Pets: ${petList}`);
        },
        remove: function(valor){
            petList = petList.filter(pets => pets !== valor);
            console.log(`Pets: ${petList}`);
        }
    }
}
const myPetList = petList();
myPetList.add('pet1');
myPetList.add('pet2');
myPetList.remove('pet1');

Lo simplifiqué lo más que pude:

function createPetList() {
    const pets = [];
    return (pet) => !pet ? pets : pets.push(pet);
}

Aquí mi solución, espero les ayude, la probé en VSC ya que en la vista me aparecía error de ‘join’ y en la prueba no mostraba nada

const createPetList = () => {
    const petList = [];
    return (pet) => {
        pet ? petList.push(pet) : console.log(petList);
    }
}

const myPetList = createPetList();
myPetList("michi");
myPetList("firulais");
myPetList();

Mi codigo

export function createPetList() {
  const myPetList = []
  return function myPetInfo(myPet) { 
    if (!myPet) {
      return myPetList
    } else { 
      myPetList.push(myPet)
    }
  }
}

Mi solución

export function createPetList() {
  let petList = [];

  const addPet = (pet = null) => {
    if (pet === null) {
      return petList;
    } else {
      petList.push(pet);
    }
  }
  return addPet;
}

Yo lo hice así xd

export function createPetList() {
  const list = []
  function xd(nombre) {
    if (!nombre) { return list }
    else { list.push(nombre); return list }
  }
  return xd;
}

Comparto mi solución

export function createPetList() {
  const petList = [];
  return function addPet(myPet) { 
    myPet && petList.push(myPet)
    return petList;
  }
}
 

function myMasco() {

let lisMasco = [];
function adiccMasco(mascota){
if(mascota){
lisMasco.push(mascota);

  }else {
    console.log(`Lista de mascota: ${lisMasco}`);
  }

}

return adiccMasco;
}

const miPrimeraLis = myMasco();

miPrimeraLis(‘gatit’);
miPrimeraLis(‘perruncho’);
miPrimeraLis();

Esta fue mi solución al problema:

export function createPetList() {
  const savePets = []

  return function (pets) {

    if (pets != undefined) {
      savePets.push(pets);
      return savePets;
    }
    return savePets;
  }
};

export function createPetList() {
  // Tu código aquí 👈
  let datosMascotas;

  function catchInput(input) {
    if (!datosMascotas) datosMascotas = []

    if(!input) return datosMascotas

    datosMascotas.push(input)
  }

  return catchInput
}

comparto la solución

export function createPetList() {
  // Tu código aquí 👈
  const pets = [];
  function savePet(namePet) {
    if (namePet != undefined)
      pets.push(namePet)

    console.log(pets)
    return pets;
  }
  return savePet;
}

const myPetList = createPetList();
myPetList("michi");
myPetList("firulais");
myPetList();

Esta es mi solución, quise ser un poco más especifico con la condición para que entender la lógica 💚

Acá pueden probar el código:

export function createPetList() {
    const petList = [];
     return function addPet(pet = 0) {
      if (pet != 0) {
        petList.push(pet);
      } else {
        return petList;
      }
    }
  }

const myPetList = createPetList();  

myPetList("michi");

myPetList("firulais");

myPetList();

Este estuvo mas facil que el anterior que no lo entendí para nada, almenos ya entiendo bastantico como funciona los closures, con practica lo entenderé mas y mejor.

Mi solución:

mi aporte me costo hacerlo solo pero aqui esta

export function createPetList() {
  // Tu código aquí 👈
  const mascotas = [];
  return function listaMascotas(mascota) {
    if (mascota) {
      mascotas.push(mascota)
    }
    return mascotas;
  } 
}

Go!! hay muchas formas… de programar…

let vRow = [];

    function funAgruparMascotas(vMascotas = ""){
        if(vMascotas == ""){
            console.log(`No se Ingreso Mascota`);
        }else{
            vRow.push(vMascotas);
            console.log(`Mascota ingresado: ${vMascotas}`);
        }
        return vRow;
    }
    return funAgruparMascotas;

Solución

 export default function createPetList() {
  let pets = []
  return (pet) => {
    // Se agregan los valores nuevos a medida que se ejecuta la función anonima interior
    pets = [...pets, pet]
    // Se limpia los valores falsy del array que pueden llegar ([null, undefined, false, NaN, 0, -0, 0n, ""]) antes de retornar los nuevos campos agregados
    return pets.filter(Boolean)
  }
} 

<code> 
function mascotas() {
    const almacenarMascotas = []
    function agregarMascotas(mascota) {
        if(mascota){
            almacenarMascotas.push(mascota);
        }
        return almacenarMascotas
    }
    return agregarMascotas
}

const miMascota = mascotas();

console.log(miMascota("perro"));
console.log(miMascota("gato"));
console.log(miMascota());

Quiero mostrarles mi solucion usando una funcion flecha

function createPetList() {
	const petList = [];

	return mypets => {
		if (mypets) {
			petList.push(mypets);
		}
		return petList:
	}
}

Una manera de verlo mas facil es el pensar que si nosotros hacemos

function functionGlobal(){
	return function functionInterna(){
		/// codigo
	}
}

const a = functionGlobal();

y luego le hacemos un console.log a a, a es igual a decir

//function functionGlobal(){
	return function functionInterna(){
		/// codigo
	}
//}

y como es un clousure, aunque a es igual a la functionInterna, sigue almacenando los valores que estan fuer de esa function, por eso podemos hacer esto:

export function createPetList() {
  let petList = [];
  return function pushToPetList(petName) {
    if (petName) {
      return petList.push(petName);
    } else {
      return petList;
    }
  }
}

Ya que, como en la guia dice: el input es

const myPetList = createPetList();

myPetList("michi");

myPetList("firulais");

myPetList();

entonces myPetList es igual a la function que es retornada, que en este caso es pushToPetList(petName). entonces myPetList es igual a:

function pushToPetList(petName) {
    if (petName) {
      return petList.push(petName);
    } else {
      return petList;
    }
 }

Es por eso que cuando el input es myPetList('michi'), se llama a pushToPetList('michi'). y cuando se llama a myPetList() sin ningun valor y esta retorna PetList, como es una closure, esta recuerda el valor de PetList pese a estar fuera de la function.

<code>
export function createPetList() {

  const pets = [];


  return mascota =>   mascota ? (pets.push(mascota), pets) : pets;

  
}


const mascotaList = createPetList();

mascotaList();
mascotaList("michy"); 

 export function createPetList() {
  const pets = [];
  return function savePets(pet) {
    return pet ? pets.push(pet) : pets;
  }
}

nos regresa siempre la petList

export function createPetList() {
  const petList = [];
  return pet => (pet && petList.push(pet), petList);
}

Mi solucion:
.
.
.
.
.
.
.
.
.

.

export function createPetList() {
  // Tu código aquí 👈
  const petList = [];
  function addPet(myPet) {
    if (myPet) {
      petList.push(myPet);
    }
    return petList;
  }
  return addPet;
}

va mi solucion para este playground
.
.
.
.
.
.
.
.
.
.
.
.

export function createPetList() {
  // Tu código aquí 👈
  let petList = [];
  function addPet(pet) {
    if (pet) {
      petList.push(pet)
    }
    return petList; 
  }
  return addPet;
}

¡¿Cómo van banda?!

Por acá mi solución por si les sirve 💪:

export function createPetList() {
  const petList = [];
  const savePet = (pet) => {
    return !pet ? petList : petList.push(pet)
  }
  return savePet
}

Gracias por tu ♥.

Esta fue mi versión, fue mas como intentar emular lo aprendido en la clase anterior

export function createPetList() {
  let array = []
  function pet(myPet) {
    if ((myPet === "") || (myPet === null) || (myPet === undefined)) {
      return array
    }else {
      array.push(myPet)
    }
  }
  return pet
}

Va mi código 😄

export function createPetList() {
  const listaMascotas = [];
  function misMascotas(nombreMascota) {
    if (nombreMascota) {
      listaMascotas.push(nombreMascota);
    } else {
      return listaMascotas;
    }
  }
  return misMascotas;
}

habia agregado una validacion para el tipo de variable y funciono, con lo otros ejemplo me di cuenta que esa información no era relevante, no se para que la colocan si javascript no la requiere!!!

  // Tu código aquí 👈
  let listPets = [];
  function operPets(namePet) {

    if (namePet) {
      listPets.push(namePet);
    }
    else {  //Viene en blanco el parametro
      return listPets;
    }
  }
  return operPets;  

function createPetList(){
    const list = [];

    function petList(pet) {
      if (!pet) {
        return list
        
     
      } else {
        return list.push(pet);
        
      }
     
    }
    return petList;
}

.
.
.
.
.
.
.
.
.
.
.
.
.

export function createPetList() {
  // Tu código aquí 👈
  const petList = [];
  return function addpets(pet){
    if (pet) {
      petList.push(pet);
    } else {
      return petList
    }
  }
}

Esta es mi soluciona al reto:

export function createPetList() {
  let petList = [];

  function addPet(newPet) {
    if (newPet) {
      petList.push(newPet);
    }
    else {
      return petList
    }
  }

  return addPet
}

export function createPetList() {
// Tu código aquí 👈
const petList = [];
function processPetData(petData) {
if (petData) {
petList.push(petData);
}
return petList;
}
return processPetData;
}

borre el export y siempre me salia error que tortura.

export function createPetList() {
  // Tu código aquí 👈
  let mascotas = [];
  function myPetAc(insertPet) {
    if (insertPet) {
      mascotas.push(insertPet);
    } else {
      return mascotas;
    }
    console.log( mascotas);
  }

  return myPetAc;
}

Mi solución:

function createPetList() {
  const pets = []
  const addPets = (pet) => {
    if (!pet) {
      return pets
    } else {
      pets.push(pet)
    }
  }
  return addPets
}

Mi solución al reto

export function createPetList() {
  const petList = [];
  function myPetList(pet) {
    if (!pet) {
      return petList;
    } else {
      petList.push(pet);
    }
  }
  return myPetList;
}