5 Essential JavaScript Patterns Every Developer Should Know

#webdev #javascript #tutorial #beginners

Hello my frontend developers, today i will sharing 5 useful patterns which you could use in your projects using javascript.

I'll be creating my code snippets on Scribbler.live first, which is a fantastic platform that allows you to run a JavaScript Notebook, Online Compiler, and Editor without the need for manual setup.
Additionally, I am including a link to code snippets that includes all of the code examples so you can open the snippet and run it yourself to see the results.

Lets dive in...
Table of contents

What is tailwind?
1. Module pattern
2. Revealing module pattern
3. Factory pattern
4. Strategy pattern
5. Proxy Pattern

1. Module pattern

Encapsulates code in a private scope, exposing only what’s necessary.

// Module pattern
const Counter = (() => {
  let count = 0;

  return {
    increment: () => ++count,
    decrement: () => --count,
    getCount: () => count
  };
})();

Counter.increment()
Counter.increment()
scrib.show(Counter.getCount()); // 2

2. Revealing Module pattern

Like module pattern, but explicitly maps private → public methods.

// Revealing module pattern
const User = (() => {
  let name = "Guest";

  function setName(newName) { name = newName; }
  function getName() { return name; }

  return { setName, getName };
})();

User.setName("Shubham");
scrib.show(User.getName()); // Shubham

3. Factory pattern

Creates objects without specifying the exact class/type.

// Factory pattern
function UserFactory(type) {
  switch (type) {
    case "admin": return { role: "Admin", permissions: ["read", "write", "delete"] };
    case "guest": return { role: "Guest", permissions: ["read"] };
    default: return { role: "User", permissions: ["read", "write"] };
  }
}

scrib.show(UserFactory("admin"));

4. Strategy pattern

Defines interchangeable algorithms encapsulated in objects.

// Strategy pattern
const strategies = {
  add: (a, b) => a + b,
  multiply: (a, b) => a * b
};

function execute(strategy, a, b) {
  return strategies[strategy](a, b);
}

scrib.show(execute("add", 2, 3)); // 5
scrib.show(execute("multiply", 2, 3)); // 6

5. Proxy pattern

Intercepts & customizes operations on objects.

// Proxy Pattern
const user = { name: "Shubham", age: 25 };

const proxy = new Proxy(user, {
  get: (target, prop) => prop in target ? target[prop] : "Not Found",
  set: (target, prop, value) => {
    if (prop === "age" && value < 0) throw new Error("Age must be positive");
    target[prop] = value;
    return true;
  }
});

scrib.show(proxy.name); // Shubham
proxy.age = 30;          // ✅ works
// proxy.age = -5;       // ❌ throws error