10 Cool Advanced JavaScript Coding Techniques That You Should Use

Photo by Jeff Sheldon on Unsplash

JavaScript is a powerful programming language that is constantly evolving and has a huge developer community. There are always new techniques and tricks being shared, and it can be overwhelming to keep up. In this article, we’ll go over ten cool and useful advanced JavaScript coding techniques that every developer should know.

1. Promises

Promises are a way to handle asynchronous operations in JavaScript. They provide a way to make async operations behave like sync operations, which can make it easier to write async code and avoid callback hell.

Here’s an example:

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('some data');
    }, 1000);
  });
}

getData().then(data => console.log(data)); // Output: "some data"

2. Async iterators and generators

Async iterators and generators are a way to create async iteration patterns in JavaScript. They allow you to iterate over async data streams and pause/resume execution, which can be useful when working with large data sets or when you want to perform async operations in a synchronous-like manner.

Here’s an example:

async function* getData() {
  yield 'some data';
  yield 'more data';
  yield 'even more data';
}

(async () => {
  for await (const data of getData()) {
    console.log(data);
  }
})();
// Output:
// "some data"
// "more data"
// "even more data"

3. Classes

Classes are a way to create object-oriented code in JavaScript. They provide a way to define reusable object structures and behaviors, which can make it easier to write maintainable and scalable code.

Here’s an example:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}
const john = new Person('John', 30);
john.greet(); // Output: "Hello, my name is John and I am 30 years old."

4. Modules

Modules are a way to organize and reuse code in JavaScript. They provide a way to define private and public variables and functions, which can make it easier to structure and maintain your codebase.

Here’s an example:

// in file "math.js"
export const sum = (a, b) => a + b;
export const multiply = (a, b) => a * b;

// in file "app.js"
import { sum, multiply } from './math';
console.log(sum(1, 2)); // Output: 3
console.log(multiply(2, 3)); // Output: 6

5. Decorators

Decorators are a way to add additional behavior to existing code in JavaScript. They use the @ symbol and can be used to decorate classes, methods, and properties. They can be useful for creating custom annotations or for modifying the behavior of existing code.

Here’s an example:

function log(target, name, descriptor) {
  const original = descriptor.value;
  descriptor.value = function() {
    console.log(`Calling ${name} with`, arguments);
    return original.apply(this, arguments);
  };
  return descriptor;
}

class Math {
  @log
  add(a, b) {
    return a + b;
  }
}
const math = new Math();
math.add(2, 3); // Output: "Calling add with [2, 3]"

6. Proxy

A Proxy is an object that acts as an intermediary between the original object and the user. It allows you to intercept and modify operations on an object, which can be useful for debugging, validation, or creating custom behavior.

Here’s an example:

const person = { name: 'John', age: 30 };
const handler = {
  get: (target, prop) => {
    console.log(`Getting prop "${prop}"`);
    return target[prop];
  },
  set: (target, prop, value) => {
    console.log(`Setting prop "${prop}" to value "${value}"`);
    target[prop] = value;
  },
};
const proxy = new Proxy(person, handler);

7. Reflect

Reflect is a built-in object that provides methods for interacting with objects and the runtime. It allows you to perform the same operations as the Object methods, but with a more functional style.

Here’s an example:

const person = { name: 'John', age: 30 };
console.log(Reflect.get(person, 'name')); // Output: "John"
Reflect.set(person, 'age', 31);
console.log(person.age); // Output: 31

8. Map

A Map is a data structure that stores key-value pairs. It allows you to use any value (not just strings) as a key and provides fast lookup and insertion performance.

Here’s an example:

const map = new Map();
map.set(1, 'one');
map.set(2, 'two');
map.set(3, 'three');
console.log(map.get(2)); // Output: "two"
console.log(map.size); // Output: 3

9. Set

A Set is a data structure that stores unique values. It allows you to add and remove values and check if a value exists in the set.

Here’s an example:

const set = new Set();
set.add(1);
set.add(2);
set.add(3);
console.log(set.has(2)); // Output: true
console.log(set.size); // Output: 3

10. WeakMap

A WeakMap is a Map that only holds weak references to its keys. This means that the keys can be garbage collected if there are no other references to them. This can be useful for creating cache objects or for creating objects with private properties.

Here’s an example:

const weakMap = new WeakMap();
const key = {};
const value = { data: 'some data' };
weakMap.set(key, value);
console.log(weakMap.get(key)); // Output: "{ data: 'some data' }"
key = null;
console.log(weakMap.get(key)); // Output: undefined

These are just a few of the many advanced JavaScript coding techniques that are available to developers. Mastering these techniques can help you become a more proficient and efficient programmer, and keep you up-to-date with the latest trends and best practices in the JavaScript community.