🧠 10 Truly Mind-Blowing JavaScript Tricks You Might Not Know

Abdulbasit Alabi — Tue, 15 Jul 2025 07:29:52 +0000

Let’s be honest — most lists titled “mind-blowing JavaScript tricks” just rehash ES6 basics like destructuring or let and const.

This post goes deeper. Below are 10 lesser-known JavaScript tricks — ranging from clever patterns to powerful built-ins — that can seriously level up your JS game.

1. ❄️ Deep Freeze: Make Objects Fully Immutable

Want to prevent accidental mutations in deeply nested objects? Try this:

function deepFreeze(obj) {
  Object.freeze(obj);
  Object.getOwnPropertyNames(obj).forEach(prop => {
    if (
      typeof obj[prop] === 'object' &&
      obj[prop] !== null &&
      !Object.isFrozen(obj[prop])
    ) {
      deepFreeze(obj[prop]);
    }
  });
  return obj;
}

🔐 Perfect for state management in Redux or Vuex.

2. 🔁 Closures for Private State

JavaScript doesn’t have native private variables, but closures get the job done:

const counter = (() => {
  let count = 0;
  return () => ++count;
})();

counter(); // 1
counter(); // 2

No one can touch count from the outside. It’s safe and scoped.

3. 🕵️ Intercept Everything with Proxies

Proxies let you trap operations like reading, writing, or deleting properties.

const watched = new Proxy({}, {
  get(target, prop) {
    console.log(`Accessing ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Setting ${prop} = ${value}`);
    target[prop] = value;
    return true;
  }
});

watched.name = 'Basit'; // Logs: Setting name = Basit
watched.name;           // Logs: Accessing name

Use cases: validation, reactivity (like Vue), auto-tracking, etc.

4. 🧠 Currying: Break Down Your Functions

Currying transforms a multi-arg function into a sequence of single-arg functions:

const multiply = a => b => a * b;

const double = multiply(2);
double(5); // 10

💡 Excellent for functional pipelines and partial application.

5. 🚦 Asynchronous Iteration with `for await...of`

Want to loop over promises or async data streams?

const urls = ['https://api1.com', 'https://api2.com'];

for await (const res of urls.map(fetch)) {
  const data = await res.json();
  console.log(data);
}

Handles promises one at a time — sequentially.

6. 🪝 Monkey Patch Carefully

While dangerous in shared environments, monkey patching can be useful in isolated scopes:

Array.prototype.last = function () {
  return this[this.length - 1];
};

[1, 2, 3].last(); // 3

✋ Only do this in fully controlled codebases. Avoid patching built-ins globally in libraries.

7. 🌀 Tail Call Optimization (TCO)

JS supports tail call optimization (in theory), reducing stack usage in recursion:

"use strict";

function factorial(n, acc = 1) {
  if (n <= 1) return acc;
  return factorial(n - 1, acc * n); // TCO-friendly
}

📝 Supported in Safari and older spec targets, not in V8 (Chrome/Node) — yet.

8. 🧨 Self-Destructing Functions

Run something once, and never again:

const once = fn => {
  let called = false;
  return (...args) => {
    if (!called) {
      called = true;
      return fn(...args);
    }
  };
};

const logOnce = once(console.log);
logOnce('Hello'); // Logs
logOnce('World'); // Ignored

Great for one-time init logic, onboarding screens, or analytics pings.

9. 🧬 Flatten Arrays Recursively Without `.flat()`

Need to flatten an array without using .flat()?

const flatten = arr =>
  arr.reduce((acc, val) =>
    acc.concat(Array.isArray(val) ? flatten(val) : val), []
  );

flatten([1, [2, [3]], 4]); // [1, 2, 3, 4]

Works in older environments or for full control of depth.

10. 📦 Dynamic Imports for Lazy Loading

Want to reduce your bundle size and only load when necessary?

if (somethingHeavyNeeded) {
  import('./heavy-module.js').then(module => {
    module.run();
  });
}

✅ Supported in modern browsers and Node.js.

🏁 Final Thoughts

JavaScript has layers. Mastering the basics is good — but tapping into these patterns can help you write cleaner, smarter, more efficient code.

Which one of these tricks did you find most useful or surprising?

Got a favorite trick that didn’t make the list? Share it in the comments 👇

JavaScript Immediately invoked Function Expression (II Don noFE)?

Abdulbasit Alabi — Mon, 10 Aug 2020 13:33:42 +0000

What is IIFE?

So you have been hearing IIFE and have been wondering, what is this IIFE?
Well, worry no more!

An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.

How does a normal functions looks like?

   function multiply() {
 var x = 20;
 var y = 20;
 var answer = x * y;
 console.log(answer);
 }
multiply();

This function simply multiplies together the values of x and y. We then call the functions shortly after.

Why then do we need IIFE?

The most common use case for IIFE is to create a closure with some private variables inside it.

The above function can be be reused anytime we want to. We can just do that by calling the function multiply().

What if that is not what we want? What if we simply want to call a function in order to get an output, not to reuse it?
We would not want our program to ever be able to accidentally access it. We would not want to pollute the global object.
That is when IIFE comes into play.

How do we then write an IIFE?

It's simple!
Let's take it from the name:

Function expression

To make a function to be a function expression, we declare it inside parentheses like this:

(function () {
    statements
});

Immediately Invoked

To make it immediately invoked, we append () to the function expression.

(function () {
    statements
})();

We basically have a function defined inside parentheses, and then we append () to execute that function.

-The first is the anonymous function with lexical scope enclosed within the Grouping Operator (). This prevents accessing variables within the IIFE idiom as well as polluting the global scope.
-The second part creates the immediately invoked function expression () through which the JavaScript engine will directly interpret the function.

We can rewrite our multiply function using IIFE

  (function multiply() {
 var x = 20;
 var y = 20;
 var answer = x * y;
 console.log(answer);
 })();

This will immediately call the function

Assigning IIFE to a variable

We can assign an IIFE to a variable.This will store the function's return value, not the function definition itself.

var result =  (function multiply() {
 var x = 20;
 var y = 20;
 var answer = x * y;
 console.log(answer);
 })();

And then we can have the result like this:

 result;
 //400

This is my first post on dev.to 😁. Hope you like it.

DEV Community: Abdulbasit Alabi