Science Knowings: JavaScript Course For Social Media

Lazy Evaluation

From Thunks to Lazy Evaluation

In the previous session, we discussed thunks: functions that delay the evaluation of code. Today, we dive into lazy evaluation, a powerful technique that takes this concept further.

What is Lazy Evaluation?

Lazy evaluation is a programming paradigm where computations are only performed when they are needed, rather than immediately.

Instead of eagerly evaluating an expression or function, lazy evaluation suspends the evaluation until its result is explicitly requested.

Benefits of Lazy Evaluation

  • Performance optimization: It reduces unnecessary computations, improving performance.
  • Memory efficiency: It avoids allocating resources for unused results.
  • Modularity and reusability: It promotes code that is easier to reason about and reuse.
  • Optimization Opportunities

  • Infinite sequences: Lazy evaluation enables the generation of infinite sequences without consuming excessive memory.
  • Memoization: Caching the results of expensive computations for later reuse.
  • Demand-driven evaluation: Evaluating only the necessary parts of a computation based on demand.
  • Lazy Execution in JavaScript

    JavaScript supports lazy evaluation through mechanisms like:

    • Generators: Functions that yield values one at a time, allowing for lazy iteration.
    • Promises: Objects that represent the eventual result of an asynchronous operation, enabling deferred execution.

    Lazy vs. Eager Evaluation

    Lazy EvaluationEager Evaluation
    Computes values only when neededComputes values immediately
    Saves memory and resourcesCan lead to wasted computations
    Useful for infinite sequences and memoizationBest for computations that need all values upfront

    Chain of Responsibility Pattern

    A design pattern where requests are passed through a chain of handlers, and each handler can choose to process the request or pass it to the next handler. Lazy evaluation can be implemented using this pattern to chain operations and only execute them when necessary.


    Memoization is a technique that caches the results of a function call for later reuse.

    By memoizing a lazy function, we can avoid recomputing the same result multiple times, improving performance.

    Memoize Function

    const memoize = (fn) => { const cache = {}; return (...args) => { const key = JSON.stringify(args); if (key in cache) { return cache[key]; } const result = fn(...args); cache[key] = result; return result; }; };

    Decorators for Lazy Evaluation

    We can use decorators to add lazy evaluation capabilities to JavaScript functions.

    Example using the popular lodash library:

    const lazy = require('lodash/once'); @lazy function expensiveComputation() { // ...computation }

    Throttling and Debouncing

    Throttling and debouncing are techniques for optimizing event handlers.

    They use lazy evaluation to delay the execution of a function until a certain amount of time has passed or a specific condition is met.

    Lazy Loading

    Lazy loading is a technique for deferring the loading of resources until they are actually needed.

    This can improve page load times and reduce bandwidth usage.

    When Not to Use Lazy Evaluation

  • When the overhead of lazy evaluation outweighs the benefits.
  • When the order of execution is essential (e.g., in state management).
  • When debugging, as it can make it harder to track the flow of execution.
  • Next Topic: Map, Filter, and Reduce in Functional Programming

    In the next session, we will explore map, filter, and reduce, essential functional programming techniques for working with arrays and performing complex transformations on data. Follow us to learn more!