Clase 12 de 23 • Curso de Programación Funcional en JavaScript por Bedu
Contenido del curso
Julio J Yépez
Julio J Yépez
Carlos Gómez Mont
Edward Fernandez
Carlos Enrique Ramírez Flores
Manuel Rivera
José Barrios Pulido
José Agustin Rios
Mario Alejandro Cortez Salinas
Beatriz Pérez Santana
Carlos Eduardo Gomez García
Alejandro Saucedo
elvis rosario
Mario Peña
elvis rosario
Angelo Zambrano
Guadalupe Monge Barale
David Colin
Eder Raúl Abarca Raviela
Martín Gutiérrez Hernández
Emily Perea
Fernanda Aragon
Cristian Manuel Gonzalez Blanco
Alejandro Mejia Escobar
Mario Vizcaino
Brayan Murcia Sanchez
Ana Lima
Fernando Alejandro Yerena Ramos
Eddy Arellanes
Usuario anónimo
Jorge Méndez Ortega
GABRIELA VALLENILLA
Jorge Alberto Alvarez Sone
El estilo usado por el profesor para definir funciones como constantes y no como functions se llama regularmente en JavaScript: arrow function, aunque en términos más generales también las podemos encontrar como funciones lambda y es una característica introducida por EcmaScript.
Acá un poco más sobre este tipo de funciones:
Gracias por compartir, saludos!!
Si no quieren utilizar parseInt pueden colocar '+' antes y les hará el cast a entero:
const newItem = { description: description.value, calories: +calories.value, carbs: +carbs.value, protein: +protein.value, }```
creo que es algo confuso, pero funciona!
huy este truco no me lo sabía, tiene efectos secundarios y por que sucede eso al agregar + ?
Dejo mi aporte, codigo en JS puro
const compose = (...functions) => data => functions.reduceRight((value, func)=> func (value), data) const description = document.getElementById("description"); const calorias = document.getElementById("calories"); const carbohidratos = document.getElementById("carbs"); const proteinas = document.getElementById("protein"); const button = document.getElementById('buttonplus') const IS_INVALID = 'is-invalid' const inputs = [description,calorias,carbohidratos,proteinas] let list = [] // si parametro(las variables) que pase por la función tiene un valor, es valido const isValid = elem => elem.value // El formulario será valido cuando todos los argumentos de cada funcion tenga un valor (estos ya pasaron para ser // validados en la funcion anterior) const isFormValid = () => isValid(description) && isValid(calorias) && isValid(carbohidratos) && isValid(proteinas) // si el parametro que se pase por esta funcion tiene no tiene valor: '' (comprobado por la funcion isValid) // entonces agregale una clase que se llame 'is-invalid' const showInvalid = elem => isValid(elem) ? '' : elem.classList.add(IS_INVALID) // el elemento que pase por la funcion se le pondrá un evento al digitar una tecla, cuando esto suceda se le quitara la clase is-invalid' const addKeyDownEvent = elem => elem.addEventListener('keydown', ()=> elem.classList.remove(IS_INVALID)) // recorre la funcion addKeyDownEvent poniendole los nombres de los inputs del array inputs.forEach(addKeyDownEvent) // recorra los elementos del array en la funcion showInvalid y luego si la condicion de la funcion isFormValid // se cumple (Todos los imput tiene algun valor) realiza la funcion add() const validateInputs = () => { inputs.forEach(showInvalid) if(isFormValid()) { add() } } // adiciona los valores del formulario al array vacio list y despues limpia el formulario const add = () => { const newItem = { description: description.value, calorias: calorias.value, carbohidratos: carbohidratos.value, proteinas: proteinas.value, } list.push(newItem) cleanInputs() console.log(list) } // Limpia el formulario const cleanInputs = () => { description.value ='' calorias.value ='' carbohidratos.value ='' proteinas.value ='' }
Flaco, gracias
Si alguien prefiere usar VanillaJS así pueden limpiar los campos
let cleanInputs = () => {
description.value = ''
calories.value = 0
carbs.value = 0
protein.value = 0
}
A los otros campos también les puse un string vacío porque entonces te sustituye el valor del placeholder por un 0
const cleanInputs = () => { description.value = ""; carbs.value = ""; calories.value = ""; protein.value = ""; };
Aquí hay cosas que no me cuadran... es decir, en capítulos pasados vimos que mutar la variable global no era correcto, pero aquí si la estamos mutando... ¿Es por fines prácticos del curso?...
igual en lugar de list.push() se puede hacer uso del spread operator
list = […list, newItem]
const compose = (...functions) => data => functions.reduceRight((value, func) => func(value), data) description.onkeypress = () => { description.classList.remove('is-invalid') } carbs.onkeypress = () => { carbs.classList.remove('is-invalid') } calories.onkeypress = () => { calories.classList.remove('is-invalid') } protein.onkeypress = () => { protein.classList.remove('is-invalid') } let list = []; const validateInputs = () => { description.value ? '' : description.classList.add('is-invalid') carbs.value ? '' : carbs.classList.add('is-invalid') calories.value ? '' : calories.classList.add('is-invalid') protein.value ? '' : protein.classList.add('is-invalid') if (description.value && carbs.value && calories.value && protein.value) { add() } } const add = () => { const newItem = { description: description.value, calories: parseInt(calories.value), carbs: parseInt(carbs.value), protein: parseInt(protein.value) } list = [...list, newItem] cleanInputs() console.log(list) } const cleanInputs = () => { description.value = '' carbs.value = '' calories.value = '' protein.value = '' }
por favor alquien que me guie como empezar a practicar en javascript ,estoy nuevo en todo esto y realmente necesito ayuda ,que necesito hacer para empezar a practicar creando una webside utilizando javascribt
Primero que nada te recomiendo que veas este curso y lo practiques bastante: Fundamentos de JavaScript. Hay excelente contenido allí.
muchas gracias mi rey
Código sin JQuery:
Al usar arrow function, (teniendo en cuenta que el hoisting no se aplica, ya que solo es para la palabra reservada function y var - Esto se explica en el curso básico de js) ¿es lo mismo llamarlas y luego declararlas o es mejor declararlas primero?
Funciona igual el código, pero pregunto cuál es la mejor práctica . Esta
const cleanInputs = () => { description.value = '' calories.value = 0 carbs.value = 0 protein.value = 0 } const add = () => { const newItem = { description: description.value, calories: parseFloat(calories.value), carbs:parseFloat(carbs.value), protein: parseFloat(protein.value) } list.push(newItem) cleanInputs() console.log(list); }
O esta
const add = () => { const newItem = { description: description.value, calories: parseFloat(calories.value), carbs:parseFloat(carbs.value), protein: parseFloat(protein.value) } list.push(newItem) cleanInputs() console.log(list); } const cleanInputs = () => { description.value = '' calories.value = 0 carbs.value = 0 protein.value = 0 }
Es buena práctica primero declarar y luego usar, también es más fácil para ti cuando busques tus funciones por si sale algún error 😉
Dejo mi aporte de como sería la versión funcional de la función add():
list = add(list); function add(list) { return withArrayCopy(list, (copy) =>{ copy.push( { description: description.value, calories: parseInt(calories.value), carbs: parseInt(carbs.value) , protein: parseInt( protein.value) } ); }); } function withArrayCopy(arr, callback) { let copy = [...arr]; callback(copy); return copy; }
¿la función cleanInputs es una función pura?
Hola, clearInputs() no es una función pura ya que depende de factores externos como los inputs para efectuar su ejecución, además no recibe argumentos para trabajar con ellos y retornar un valor predecible.
Te dejo un concepto rápido de las funciones puras:
Las funciones puras no dependen de factores externos y son predecibles, trabajan con los argumentos que asignamos y siempre devuelve el mismo resultado dependiendo de los argumentos pasados.
() =>
Si quieren que la información de list no se pierda cada vez que recargan la página, pueden almacenarla en el localstorage. Algo importante es que en el localstorage sólo se pueden almacenar cadenas de texto, por fortuna, como ya hemos visto, JSON.stringify nos permite convertir un objeto en una cadena de texto
let list = (localStorage.getItem('list')) ? JSON.parse(localStorage.getItem('list')) : []
Y cada vez que actualicen la lista con la función add, tambien actualizan la variable del localstorage.
localStorage.setItem('list', JSON.stringify(list))
Una forma de probar data o de crear elementos de un array para simular datos podria ser asi:
Array(cantidad_de_veces_a_repetir).fill(dato_con_el_que_quieres_rellenar_tu_array)
Ejemplo:
Array(5).fill(1) // [1,1,1,1,1]
profe una pregunta, si quisiera editar uno de los elementos como selecciono el item del array, pues lo hice recorriendo el array con un for, pero tengo esa sensación de que no es la forma optima de hacerlo
for (var i in list) { if (list[i].value == value) { list[i].desc = desc; break; } }
¡Hola!
En caso de que solamente quieras modificar un valor, no te recomiendo usar un ciclo para hacer eso.
Como buenas prácticas, te recomiendo que utilices los ciclos cuando vayas a realizar modificaciones en 2 o más elementos.
Puedes utilizar el método .filter()
Lo que hará es devolverte un array con los elementos que cumplan con la condición que decidas.
let item = list.filter(currentItem => currentItem == value)
Te recomiendo estas lecturas con respecto al tema: *
En este ejemplo, ¿No sería más correcto en la función add, mandar como parámetro la descripción, calorías y proteínas. Porque de otra manera no se está aplicando el concepto de funciones puras.
Seria igual, ya que la función add esta tomando es el valor de la propiedad value, que retorna un string. En ningún momento se usa la referencia a un objeto.
Por si le funciona a le funciona dejo mi ejemplo donde estoy utilizando JS puro sin utilizarjQuery
const compose = (...functions) => data => functions.reduceRight((value, func) => func(value), data); // Se utiliza $ para identificar que una variable o constante hace referencia // a elementos del DOM const $DESCRIPTION = document.getElementById("description"); const $CALORIAS = document.getElementById("calorias"); const $CARBOIDRATOS = document.getElementById("carboidratos"); const $PROTEINAS = document.getElementById("proteinas"); const ERROR_CLASS = "is-invalid"; const SUCCESS_CLASS = "is-valid"; // Arreglo de elementos const LIST = []; // Asignacion de evntos siempre que se desea asignar un evento aun elemento del DOM // es necesario utilizar addEventListener $DESCRIPTION.addEventListener("keypress", () => $DESCRIPTION.classList.remove(ERROR_CLASS)); $CALORIAS.addEventListener("keypress", () => $CALORIAS.classList.remove(ERROR_CLASS)); $CARBOIDRATOS.addEventListener("keypress", () => $CARBOIDRATOS.classList.remove(ERROR_CLASS)); $PROTEINAS.addEventListener("keypress", () => $PROTEINAS.classList.remove(ERROR_CLASS)); // Limpiando inputs const cleanInputs = () => { $DESCRIPTION.classList.remove(SUCCESS_CLASS); $DESCRIPTION.value = ""; $CALORIAS.classList.remove(SUCCESS_CLASS); $CALORIAS.value = ""; $CARBOIDRATOS.classList.remove(SUCCESS_CLASS); $CARBOIDRATOS.value = ""; $PROTEINAS.classList.remove(SUCCESS_CLASS); $PROTEINAS.value = ""; }; // Agregar elementos en la lista const addElement = () => { const newItem = { description: $DESCRIPTION.value, calorias: $CALORIAS.value, carboidratos: $CARBOIDRATOS.value, proteinas: $PROTEINAS.value, }; LIST.push(newItem); cleanInputs(); }; // funcion para validar los inputs const validateInputs = () => { // Por cuestion de buenas practicas el resultado de una condición // Ternaria tiene que ser asignada a una variable o constante const DESCRIPTION_CLASS = (($DESCRIPTION.value) ? SUCCESS_CLASS : ERROR_CLASS); $DESCRIPTION.classList.add(DESCRIPTION_CLASS); const CALORIAS_CLASS = (($CALORIAS.value) ? SUCCESS_CLASS : ERROR_CLASS); $CALORIAS.classList.add(CALORIAS_CLASS); const CARBOIDRATOS_CLASS = (($CARBOIDRATOS.value) ? SUCCESS_CLASS : ERROR_CLASS); $CARBOIDRATOS.classList.add(CARBOIDRATOS_CLASS); const PROTEINAS_CLASS = (($PROTEINAS.value) ? SUCCESS_CLASS : ERROR_CLASS); $PROTEINAS.classList.add(PROTEINAS_CLASS); if ($DESCRIPTION.value && $CALORIAS.value && $CARBOIDRATOS.value && $PROTEINAS.value) { addElement(); } };
Para agregar los nuevos elementos a la lista no debería ser de forma inmutable también?
