New JavaScript Features in 2022

JavaScript is changing fast with a lot of new and exciting features to help us - developers write code better. These features have been released for a while. Let’s check them out! 1. Private fields Previously, all class fields must be defined in the constructor. And there is no private fields. All fields can be accessed from outside. Of course, there are tricks with scope to make some variables inaccessible. But let’s not talk about them. class Counter { constructor() { this.name = 'Counter'; this.count = 0; } inc() { this.count++; } } Now we can simply write: class Counter { name = 'Counter'; #count = 0; // private field! inc() { this.#count++; } } 2. Check access to private fields with keyword in Private fields come with some problem. When a private field is accessed on an object without it, an error will be thrown. But how to check if an object has it? Use / ! try catch There is now a better way: keyword. in class Counter { name = 'Counter'; #count = 0; static isCounter(obj) { return #count in obj; } } const counter = new Counter(); Counter.isCounter(counter); // true 3. The method for array and string at() We can access an item of an array at the position by writing . But what if is negative and we want to get the element from the end of the array? We can write . But it’s not very convenient. Another way is to use . But it’s not very efficient. i A[i] i A[A.length + i] A.slice(i)[0] There is method for this: at() const A = [2, 4, 6, 8, 10] A.at(-1) // 10 const S = "Hello World" S.at(-1) // 'd' 4. Find an item in an array from the end with findLast() How to find an item in an array? Use method. And how to find it from the end? Use and . Or write your own function: find() reverse() find() const A = [1, 20, 3, 40, 5]; function findBackward(A, predicate) { for (let i = A.length-1; i>=0; i--) { if (predicate(A[i])) { return A[i]; } } return -1; } findBackward(A, x => x % 10 == 0); // 40 // be careful with this method! A.reverse().find(x => x % 10 == 0); // 40 Now we can use and methods: findLast() findLastIndex() const A = [1, 20, 3, 40, 5]; A.find(v => v%10 == 0) // 20 A.findLast(v => v%10 == 0) // 40 A.findIndex(v => v%10 == 0) // 1 A.findLastIndex(v => v%10 == 0) // 3 A.findLastIndex(v => v == 0) // -1 5. Let’s use instead of hasOwn() hasOwnProperty() There is method to check if an object has a property as its direct property. But it’s quite cumbersome to use: Object.prototype.hasOwnProperty() let hasOwnProperty = Object.prototype.hasOwnProperty; if (hasOwnProperty.call(object, 'foo')) { console.log('has property foo'); } But why not just write: object.hasOwnProperty('foo') Keep in mind that JavaScript is a dynamic language. We can add a property to any object. So can be shadowed by a property of the object with the same name. To avoid this, we can use method: hasOwnProperty() hasOwn() if (Object.hasOwn(object, 'foo')) { console.log('has property foo'); } 6. is a new property of error cause It’s very common to see error handling code like this: await fetch('https://example.com/data.csv') .catch((err) => { throw new Error('failed to get: ' + err.message); }) What it does is wrapping the original error with a new error. But the original error is lost. Now we can use property to store the original error and retrieve it later: cause await fetch('https://example.com/data.csv') .catch((err) => { throw new Error('failed to get', { cause: err }) }) .catch((err) => { console.log('cause', err.cause) }) 7. Hashbang is now supported #! Hashbang is now supported. And we can run NodeJS script directly in terminal: #!/usr/bin/env node 'use strict'; console.log(1); #!/usr/bin/env node export {}; console.log(1); Also published here. I’m Oliver Nguyen, a full-stack developer. I share about programming, JavaScript, and Go. I create — a browser extension for navigating GitHub. OneSidebar Follow me for more content. @_OliverNguyen