10 Advanced JavaScript Tricks for Experienced Developers

1. Destructuring Assignment

Destructuring assignment simplifies code by extracting values from arrays or objects and assigning them to variables.

// Destructuring arrays
const [firstItem, secondItem, ...rest] = [1, 2, 3, 4, 5];

// Destructuring objects
const { name, age, ...details } = { name: 'Lokesh', age: 25, occupation: 'Developer' };

1. Spread Syntax

Spread syntax extends array elements or object properties into another array or object.

// Copy an array
const originalArray = [1, 2, 3];
const newArray = [...originalArray];

// Merge objects
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObj = { ...obj1, ...obj2 };

1. Currying

Currying transforms a function that takes multiple arguments into a sequence of functions, each taking a single argument.

const multiply = (a) => (b) => a * b;
const multiplyByTwo = multiply(2);
const result = multiplyByTwo(5); // Output: 10

1. Memoization

Memoization caches the results of expensive function calls to improve performance.

const memoizedFibonacci = (function () {
  const cache = {};

  return function fib(n) {
    if (n in cache) return cache[n];
    if (n <= 1) return n;

    cache[n] = fib(n - 1) + fib(n - 2);
    return cache[n];
  };
})();

1. Promises and Async/Await

Promises and Async/Await handle asynchronous operations gracefully, improving code readability and error handling.

// Using Promises
function fetchData() {
  return new Promise((resolve, reject) => {
    // Asynchronous operation
    // resolve(data) or reject(error) based on the operation result
  });
}

// Using Async/Await
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error;
  }
}

1. Closures

Closures remember the environment in which they were created, useful for creating private variables and behavior encapsulation.

function createCounter() {
  let count = 0;
  return function () {
    return ++count;
  };
}

const counter = createCounter();
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2

1. Function Composition

Function composition combines functions to create a new function, encouraging code reuse and step-by-step transformations.

const add = (x) => x + 1;
const multiplyByTwo = (x) => x * 2;
const compose = (...fns) => (x) => fns.reduceRight((acc, fn) => fn(acc), x);
const addAndMultiply = compose(multiplyByTwo, add);
console.log(addAndMultiply(3)); // Output: 8

1. Proxy

Proxy objects allow custom behavior for basic object operations, intercepting and modifying object operations.

const handler = {
  get: (target, prop) => {
    console.log(`Accessing property: ${prop}`);
    return target[prop];
  },
};

const targetObj = { name: 'Lokesh', age: 25 };
const proxyObj = new Proxy(targetObj, handler);
console.log(proxyObj.name); // Output: Accessing property: name \n Lokesh

1. Event Delegation

Event delegation attaches a single event listener to a parent rather than multiple listeners to each child, improving performance and memory usage.

document.getElementById('parent').addEventListener('click', function (event) {
  if (event.target.matches('li')) {
    console.log('You clicked on an li element!');
  }
});

1. Web Workers

Web Workers run JavaScript code in the background, useful for offloading CPU-intensive tasks and improving responsiveness.

// In the main thread
const worker = new Worker('worker.js');
worker.postMessage({ data: 'some data' });

// In the worker.js file
self.addEventListener('message', function (event) {
  const data = event.data;
  // Perform heavy computations with the data
  // Post the result back to the main thread
  self.postMessage({ result: computedResult });
});

By mastering these advanced JavaScript techniques, experienced developers can create more efficient, maintainable, and performant code. These techniques not only demonstrate JavaScript proficiency but also enable solving complex problems with elegance and finesse. Remember, practice and experimentation are key to becoming proficient in JavaScript development.

Ref: Lokesh Prajapati - Medium