7 Killer 🗡 JS techniques 🔥you've probably never heard of 🔈

JavaScript is a powerful and versatile programming language that is constantly evolving. With new frameworks, libraries, and tools being released every year, it's easy to overlook some of the lesser-known but incredibly useful techniques and features that JavaScript has to offer. In this article, we'll explore 7 killer JavaScript techniques that you've probably never heard of. These techniques will help you to write more efficient, elegant, and maintainable code, and take your JavaScript skills to the next level. So, let's dive in!

Memoization

Memoization is a technique that involves caching the results of expensive function calls and returning the cached results when the same inputs occur again. This technique can significantly improve the performance of your JavaScript code, especially when dealing with complex and time-consuming calculations.
Here is an example of a memoized function that calculates the nth Fibonacci number:

function memoize(func) {
  const cache = {};
  return function (...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = func.apply(this, args);
    cache[key] = result;
    return result;
  };
}

const fibonacci = memoize(function (n) {
  if (n === 0 || n === 1) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
});

console.log(fibonacci(10)); // 55
console.log(fibonacci(20)); // 6765

Currying

Currying is a functional programming technique that involves transforming a function with multiple arguments into a sequence of functions, each with a single argument. This technique can make your code more modular and reusable, and it's particularly useful for creating higher-order functions that can be composed together.
Here is an example of a curried function that adds two numbers:

function add(a) {
  return function (b) {
    return a + b;
  };
}

const add5 = add(5);
console.log(add5(10)); // 15

Throttling

Throttling is a technique that limits the rate at which a function can be called. This technique can prevent performance issues caused by rapid and repeated function calls, such as when handling user input or making API requests.
Here is an example of a throttled function that logs a message every 1000 milliseconds:

function throttle(func, delay) {
  let last = 0;
  return function (...args) {
    const now = new Date().getTime();
    if (now - last < delay) {
      return;
    }
    last = now;
    func.apply(this, args);
  };
}

const logMessage = function (message) {
  console.log(message);
};

const throttledLogMessage = throttle(logMessage, 1000);

throttledLogMessage("Hello"); // logs "Hello"
throttledLogMessage("World"); // does not log
setTimeout(function () {
  throttledLogMessage("Goodbye"); // logs "Goodbye"
}, 2000);

Debouncing

Debouncing is a technique that delays the execution of a function until a certain amount of time has passed without any further function calls. This technique can be useful for handling events that occur frequently, such as scroll or resize events, and can help to prevent performance issues caused by excessive function calls.
Here is an example of a debounced function that logs a message 500 milliseconds after the last function call:

function debounce(func, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

const logMessage = function (message) {
  console.log(message);
};

const debouncedLogMessage = debounce(logMessage, 500);

debouncedLogMessage("Hello"); // does not log
debouncedLogMessage("World"); // does not log
setTimeout(function () {
  debouncedLogMessage("Goodbye"); // logs "Goodbye"
}, 1000);

Partial Application

Partial application is a technique that involves fixing some of the arguments of a function, and returning a new function that takes the remaining arguments. This technique can be useful for creating new functions that are specialized for a particular use case, or for reducing the number of arguments that need to be passed to a function.
Here is an example of a partially applied function that multiplies two numbers:

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);
console.log(double(5)); // 10

Thanks for reading ✨!

These 7 JavaScript techniques are just a small sampling of the many powerful tools and concepts available to developers. By using them in your own code, you can simplify complex operations, reduce code duplication, and improve the performance of your applications. Whether you're a seasoned JavaScript developer or just starting out, it's always a good idea to keep learning and exploring new techniques to take your coding skills to the next level. So go forth and experiment with these techniques, and see what else you can discover in the exciting and constantly evolving world of JavaScript development.