I was reading this excellent article on Frontend Masters, where some of the new features already available in JavaScript are described, along with others expected later this year. Among them, the ones I want to highlight most are the following:
Iterator.from:
const result = Iterator.from(array)
.map(x => x * 2)
.filter(x => x > 10)
.take(3)
.toArray(); // No new arrays created, computation stops after 3
Set methods:
const youKnow = new Set(["JS", "Python", "CSS", "SQL"]);
const jobNeeds = new Set(["JS", "TypeScript", "Python"]);
// Skills the job wants that you already have
youKnow.intersection(jobNeeds); // -> Set {"JS", "Python"}
// Everything combined - your full stack + job needs
youKnow.union(jobNeeds); // -> Set {"JS", "Python", "CSS", "SQL", "TypeScript"}
// What the job needs that you DON'T know yet (skill gaps)
jobNeeds.difference(youKnow); // -> Set {"TypeScript"}
// Skills you have that the job doesn't care about
youKnow.difference(jobNeeds); // -> Set {"CSS", "SQL"}
// Skills that appear in only one set, not both
youKnow.symmetricDifference(jobNeeds); // -> Set {"CSS", "SQL", "TypeScript"}
// Are all job requirements a subset of what you know?
jobNeeds.isSubsetOf(youKnow); // -> false
// Do you have every skill and more?
youKnow.isSupersetOf(jobNeeds); // -> false
// Do you and the job have zero overlap?
youKnow.isDisjointFrom(jobNeeds); // -> false
Promise.try:
Promise.try(() => loadUser(id))
.then(user => render(user))
.catch(err => showError(err));
Import attributes: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import/with
import data from "./file.json" with { type: 'json' }
import exampleStyles from "https://example.com/example_styles.css" with { type: "css" };
document.adoptedStyleSheets.push(exampleStyles);
using and await using: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/using
class FileHandle {
constructor(path) {
this.path = path;
console.log(`Opened ${path}`);
}
async write(data) {
// ... write data
}
async [Symbol.asyncDispose]() {
await someFlushOperation();
console.log(`Flushed and closed ${this.path}`);
}
}
async function saveData() {
await using file = new FileHandle("output.txt");
await file.write("hello world");
// file is automatically flushed + closed here, even if an error is thrown
}
Array.fromAsync: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fromAsync
function createAsyncIter() {
let i = 0;
return {
[Symbol.asyncIterator]() {
return {
async next() {
if (i > 2) return { done: true };
i++;
return { value: Promise.resolve(i), done: false };
},
};
},
};
}
Array.fromAsync(createAsyncIter()).then((array) => console.log(array));
Intl.Collator:
const words = ['äpfel', 'Zebra', 'Bär', 'Apfel', 'über'];
const collator = new Intl.Collator('de');
const sorted = words.sort(collator.compare);
console.log(sorted); // ['Apfel', 'äpfel', 'Bär', 'über', 'Zebra']