Proyecto: Agregar elementos a la lista

Clase 12 de 23 • Curso de Programación Funcional en JavaScript por Bedu

Julio J Yépez

student•

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.

Julio J Yépez

student•

Acá un poco más sobre este tipo de funciones:

Carlos Gómez Mont

student•

Gracias por compartir, saludos!!

Edward Fernandez

student•

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

Carlos Enrique Ramírez Flores

student•

creo que es algo confuso, pero funciona!

Manuel Rivera

student•

huy este truco no me lo sabía, tiene efectos secundarios y por que sucede eso al agregar + ?

José Barrios Pulido

student•

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 =''
}

José Agustin Rios

student•

Flaco, gracias

Mario Alejandro Cortez Salinas

student•

Si alguien prefiere usar VanillaJS así pueden limpiar los campos
let cleanInputs = () => {
description.value = ''
calories.value = 0
carbs.value = 0
protein.value = 0
}

Beatriz Pérez Santana

student•

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

Carlos Eduardo Gomez García

teacher•

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

Alejandro Saucedo

student•

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 = ''
}

elvis rosario

student•

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

Mario Peña

student•

Primero que nada te recomiendo que veas este curso y lo practiques bastante: Fundamentos de JavaScript. Hay excelente contenido allí.

elvis rosario

student•

muchas gracias mi rey

Angelo Zambrano

student•

Código sin JQuery:

Guadalupe Monge Barale

student•

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
}

David Colin

teacher•

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 😉

Eder Raúl Abarca Raviela

student•

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

Martín Gutiérrez Hernández

student•

Emily Perea

student•

¿la función cleanInputs es una función pura?

Fernanda Aragon

student•

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.

Cristian Manuel Gonzalez Blanco

student•

() =>

Alejandro Mejia Escobar

student•

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

Mario Vizcaino

student•

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]

Brayan Murcia Sanchez

student•

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

Ana Lima

student•

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

Fernando Alejandro Yerena Ramos

student•

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: *

JavaScript — Learn to Chain Map, Filter, and Reduce
Learn & Understand JavaScript’s Filter Function

Eddy Arellanes

student•

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.

Usuario anónimo

user•

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.

Jorge Méndez Ortega

student•

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

GABRIELA VALLENILLA

student•

Para agregar los nuevos elementos a la lista no debería ser de forma inmutable también?

Jorge Alberto Alvarez Sone

student•

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 =''
}

 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 = ''
}

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

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
}

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

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

Proyecto: Agregar elementos a la lista

Introducción al curso y conceptos base

Qué aprenderás sobre la programación funcional

Programación funcional: qué es

Boilerplate: Base para el proyecto del curso

Funciones

Funciones Algebraicas y Funciones de JavaScript

Qué son funciones puras

Proyecto: Obtener el valor de los inputs

Objetos y Tipos de Memoria en JavaScript

Copiar y modificar objetos en JavaScript

Utilizando inmutabilidad en nuestras funciones

Proyecto: Validar inputs

Estado compartido en funciones

Estado compartido o shared state

Proyecto: Agregar elementos a la lista

Composición de funciones, Closures y Currying

Funciones compuestas o Function Composition

Completando las funciones para generar etiquetas HTML

Closures en programación funcional

Currying

Proyecto: Construyendo filas y celdas

Higher Order Functions

Introducción a las Higher Order Functions

Proyecto: Actualizando el total de calorías

Proyecto: Mostrar elementos

Proyecto: Eliminar elementos

Bonus: Declarative Programming

Programación Declarativa

Conclusiones

Conclusiones