Contenido del curso
Playground - Crea una calculadora con closures
Leonardo de los angeles Espinoza Hernandez
student
Frandel Corporan Rodríguez
student
Sergio Medina
student
Matias Bruna
student
Nicolás Plaza
student
Ricardo Alfonso Chavez Vilcapoma
student
Osvaldo Martinez Guillen
student
Daniel Sebastián Rodríguez
student
Daniel Romao
student
Gonzalo Gutiérrez Castillo
student
Rahiber Paradas
student
Angel Javier Sanchez Tenjo
student
Reynerio Hidalgo
student
Abril Darynka Tapia Sosa
studentSantiago Sabogal
student
Sebastian David Exeni Cazón
student
Joan Alexander Valerio Rodríguez
studentRicardo Alfonso Chavez Vilcapoma
student
David Ochoa
student
Harrison Steve Pinzón Neira
student
Daniel Ruben Rivas Saltos
student
Israel Elias Manjarrez Quimiz
student
Pablo Perez
student
Julio Bastidas
student
Carina Payleman
student🛡️🛡️Escudo anti-spoilers🛡️🛡️
/ El tema de los closures es de lo más divertido en JavaScript, básicamente le estamos diciendo que recuerde un valor de una variable a la cual solo puede ser accedida mediante la función principal. Mediante el paradigma de la programación funcional podemos hacer esta magia y tener variables privadas bueno para algunos situaciones y no tan bueno para otras. / Ahora como bien sabrás, debajo del siguiente tendrás una explicación de la solución propuesta para este ejercicio por lo que haz scroll baja tu propio riesgo. / !dog driving /
Explicación
Ahora sí, aquí la solución comentada
function createCalculator() { // Primero declaramos nuestra variable privada // que tendrá un valor inicial de 0 let total = 0; // dentro del return devolvemos las funciones que modifican la variable privada return { add(value) { // Para sumar, simplemente sumamos el valor al total // y retornamos el total total += value; return total; }, subtract(value) { // Lo mismo con la resta total -= value; return total; }, multiply(value) { // Lo mismo con la multiplicación y división total *= value; return total; }, divide(value) { total /= value; return total; }, // Al final una función para reiniciar el valor a 0 clear() { total = 0; return total; }, getTotal() { // Y el total por si se quiere guardar el valor en otra variable en cierto momento return total; }, }; }
/ Así de fácil, ¿se te ocurre otra manera?. Este tema puede dar para mucho mucho más y es de lo más utilizado 💪
esta otra manera aunque basicamente es lo mismo pero mas simple de leer.
export function createCalculator() { let total = 0 return { 'add': (x) => total += x, 'subtract': (x) => total -= x, 'multiply': (x) => total *= x, 'divide': (x) => total /= x, 'clear': () => total = 0, 'getTotal': () => total } }
Le quedó súper, sobre todo con le uso de las arrow functions, sin embargo, le sugiero usar value en vez de x, queda más limpio el código.
Alerta spoiler, dejo mi aporte: Una forma de realizar el ejercicio bastante sencilla.
export function createCalculator() { let result = 0; const add = (a) => result += a; const subtract = (a) => result -= a; const multiply = (a) => result *= a; const divide = (a) => result /= a; const clear = () => result = 0; const getTotal = () => result; return { add, subtract, clear, multiply, divide, getTotal } }
Cual es el valor value? puse una x en los parametros de la funcion y dentro de la funcion puse un console.log(typeof x) para saber que tipo de dato era pero me sale undefined, en la solucion sale un tal value pero no esta definido o declarado en ningun lado, es un dato por defecto?, vi la solucion y es clara la logica o el algoritmo pero de donde sale el dato value? o donde esta definido ?
Sería bueno que coloques tu code para entenderte mejor
Me costó un poco retornar, ya que no recordaba que las funciones son OBJETOS y se tienen que retornar entre { }.
export function createCalculator() { let total = 0; function add(num) { return total += num; } function subtract(num) { return total -= num; } function multiply(num) { return total *= num; } function divide(num) { return total /= num; } function clear() { return total = 0; } function getTotal() { return total; } return { add, subtract, multiply, divide, clear, getTotal }; }
Comparto mi solución utilizando lo aprendido en la clase anterior . . . . . . . . .
export function createCalculator() { let valor = 0 return { add: function (suma) { return valor+=suma }, subtract: function (resta) { return valor-=resta }, multiply: function (multiplo) { return valor*=multiplo }, divide: function (divisor) { return valor/=divisor }, clear: function () { valor = 0 return valor }, getTotal: function () { return valor } } }
Mi solucion: . . . . . . . . . . . . . . . . . . . . . . . . . .
export function createCalculator() { let total = 0; return { add: (num) => total += num, substract: (num) => total -= num, multiply: (num) => total *= num, divide: (num) => total /= num, clear: () => total = 0, getTotal: () => total, } }
Esta es mi solución: . . . . . .
function createCalculator() { let total = 0; const operation = { add: (number) => { return total += number }, substract: (number) => { return total -= number }, multiply: (number) => { return total *= number }, divide: (number) => { return total /= number }, clear: () => { return total = 0 }, getTotal: () => { return total } } return operation }
Reto cumplido
Excelente solución
Hay veces que modificando el codigo la web da errores y se pierde todo!!!!!
Hola Compañero, te comparto el como lo realizo y para evitarme ese tipo de problemas: Me cree un repo en git y lo tengo clonado en mi local que es donde voy realizando las practicas, una vez que lo termino y veo que en mi consola me funciona, paso a probar al Playground una vez que todo Ok en el Playground, procedo a dejar mi solucion aqui en los comentarios...
Espero te sirva ✨🚀
Spoilers: . . . . .
export function createCalculator() { let counter = 0; function add(value){return counter += value}; function subtract(value){return counter -= value}; function multiply(value){return counter *= value}; function divide(value){return counter /= value}; function clear(){return counter = 0}; function getTotal(){return counter}; return {add, subtract, multiply, divide, clear, getTotal}; };
Mi solución xd:
export function createCalculator() { // Tu código aquí 👈 let acumulador = 0; return { add: function (num) { return acumulador = acumulador + num; }, subtract: function (num) { return acumulador = acumulador - num; }, multiply: function (num) { return acumulador = acumulador * num; }, divide: function (num) { return acumulador = acumulador / num; }, clear: function () { return acumulador = acumulador - acumulador; }, getTotal: function () { return acumulador; } } }
Esta es mi solución :) Por favor no te hagas spoiler D: !!
Pero si lo haces...
Mi solución:
function createCalculator() { let operacion = 0; function add(value) { return operacion += value; } function subtract(values) { return operacion -= values; } function multiply(value) { return operacion *= value; } function divide(value) { return operacion /= value; } function clear() { return operacion = 0; } function getTotal() { return operacion; } return { add, subtract, multiply, divide, clear, getTotal } }```
🛡️🛡️🛡️Escudo anti spoilers🛡️🛡️🛡️
Calculadora con closures
!Spoiler Shield
export function createCalculator() { // Tu código aquí 👈 let total = 0; function add(val) { total += val; return total; } function subtract(val) { total -= val; return total; } function multiply(val) { total *= val; return total; } function divide(val) { total /= val; return total; } function clear() { total = 0; return total; } function getTotal() { return total; } return { add, subtract, clear, multiply, divide, getTotal }; } export function createCalculator2() { let total = 0; return { add: (num) => (total += num), subtract: (num) => (total -= num), multiply: (num) => (total *= num), divide: (num) => (total /= num), clear: () => (total = 0), getTotal: () => total, }; } const calculator = createCalculator(); calculator.add(10); const calculator2 = createCalculator(); calculator2.add(10); calculator2.subtract(-10); const calculator3 = createCalculator(); calculator3.add(10); calculator3.subtract(-10); calculator3.clear(); console.log(calculator.getTotal()); console.log(calculator2.getTotal()); console.log(calculator3.getTotal());
Solución! . . . . . . . . . .
let total = 0; return { add: function (num) { total += num; return total; }, subtract: function (num) { total -= num; return total; }, multiply: function (num) { total *= num; return total; }, divide: function (num) { total /= num; return total; }, clear: function () { total = 0; return total; }, getTotal: function () { return total; } };
mi aporte... aunque me costo entender que debia devolver un objeto 😅
export function createCalculator() { // Tu código aquí 👈 let total = 0; //se retorna un valor con propiedades que contienen funciones return ({ add: (num) => { return total = total + num; }, subtract: (num) => { return total -= num; }, multiply: (num) => { return total *= num; }, divide: (num) => { return total /= num; }, clear: (num) => { return total = 0; }, getTotal: (num) => { return total; } }); }
Mi solución: 👀 👀 👀 👀 👀 👀
export function createCalculator() { let value = 0; return { add(input) { value += input return value }, subtract(input) { value -= input return value }, multiply(input) { value *= input return value }, divide(input) { value /= input return value }, clear() { value = 0 return value }, getTotal() { return value } } }
export function createCalculator() { // Tu código aquí 👈 let total = 0; const add = (value) => total += value; const subtract = (value) => total -= value; const multiply = (value) => total *= value; const divide = (value) => total /= value; const clear = () => total = 0; const getTotal = () => total; return { add, subtract, multiply, divide, clear, getTotal } }
export function createCalculator() { let total = 0; const add = (number) => total+= number; const subtract = (number) => total -= number; const multiply = (number) => total *= number; const divide = (number) => total /= number; const clear = () => total = 0; const getTotal = () => total; return { add, subtract, multiply, divide, clear, getTotal } }
