ES14 Interactive Hub — ECMAScript 2023
Find elements from the end (Array.findLast), immutable array methods (toSorted, toReversed, with), Symbols as WeakMap keys, hashbang grammar (#!) for CLI scripts — better support for functional patterns.
Array.findLast() & findLastIndex()
Core topic
💡 Concept summary
Find the element/index satisfying a condition by traversing FROM THE END of the array. Complements find()/findIndex(), which search from the start.
🤔 Why do you need this feature?
find()/findIndex() only traverse from the start. When you want the last element that meets a condition (e.g. the newest log entry, the most recent transaction), you have to reverse() the array (mutating it) or loop backwards yourself. ES14 adds a clear API for this.
// Before ES14 — must reverse or loop backwards manually
var nums = [1, 3, 5, 4, 2];
// Option 1: clone + reverse (poor performance)
var lastEven = [...nums].reverse().find(n => n % 2 === 0);
console.log(lastEven); // 4
// Option 2: manual backward loop
function findLastManual(arr, fn) {
for (let i = arr.length - 1; i >= 0; i--) {
if (fn(arr[i])) return arr[i];
}
}
console.log(findLastManual(nums, n => n > 2)); // 4// ES14 — findLast & findLastIndex const nums = [1, 3, 5, 4, 2]; console.log(nums.findLast(n => n % 2 === 0)); // 4 console.log(nums.findLast(n => n > 2)); // 4 (near the end) console.log(nums.findLastIndex(n => n > 2)); // 3 // Not found console.log(nums.findLast(n => n > 100)); // undefined console.log(nums.findLastIndex(n => n > 100)); // -1 // Compare with find from the start console.log(nums.find(n => n > 2)); // 3 console.log(nums.findLast(n => n > 2)); // 4
ES14 Quick Reference
Quick syntax overview + copy snippets
Find the element/index satisfying a condition by traversing FROM THE END of the array. Complements find()/findIndex(), which search from the start.
const nums = [1, 3, 5, 4, 2]; console.log(nums.findLast(n => n % 2 === 0)); // 4 console.log(nums.findLast(n => n > 2)); // 4 (near the end) ...
Methods that return a new COPY instead of mutating the original array — well-suited to immutable patterns (React state, Redux).
const arr = [3, 1, 2]; const sorted = arr.toSorted(); // [1, 2, 3] console.log(arr); // [3, 1, 2] (unchanged!) ...
WeakMap now accepts Symbol as a key (previously only objects were allowed) — useful for the pattern of attaching metadata to entities.
const meta = new WeakMap();
const userKey = Symbol('user');
meta.set(userKey, { lastLogin: Date.now() });
...ES14 officially allows writing "#!/usr/bin/env node" on the FIRST LINE of a .js/.mjs file — turning a JS file into a Unix CLI script that runs directly.
#!/usr/bin/env node
console.log("This is a CLI tool written in JS!");
const [, , ...args] = process.argv;
...