JavaScript is a vital language for front-end development, yet many developers may not be familiar with some of its powerful capabilities. Here are 10 valuable JavaScript techniques to enhance coding productivity.

1. Use flatMap for Array Manipulation

flatMap() is a versatile method that combines the functionality of map() and flat(), flattening arrays by one level. This method is ideal for managing nested data with a cleaner syntax.

const arr = [1, 2, [4, 5], 6, 7, [8]];
console.log(arr.flatMap((element) => element));
// Output: [1, 2, 4, 5, 6, 7, 8]

2. Leverage Advanced console Methods

JavaScript's console object offers much more than console.log(). It includes methods like console.time for measuring performance, console.dir for structured output, and console.trace for stack tracing.

console.time('fetch time');
fetch('https://reqres.in/api/users')
  .then(() => console.timeEnd('fetch time'));

3. Deep Copy with structuredClone()

The new structuredClone() method in JavaScript provides a simple, efficient way to perform deep cloning on objects, even with complex types.

const obj = { name: 'Alice', friends: [{ name: 'Bob' }] };
const clonedObj = structuredClone(obj);

4. Tagged Templates for Custom Parsing

Tagged templates let you process template literals through a function. This approach can help with tasks like string formatting, escaping values, and i18n support.

const currencyFormat = (symbols, value) => `${symbols[0]}${value}`;
const price = currencyFormat`$${200}`;

5. Use Symbols as WeakMap Keys

Using symbols as keys in WeakMap helps maintain memory efficiency since weak references allow garbage collection when the object is no longer needed.

let mySymbol = Symbol('mySymbol');
let myWeakMap = new WeakMap();
myWeakMap.set(mySymbol, { name: 'John' });

6. Efficient Data Processing with Generators

Generators allow for fine-grained control over asynchronous programming, ideal for handling large data streams.

async function* fetchData() {
  while (true) {
    const data = await fetch('https://fakestoreapi.com/products').then(res => res.json());
    yield data;
  }
}

7. Private Class Fields with #

JavaScript’s private fields in classes provide encapsulation by restricting access to the internal data.

class Counter {
  #count = 0;
  increment() { this.#count++; }
  getCount() { return this.#count; }
}

8. Promise.allSettled() for Handling Multiple Promises

This method waits for all promises to complete, regardless of their resolution state, returning an array of outcomes.

Promise.allSettled([
  Promise.resolve('Success'),
  Promise.reject('Error')
]).then(results => console.log(results));

9. globalThis for Cross-Environment Global Access

The globalThis object ensures consistent access to the global context across environments like browsers and Node.js.

console.log(globalThis === window); // In browsers: true

10. Dynamic Proxies for Enhanced Object Control

JavaScript proxies allow custom behavior for fundamental operations like property access, assignment, and method calls.

const handler = { get: (obj, prop) => prop in obj ? obj[prop] : 37 };
const proxyObj = new Proxy({}, handler);

By using these advanced JavaScript techniques, you can significantly enhance code readability, maintainability, and efficiency.

Check also 50 Practical JavaScript Tips for Developers and JsDev Space