Unraveling the mysteries of function closures in Javascript and Typescript

Hey ninjas 🥷! If you’ve ever come across the concept of function closures, you know it packs quite a punch in the programming dojo. Think of it as a hidden technique that, once mastered, can make your code more efficient and encapsulated. Today, we’ll step into the dojo together to learn about function closures - what they are, their benefits, and how to use them to our advantage.

The essence of function closures

What exactly are function closures?

A function closure occurs when an inner function retains access to its outer function’s scope, even after the outer function completes its execution. It’s as if the inner function holds onto the knowledge 🧠 of its parent function like a deep-rooted tree 🌳 keeping the wisdom of the earth even after seasons change.

A basic example:

function outerFunction(x: number) {
  return function innerFunction(y: number) {
    return x + y;
  };
}

const addTwo = outerFunction(2);

console.log(addTwo(5)); // Output: 7

Here, outerFunction bequeaths to innerFunction the ability to remember x. It’s like bequeathing an enduring legacy that outlives the original context in which it was established.

Advantages of wielding function closures

1. Data encapsulation: Closures keep your data tucked away securely 🔒, accessible only to the functions that need to know 🔑, akin to a hidden compartment in a ninja’s toolkit.
2. Clean global namespace: By using closures, you prevent littering the global scope with unnecessary variables, much like how a disciplined martial artist maintains a clutter-free training space 🧘.
3. Enabling partial applications: Through closures, you get the flexibility of setting parameters beforehand, akin to an archer 🏹 nailing a bullseye by adjusting the bowstring tension in advance.

Armed with these benefits, we can delve deeper into creating our own closures in JS/TS.

Crafting function closures in JS/TS

Concocting a counter closure

function counter() {
  let count = 0;

  return function increment() {
    return ++count;
  };
}

const incrementCount = counter();

console.log(incrementCount()); // Output: 1
console.log(incrementCount()); // Output: 2
console.log(incrementCount()); // Output: 3

The counter function spawns an increment function with a secret - the count variable. This example illustrates how a closure shields the count variable, like a hidden fortress 🏯, only visible to those within its walls - in this case, our increment function.

Harnessing memoization with closures

function memoize() {
  const cache: { [key: string]: number } = {};

  return function calculate(input: string) {
    if (input in cache) {
      console.log("Fetching from cache");

      return cache[input];
    }

    const result = Number(input) ** 2;

    cache[input] = result;

    return result;
  };
}

const squareValue = memoize();

console.log(squareValue("2")); // Output: 4
console.log(squareValue("4")); // Output: 16
console.log(squareValue("2")); // Output: 4 (Fetching from cache)

In the above memoization technique, the calculate function within memoize creates a closure so that its cache remains accessible across calls, allowing it to retrieve and store results like a meticulous librarian.

The philosophy of lexical scoping in closures

Lexical scoping refers to the idea that a function’s scope is determined at the time of its definition, not its execution. It’s like an ancestral legacy passed down to an inner function, which can then use the outer function’s resources seamlessly.

Function closures in action

1. Event listeners: Like devoted guardians, closures retain the relevant outer scope variables needed to manage UI events reliably and efficiently.

   function activateDavinciSecretMode(selector: string) {
     const body = document.querySelector("body");
     const elements = document.querySelectorAll(selector);
   
     function applyDaviciSecretMode() {
       Array.from(elements).forEach((element) => {
         element.style.transform = "rotateY(180deg)";
         element.style.fontStyle = "italic";
       });
   
       body.removeEventListener("click", applyDaviciSecretMode);
     }
   
     body.addEventListener("click", applyDaviciSecretMode);
   }
   
   activateDavinciSecretMode("body > *");

   This applyDavinciSecretMode closure remembers the elements from when activateDavinciSecretMode was called, even when the click event happens much later.

2. Encapsulation of class members: Within classes, closures become the watchful protectors of data, ensuring class members remain private and under strict surveillance.

   class SecretKeeper {
     #secret = '';
     
     constructor(secret: string) {
       this.#secret = secret;
     }
     
     getRevealSecret() {
       return () => this.#secret;
     }
   }
   
   const secretKeeper = new SecretKeeper('💰');
   const getSecret = secretKeeper.getRevealSecret();
   
   console.log(getSecret()) // '💰'

   The returned function from getRevealSecret() maintains a closure over this.#secret, allowing access only through the specifically designed getSecret function.

3. Currying and specialization: Tailored like a custom-fit garment, closures allow for pre-configuring parameters, sharpening the specificity of our functions.

   const power = (a: number) => (b: number) => b ** a;
   const square = power(2);
   const cube = power(3);
   
   console.log(square(2)) // 4
   console.log(square(3)) // 9
   console.log(square(4)) // 16
   
   console.log(cube(2)) // 8
   console.log(cube(3)) // 27
   console.log(cube(4)) // 64

   Here, square and cube are like a personalized strike, where power is the style of attack 🥋, and square and cube are the specific moves you deploy in the battle field 👊.

Mastering the art of function closures with best practices

Best practices for harnessing function closures

• Memory awareness: Exercise caution when creating closures in lasting scopes to avoid memory leaks, much like how a disciplined fighter maintains endurance throughout the battle.
• Mutable variables: Mutable shared variables in closures can lead to unpredictable outcomes; consider employing immutable data or establishing explicit agreements between closures to ensure consistent behavior.
• Closing over values: When dealing with loops, it’s wise to copy values separately for each iteration to avoid closure traps, similar to a strategic formation in martial arts to guard against vulnerabilities.

Enhancing performance and cleanliness

• Closure economy: Engage closures with a purpose; unnecessary use can lead to code that’s as bloated as an overused move in a fight.
• Efficient specialization: Currying bolsters specificity, but restraint is crucial to avoid a maze of overly specialized functions.
• Naming closures: Giving meaningful names to closures is the hallmark of readability and maintainability, just as a carefully chosen martial arts technique name communicates its essence.

Conclusion:

We’ve explored the shadows and emerged with a clearer understanding of function closures in Javascript and TypeScript. Like any skillful practitioner, we know our code’s strength lies in elegance and thoughtful application of techniques.

Embrace these insights in your Javascript and TypeScript adventures, stay adaptable and continue honing your craft - remain as adaptable as water, shaping your code fluidly and harmoniously. Happy coding! 💻

Review:

function outerFunction(x: number) {
  return function innerFunction(y: number) {
    return x + y;
  };
}

const addTwo = outerFunction(2);

console.log(addTwo(5)); // Output: 7

function memoize() {
  const cache: { [key: string]: number } = {};

  return function calculate(input: string) {
    if (input in cache) {
      console.log("Fetching from cache");

      return cache[input];
    }

    const result = Number(input) ** 2;

    cache[input] = result;

    return result;
  };
}

const squareValue = memoize();

console.log(squareValue("2")); // Output: 4
console.log(squareValue("4")); // Output: 16
console.log(squareValue("2")); // Output: 4 (Fetching from cache)

class SecretKeeper {
  #secret = '';
  
  constructor(secret: string) {
    this.#secret = secret;
  }
  
  getRevealSecret() {
    return () => this.#secret;
  }
}

const secretKeeper = new SecretKeeper('💰');
const getSecret = secretKeeper.getRevealSecret();

console.log(getSecret()) // '💰'

const power = (a: number) => (b: number) => b ** a;
const square = power(2);
const cube = power(3);

console.log(square(2)) // 4
console.log(square(3)) // 9
console.log(square(4)) // 16

console.log(cube(2)) // 8
console.log(cube(3)) // 27
console.log(cube(4)) // 64