Introduction😎

JavaScript, the language of the web, is constantly evolving. From the basic scripting tool it once was, it has grown into a powerhouse of features and functionalities. While many developers are well-versed in the popular aspects of JavaScript, there are several hidden gems within the language that often go unnoticed. In this comprehensive guide, we'll delve into some lesser-known JavaScript features that can enhance your coding prowess and make your applications shine.

Features🚀

1. Optional Chaining

Say goodbye to those pesky 'undefined' errors when dealing with nested objects or arrays. Optional chaining allows you to access deeply nested properties without worrying about the existence of intermediate properties.

const user = {
  id: 1,
  name: 'John Doe',
  address: {
    street: '123 Main St',
    city: 'Anytown',
    zipcode: '12345'
  }
};

// Without optional chaining
const city = user.address ? user.address.city : 'Unknown';
console.log(city); // Output: Anytown

// With optional chaining
const cityOptional = user.address?.city ?? 'Unknown';
console.log(cityOptional); // Output: Anytown

2. Nullish Coalescing Operator

Building on the concept of optional chaining is the nullish coalescing operator, ??. This operator provides a default value for variables that are null or undefined.

const defaultValue = 'Default Value';
const userInput = null;

const result = userInput ?? defaultValue;
console.log(result); // Output: Default Value

3. BigInt

For handling large integers beyond the limits of Number, JavaScript offers the BigInt type. This type can represent integers with arbitrary precision, making it ideal for scenarios requiring precise arithmetic with big numbers.

const bigNumber = 1234567890123456789012345678901234567890n;
console.log(bigNumber); // Output: 1234567890123456789012345678901234567890n

4. Private Class Fields

If you're working with classes, private class fields offer a way to encapsulate data within a class, restricting access from outside code. This helps in creating more secure and maintainable code.

class Counter {
  #count = 0;

  increment() {
    this.#count++;
  }

  get value() {
    return this.#count;
  }
}

const counter = new Counter();
counter.increment();
console.log(counter.value); // Output: 1

5. Promise.allSettled()

When working with promises, Promise.allSettled() is a handy method that allows you to wait for all promises to settle, whether fulfilled or rejected. This is particularly useful when you need to perform actions after all asynchronous operations are complete.

const promises = [
  Promise.resolve('Resolved Promise'),
  Promise.reject(new Error('Rejected Promise')),
  Promise.resolve('Another Resolved Promise')
];

Promise.allSettled(promises)
  .then(results => console.log(results))
  .catch(error => console.error(error));

6. Intl API

For internationalization and localization of your applications, JavaScript provides the Intl API. This powerful feature enables you to format dates, numbers, and currencies according to different locales.

const date = new Date();
const formattedDate = new Intl.DateTimeFormat('en-US').format(date);
console.log(formattedDate); // Output: 3/4/2024 (or similar based on current date)

7. Web Workers

Last but not least, let's talk about Web Workers. These allow you to run scripts in background threads, separate from the main execution thread of your web application. This can improve performance by offloading tasks that are computationally intensive.

// Create a new worker
const worker = new Worker('worker.js');

// Listen for messages from the worker
worker.onmessage = event => {
  console.log(`Received message from worker: ${event.data}`);
};

// Send a message to the worker
worker.postMessage('Hello from main thread!');

8. Dynamic Import

Dynamic Import is a feature that allows you to import modules on-demand, at runtime. This can be particularly useful for lazy-loading modules, reducing initial bundle size, and improving performance.

button.addEventListener('click', async () => {
  const module = await import('./path/to/module.js');
  module.doSomething();
});

9. Flat and FlatMap

The flat() and flatMap() methods are handy for working with nested arrays. flat() allows you to flatten nested arrays to a specified depth, while flatMap() combines mapping and flattening in a single step.

const nestedArray = [1, 2, [3, 4], [5, 6, [7, 8]]];

const flatArray = nestedArray.flat();
console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6, [7, 8]]

const mappedFlatArray = nestedArray.flatMap(num => num * 2);
console.log(mappedFlatArray); // Output: [2, 4, 6, 8, 10, 12, 14, 16]

10. Array Buffer and Typed Arrays

For handling binary data, JavaScript provides ArrayBuffer and typed arrays such as Int8Array, Uint8Array, and more. These allow you to work with raw binary data in a structured manner.

const buffer = new ArrayBuffer(16);
const int8View = new Int8Array(buffer);

int8View[0] = 42;
console.log(int8View); // Output: Int8Array [42, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

11. Object.freeze()

To prevent modification of object properties, you can use Object.freeze(). This method freezes an object, making it immutable.

const user = {
  name: 'Alice',
  age: 30
};

Object.freeze(user);

user.age = 40; // This change will not take effect
console.log(user); // Output: { name: 'Alice', age: 30 }

12. Array.prototype.some() and Array.prototype.every()

Array.prototype.some() checks if at least one element in the array satisfies a provided condition.

const numbers = [10, 20, 30, 40, 50];

const hasLargeNumber = numbers.some(num => num > 30);
console.log(hasLargeNumber); // Output: true

13. GlobalThis

GlobalThis provides a standardized way to access the global object across different environments (such as browsers and Node.js).

console.log(GlobalThis); // Output: [object Window] (in a browser)
console.log(GlobalThis); // Output: [object global] (in Node.js)

14. Numeric Separators

Numeric separators allow you to make large numeric literals more readable by adding underscores.

const billion = 1_000_000_000;
console.log(billion); // Output: 1000000000

15. String.prototype.replaceAll()

Replacing all occurrences of a substring in a string is simplified with String.prototype.replaceAll(). This method replaces all matches of a specified string with another string.

const sentence = 'JavaScript is amazing! JavaScript is powerful!';

const newSentence = sentence.replaceAll('JavaScript', 'JS');
console.log(newSentence);
// Output: 'JS is amazing! JS is powerful!'

Conclusion🧳

These lesser-known JavaScript features can greatly enhance your coding productivity and make your code more elegant and efficient. Incorporate them into your projects to unlock their full potential!

Comment your favourites and don't forget to give a 🫶 if you find this blog useful.

Happy coding! 🧑‍💻