Optimizar funciones de JavaScript con memoización

JavaScriptJavaScriptBeginner
Practicar Ahora

This tutorial is from open-source community. Access the source code

💡 Este tutorial está traducido por IA desde la versión en inglés. Para ver la versión original, puedes hacer clic aquí

Introducción

En este laboratorio, exploraremos el concepto de memoización en JavaScript. La memoización es una técnica utilizada para optimizar el rendimiento de las funciones mediante la memoria caché de los resultados de llamadas a funciones costosas y la devolución del resultado almacenado en caché cuando se presenten los mismos entradas nuevamente. A través de este laboratorio, aprenderemos cómo implementar la memoización en JavaScript utilizando el objeto Map.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/ToolsandEnvironmentGroup(["Tools and Environment"]) javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/BasicConceptsGroup -.-> javascript/obj_manip("Object Manipulation") javascript/AdvancedConceptsGroup -.-> javascript/closures("Closures") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/ToolsandEnvironmentGroup -.-> javascript/debugging("Debugging") subgraph Lab Skills javascript/variables -.-> lab-28494{{"Optimizar funciones de JavaScript con memoización"}} javascript/data_types -.-> lab-28494{{"Optimizar funciones de JavaScript con memoización"}} javascript/arith_ops -.-> lab-28494{{"Optimizar funciones de JavaScript con memoización"}} javascript/comp_ops -.-> lab-28494{{"Optimizar funciones de JavaScript con memoización"}} javascript/functions -.-> lab-28494{{"Optimizar funciones de JavaScript con memoización"}} javascript/obj_manip -.-> lab-28494{{"Optimizar funciones de JavaScript con memoización"}} javascript/closures -.-> lab-28494{{"Optimizar funciones de JavaScript con memoización"}} javascript/higher_funcs -.-> lab-28494{{"Optimizar funciones de JavaScript con memoización"}} javascript/debugging -.-> lab-28494{{"Optimizar funciones de JavaScript con memoización"}} end

Función memoizada

Para comenzar a codificar, abre la Terminal/SSH y escribe node. Esta función devuelve la función memoizada (almacenada en caché). Aquí están los pasos para utilizar esta función:

  1. Instancia un nuevo objeto Map para crear una caché vacía.
  2. Devuelve una función que toma un solo argumento que se suministrará a la función memoizada. Antes de ejecutar la función, comprueba si la salida para ese valor de entrada específico ya está almacenada en caché. Si es así, devuelve la salida almacenada en caché; de lo contrario, almacénala y devuélvala.
  3. Utiliza la palabra clave function para permitir que el contexto this de la función memoizada se cambie si es necesario.
  4. Establece la cache como una propiedad en la función devuelta para permitir el acceso a ella.

Aquí está el código que implementa la función memoizada:

const memoize = (fn) => {
  const cache = new Map();
  const cached = function (val) {
    return cache.has(val)
      ? cache.get(val)
      : cache.set(val, fn.call(this, val)) && cache.get(val);
  };
  cached.cache = cache;
  return cached;
};

Para ver cómo funciona esta función, puedes utilizarla con la función anagrams. Aquí hay un ejemplo:

const anagramsCached = memoize(anagrams);
anagramsCached("javascript"); // Tarda mucho tiempo
anagramsCached("javascript"); // Devuelve virtualmente de inmediato ya que está almacenado en caché
console.log(anagramsCached.cache); // El mapa de anagramas almacenado en caché

Resumen

¡Felicidades! Has completado el laboratorio de la Función Memoizada. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.