10 Advanced JavaScript Tricks for Developers 💻

10 advanced JavaScript tricks that experienced developers can use to improve their coding skills:

1. Immediately Invoked Function Expressions (IIFEs):
   IIFEs are a way to declare and invoke a function at the same time. They are often used to create a local scope for variables and functions that don’t need to be accessed outside of that scope.

(function() {
  // code goes here
})();

2. Closure:
Closure is a feature in JavaScript that allows inner functions to access variables and parameters from outer functions even after the outer function has returned.

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

const result = outerFunction(5)(3); // result is 8

3. Currying:
Currying is a technique where a function that takes multiple arguments is transformed into a series of functions that each take a single argument.

function add(x, y) {
  return x + y;
}

function curryAdd(x) {
  return function(y) {
    return add(x, y);
  };
}

const result = curryAdd(5)(3); // result is 8

4. Memoization:
Memoization is a technique for optimizing functions that perform expensive calculations by caching the results of previous function calls.

function expensiveCalculation(num) {
  console.log('Performing expensive calculation...');
  return num * 2;
}

const memoizedCalculation = (function() {
  const cache = {};
  return function(num) {
    if (num in cache) {
      return cache[num];
    } else {
      const result = expensiveCalculation(num);
      cache[num] = result;
      return result;
    }
  };
})();

console.log(memoizedCalculation(5)); // Performing expensive calculation... 10
console.log(memoizedCalculation(5)); // 10 (returned from cache)

5. Throttling and Debouncing:
Throttling and debouncing are techniques for limiting the number of times a function is called in response to an event. Throttling limits the rate at which a function can be called, while debouncing waits until the events have stopped before calling the function.

function throttle(func, delay) {
  let lastTime = 0;
  return function(...args) {
    const currentTime = new Date().getTime();
    if (currentTime - lastTime > delay) {
      func(...args);
      lastTime = currentTime;
    }
  };
}

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

6. Partial Application:
Partial application is a technique where a function that takes multiple arguments is transformed into a function that takes fewer arguments by specifying some of the arguments in advance.

function multiply(x, y, z) {
  return x * y * z;
}

const partialMultiply = multiply.bind(null, 2, 3);

const result = partialMultiply(4); // result is 24

7. Function Composition:
Function composition is a technique where multiple functions are combined to form a single function.

function add(x, y) {
  return x + y;
}

function double(x) {
  return x * 2;
}

const addAndDouble = (x, y) => double(add(x, y));

const result = addAndDouble(2, 3); // result is 10

8. Rest and Spread operators:
The rest operator ... can be used to extract the remaining properties of an object or array into a new object or array. The spread operator ... can be used to spread an array or object into a new array or object.

const { prop1, ...rest } = obj; // extract prop1 and the remaining properties into rest
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = [...arr1, ...arr2]; // combine arr1 and arr2 into a new array

9. Object shorthand notation:
When creating an object, you can use shorthand notation to assign properties with the same name as their variable.

const prop1 = 'value1';
const obj = { prop1 }; // shorthand for { prop1: prop1 }

10. Template literals:
Template literals allow you to embed variables and expressions in a string using backticks (`).

const name = 'John';
console.log(`Hello ${name}!`);