Playground - Crea una calculadora con closures

Leonardo de los angeles Espinoza Hernandez

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 💪

Frandel Corporan Rodríguez

student•

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

Sergio Medina

student•

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.

Matias Bruna

student•

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

Nicolás Plaza

student•

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 ?

Ricardo Alfonso Chavez Vilcapoma

student•

Sería bueno que coloques tu code para entenderte mejor

Osvaldo Martinez Guillen

student•

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

Daniel Sebastián Rodríguez

student•

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

Daniel Romao

student•

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

Gonzalo Gutiérrez Castillo

student•

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
}

Rahiber Paradas

student•

Reto cumplido

Angel Javier Sanchez Tenjo

student•

Excelente solución

Reynerio Hidalgo

student•

Hay veces que modificando el codigo la web da errores y se pierde todo!!!!!

Abril Darynka Tapia Sosa

student•

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 ✨🚀

Santiago Sabogal

student•

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

Sebastian David Exeni Cazón

student•

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

Joan Alexander Valerio Rodríguez

student•

Esta es mi solución :) Por favor no te hagas spoiler D: !!

Ricardo Alfonso Chavez Vilcapoma

student•

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

David Ochoa

student•

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

Harrison Steve Pinzón Neira

student•

Solución! . . . . . . . . . .

Daniel Ruben Rivas Saltos

student•

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

Israel Elias Manjarrez Quimiz

student•

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

Pablo Perez

student•

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

Julio Bastidas

student•

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

Carina Payleman

student•

. . . . . .

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

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

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

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

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

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

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

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
}

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

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

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

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

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

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

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

Playground - Crea una calculadora con closures

¡Te damos la bienvenida a este reto!

¡Bienvenido al mundo de JavaScript!

Día 1

Variables, funciones y sintaxis básica

Tipos de datos

Playground - Retorna el tipo

Tipos de datos - pt 2

Día 2

Operadores

Hoisting y coerción

Playground - Calcula la propina

Alcance de las variables

Día 3

Condicionales

Playground - Calcula años bisiestos

Switch

Playground - Obten información de mascotas según su tipo

Ciclos

Playground - Dibuja un triangulo

Día 4

Arrays

Playground - Encuentra al michi mas famoso

Objetos

Playground - Obten el promedio de los estudiantes

Día 5 - Checkpoint

Playground - encuentra el palindromo más grande

Día 6

Reasignación y redeclaración

Modo estricto

Día 7

Debugging y manejo de errores

Programación funcional

Día 8

Closures

Playground - Crea una calculadora con closures

Higher order functions

Playground - Crea tu propio método map

Día 9

ECMAScript

TC39

Día 10 - Checkpoint

ES6

ES7

Playground - Task planner

Día 11

Asincronismo

Playground - Promesas

Manejando el asincronismo

Playground - Resuelve el callback hell usando promesas

Playground - Resuelve el callback hell usando async/await

Día 12

Arrays a profundidad

Métodos de arrays: Every, Find y findIndex

Playground - Válida el formulario

Día 13

Métodos de arrays: Includes, Join y concat

Playground - agrupa los productos

Métodos de arrays: Flat y FlatMap

Playground - Encuentra la ubicación del valor buscado

Día 14

Mutable functions

Playground - Modifica una lista de compras

Métodos de arrays: sort

Playground - Ordena los productos

Día 15 - Checkpoint

Playground - Sistema de reservaciones de un hotel

Día 16

Programación orientada a objetos en JavaScript

Objetos literales

Playground - Congela el objeto recursivamente

Día 17

Prototipos en JavaScript

Playground - Modifica el prototype de los arrays

Playground - Crea un auto usando clases

Día 18

Abstracción en JavaScript

Playground - Sistema de carrito de compras

Encapsulamiento en JavaScript

Playground - Encapsula datos de los usuarios