DEV Community

Cover image for Boost Your Efficiency: 15 Secret JavaScript Features Unveiled πŸ€―πŸš€
Femil Savaliya
Femil Savaliya

Posted on • Updated on

Boost Your Efficiency: 15 Secret JavaScript Features Unveiled πŸ€―πŸš€

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.

Code Fast


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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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!');
Enter fullscreen mode Exit fullscreen mode

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();
});
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!'
Enter fullscreen mode Exit fullscreen mode

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! πŸ§‘β€πŸ’»

Top comments (0)