JavaScript is continuously evolving, and with the release of ES15, developers will enjoy new and more powerful features in the language. These advancements not only make coding more efficient but also introduce tools to tackle complex programming challenges with ease.
In this post, we will explore ten of the Most Important ES15 Features that you must know to stay ahead in modern JavaScript development. From syntax enhancements to performance optimizations, these features aim to simplify workflows and improve code readability. We will break down each feature with detailed explanations, code examples, and outputs, as well as provide comparisons with earlier ECMAScript versions to showcase the improvements in action.
1. Array.prototype.groupBy()
The groupBy() method enables you to divide elements in an array into groups given a callback. The new groupBy() method facilitates this operation of grouping of array elements so that the code looks more readable and concise.
const peoplesData = [
{ name: 'Raju', age: 30 },
{ name: 'Reena', age: 25 },
{ name: 'Tanuu', age: 30 },
{ name: 'David', age: 25 },
];
const groupedByAge = peoplesData.groupBy(person => person.age);
console.log(groupedByAge);
// Output:
// {
// 25: [{ name: 'Reena', age: 25 }, { name: 'David', age: 25 }],
// 30: [{ name: 'Raju', age: 30 }, { name: 'Tannu', age: 30 }]
// }
// Previous approach (ES6+)
const groupedByAgeOld = peoplesData.reduce((acc, person) => {
if (!acc[person.age]) {
acc[person.age] = [];
}
acc[person.age].push(person);
return acc;
}, {});
2. Array.prototype.with()
with() returns a new array for the given index but does not change the original. With the with() notation, a new array can be created with only one element changed and will make the code look a whole lot cleaner.
// ES15
const languages = ['HTML', 'CSS', 'JavaScript'];
const newLanguages = languages.with(1, 'Bootstrap');
console.log(languages); // Output: ['HTML', 'CSS', 'JavaScript']
console.log(newLanguages); // Output: ['HTML', 'Bootstrap', 'JavaScript']
// Previous approach (ES6+)
const newLanguage= [...languages.slice(0, 1), 'Bootstrap', ...languages.slice(2)];
3. Array.prototype.toSorted()
The toSorted() method returns a new sorted array and never modifies the original. The following is how easily a method like sort could be implemented at a higher level, without one having to create a copy of an array.
// ES15
const numbers = [3, 1, 4, 1, 5, 9, 2, 6];
const sortedNumbers = numbers.toSorted();
console.log(numbers); // Output: [3, 1, 4, 1, 5, 9, 2, 6]
console.log(sortedNumbers); // Output: [1, 1, 2, 3, 4, 5, 6, 9]
// Previous approach (ES6+)
const sortedNumbersOld = [...numbers].sort();
4. Array.prototype.toReversed()
Similar to toSorted(), toReversed() returns a new reversed array without touching the original. This provides a cleaner way to reverse an array without mutating the original.
// ES15
const letters = ['a', 'b', 'c', 'd'];
const reversedLetters = letters.toReversed();
console.log(letters); // Output: ['a', 'b', 'c', 'd']
console.log(reversedLetters); // Output: ['d', 'c', 'b', 'a']
// Previous approach (ES6+)
const reversedLettersOld = [...letters].reverse();
5. Array.prototype.toSpliced()
toSpliced() returns a new array containing some removed and/or replaced elements, without modifying the original array. This method allows creating a new array with specific elements replaced or removed in an easy way.
// ES15
const languages = ['HTML', 'CSS', 'JavaScript', 'Bootstrap'];
const newLanguages = languages.toSpliced(1, 2, 'ReactJS', 'NextJS');
console.log(languages); // Output: ['HTML', 'CSS', 'JavaScript', 'Bootstrap']
console.log(newLanguages); // Output: ['HTML', 'ReactJS', 'NextJS', 'Bootstrap']
// Previous approach (ES6+)
const newLanguagesOld = [...languages.slice(0, 1), 'ReactJS', 'NextJS', ...languages.slice(3)];
6. Object.groupBy()
Similar to Array.prototype.groupBy(), Object.groupBy() allows an iterable's elements to be grouped into an object. This method provides a more straightforward way to group elements from an iterable into an object.
// ES15
const inventory = [
{ name: 'asparagus', type: 'vegetable' },
{ name: 'banana', type: 'fruit' },
{ name: 'goat', type: 'meat' },
{ name: 'cherries', type: 'fruit' },
{ name: 'fish', type: 'meat' }
];
const groupedInventory = Object.groupBy(inventory, ({ type }) => type);
console.log(groupedInventory);
// Output:
// {
// vegetable: [{ name: 'asparagus', type: 'vegetable' }],
// fruit: [{ name: 'banana', type: 'fruit' }, { name: 'cherries', type: 'fruit' }],
// meat: [{ name: 'goat', type: 'meat' }, { name: 'fish', type: 'meat' }]
// }
// Previous approach (ES6+)
const groupedInventoryOld = inventory.reduce((acc, item) => {
if (!acc[item.type]) {
acc[item.type] = [];
}
acc[item.type].push(item);
return acc;
}, {});
7. Promise.withResolvers()
"Promise.withResolvers() is a new and innovative method in JavaScript that provides an object containing a promise, along with its corresponding resolve and reject functions. This feature makes it significantly easier to create promises that can be resolved or rejected externally. By allowing developers to handle resolution or rejection outside of the promise's initial creation, this approach simplifies promise management and enhances code flexibility."
// ES15
const { promise, resolve, reject } = Promise.withResolvers();
promise.then(value => console.log('Resolved:', value))
.catch(error => console.log('Rejected:', error));
// Resolve the promise
resolve('Success!');
// Output: Resolved: Success!
// Previous approach (ES6+)
let resolveOld, rejectOld;
const promiseOld = new Promise((res, rej) => {
resolveOld = res;
rejectOld = rej;
});
8. String.prototype.isWellFormed() and String.prototype.toWellFormed()
These methods help handle strings with potentially ill-formed UTF-16 code unit sequences. These methods provide a standardized way to check and ensure well-formed UTF-16 strings.
// ES15
const result1 = 'Hello, 世界';
const result2 = 'Hello, \uD800World';
console.log(result1.isWellFormed()); // Output: true
console.log(result2.isWellFormed()); // Output: false
console.log(result1.toWellFormed()); // Output: "Hello, 世界"
console.log(result2.toWellFormed()); // Output: "Hello, �World"
9. Symbol.metadata
A symbol can have metadata attached to it with the Symbol metadata property. This feature makes it possible to create symbols that are more informative and detailed.
// ES15
const mySymbol = Symbol('mySymbol', { description: 'A custom symbol' });
console.log(mySymbol.description); // Output: "A custom symbol"
console.log(mySymbol.metadata); // Output: { description: 'A custom symbol' }
// Previous approach
// Metadata couldn't be directly associated with symbols
10. RegExp 'v' Flag
The new 'v' flag for RegExp enables set notation and properties of strings. This new flag enhances the power and flexibility of regular expressions in JavaScript.
// ES15
const regex = /[\p{ASCII}&&\p{Lowercase}]/v;
console.log(regex.test('a')); // Output: true
console.log(regex.test('A')); // Output: false
console.log(regex.test('ñ')); // Output: false
// Previous approach
// Set notation and properties of strings were not available in RegExp
Conclusion
These 10 ES15 features bring some exciting improvements to JavaScript, making your code not only more efficient but also easier to read and work with. By incorporating these updates, you can write cleaner, more expressive code that stands out. Keep experimenting with these new features to stay ahead in modern JavaScript development and make your projects even more powerful!
