Playground: Closure para Almacenar Datos de Mascotas

Clase 10 de 13 • Curso de Closures y Scope en JavaScript

Luis Gabriel Sánchez Quintana

student•

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

David Leonardo Garzón piña

student•

pregunta, porque es necesario el return en la funcion anidada, es que eso no me queda muy claro??

Luis Gabriel Sánchez Quintana

student•

Para que el closure sirva y la funcion se autoejecute, recuerda que tenemos que mandarla a llamar dos veces, en este caso la estoy mandando a llamar inmediatamente, pero bien podría llamarla con el return después de declarar la función así:

exportfunction createPetList() {
  const petList = [];
//Se declara la funcion
  function addPet(myPet) {
    if (myPet) {
      petList.push(myPet);
    }
    return petList;
  }
//Se manda a llamar
	return addPet();
}

Michael Merchan

student•

Les comparto mi solución.

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

Pablo Andres Fernandez Cari

student•

que bonito código! Espero poder programar como tú en el futuro

José Fabián Beltrán Meza

student•

Gracias por compartir tu solución la cual es bastante limpia.

Natali Rivero

student•

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

Rodrigo Massieu

student•

Gracias! No lograba identificar como hacer para que corra sin errores

Wilkins Bernardo Brito Serrano

student•

me podrías explicar por qué pones en tu código return function (newPet) { } No se supone que el retornar una funcion debe hacerse al haberlo terminado de escribir

Abel da Cunha

student•

No pongan los resultados en los comentarios, si no no tiene sentido que pongan playgrounds... es lo mismo que hacer un spoiler :(

Maria Soledad Lanfranconi

student•

es que se deberían poder ocultar los comentarios por que por ej yo estoy acostumbrada a leer primero los comentarios y ni me doy cuenta que no tengo que mirar cuando aparece un playground 😆 pero en fin debería haber una opción, de por si, para ocultar los comentarios y en los playgrounds que esten ocultos por default, en el resto no

Nestor Rios Garcia

student•

Tiene sentido tu razonamiento y la solución de María me parece muy buena, pero no sé que tan difícil es no voltear a ver los comentarios.

M L

student•

Wow este sistema de Playground es incredible!

Cristian Oswaldo Sacta Martos

student•

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.

Jimy Parra

student•

Muy buena explicación

Anderson alejandro Sanchez martinez

student•

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

Jose Ever Muñoz Muñoz

student•

Esto si que es la educación del futuro!

Olga Lucia Moreno Rojas

student•

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

Andrés Schuster

student•

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

Fabian Andres Villon Garcia

student•

Se tiene la premisa de que admita objetos string y arrays todos los codigo revisados no contemplan esto, es error del playground o del texto?

Los datos pueden venir de distintas maneras, pueden ser objetos, strings o arrays.

Juan Carlos Montilla Sánchez

student•

Hola, Fabian.

No entiendo muy bien tu pregunta, pero asumiendo de que te refieres a si están en plural o diferentes tipos de datos; efectivamente, es necesario validar los datos recibidos, debido a que puedes mandar un objeto en un array o puedes mandar arrays dentro de un arrays, por eso debes validar el tipo de datos que será recibido y mostrar la lógica que necesita el programa.

Igualmente, quedo atento a si eso respondió la pregunta que tenías.

Saludos.

Ernesto Alejandro Toledo Romero

student•

Yo me quedé igual. Aunque si en una ocasión me dió error y vi que entre las pruebas había mandado un objeto. Aunque también la descripción no era muy detallada. Cabría muchas dudas de cual sería la estructura del objeto mandado, no creo que se pueda hacer una solución tan universal.

Manuel Andres García Vera

student•

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

Carlos Florez

student•

Mi solución:

export function createPetList() {
  const petList = []

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

Yonerloy Inza Lorenzo

student•

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

Stiven Andres Medina Lopez

student•

Mi solucion

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

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

Ivan Rojas

student•

Comparto mi solución

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

Diego Medardo Saavedra García

student•

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

Andree Sebastian Carlos Arias

student•

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

Nestor Rios Garcia

student•

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

Keren Rodríguez Soto

student••

Mi solución export function createPetList()

{

let datosMascotas=[];

function RegistrarMascotas(mascotas)

{

if (mascotas) {

datosMascotas.push(mascotas);

}

return datosMascotas;

}

return RegistrarMascotas;

}

Playground: Closure para Almacenar Datos de Mascotas

Bienvenida

Bienvenida al Curso de Closures y Scope

Tipos de scope en JavaScript

Global Scope

Function Scope

Block Scope

Reasignación y redeclaración

Strict Mode

Closure

¿Qué es un Closure?

Playground: Crea un Closure para Sumar

Practicando Closures

Playground: Closure para Almacenar Datos de Mascotas

Hoisting

¿Qué es el Hoisting?

Debugging

Debugging

Cierre

Conclusiones