You can use JavaScript to do the same thing in different ways. With the release of each new ECMAScript specification, new methods and operators are added to make the code shorter and more readable.
1. Object.entries
Most developers use the Object.keys method to iterate through an object. This method returns only an array of object keys, not values. You can use Object.entries to get both the key and the value.
const person = {
name: 'Nick',
age: 27
};
Object.keys(person); // ['name', 'age']
Object.entries(data); // [['name', 'Nick'], ['age', 27]]
To iterate over an object, we can do the following::
Object.keys(person).forEach((key) => {
console.log(`${key} is ${person[key]}`);
});
// using records to get the key and value
Object.entries(person).forEach(([key, value]) => {
console.log(`${key} is ${value}`);
});
// expected result:
// name is Nick
// age is 27
Both approaches described above return the same result, but Object.entries makes it easy to get a key-value pair.
2. The replaceAll method
In JavaScript, to replace all occurrences of a string with another string, we need to use a regular expression like the following:
const str = 'Red-Green-Blue';
// replaces only the first entry
str.replace('-', ' '); // Red Green-Blue
// use a regular expression to replace all entries
str.replace(/\-/g, ' '); // Red Green Blue
But in ES12, a new replaceAll method was added to String.prototype, which replaces all occurrences of the string with another string value:
str.replaceAll('-', ' '); // Red Green Blue
3. Numeric separator
You can use the underscore "_" as a numeric separator to simplify counting the number of zeros in a number.
// less readable
const billion = 1000000000;
// more readable
const readableBillion = 1000_000_000;
console.log(readableBillion) // returns 1000000000
The separator can also be used with BigInt numbers, as in the following example:
const trillion = 1000_000_000_000n;
console.log(trillion); // 1000000000000
This makes the number more readable.
4. document.designMode
Linked to front-end JavaScript, design Mode lets you edit any content on the page. Just open the browser console and enter the following:
document.designMode = 'on';
{% vimeo 662198650 %}
This is useful for designers, as they don't need to change something in the code every time to match the changes on the screen.
5. Logical assignment operator
Logical assignment operators are a combination of the logical operators &&, ||, ?? and the assignment operator =.
const a = 1;
const b = 2;
a &&= b;
console.log(a); // returns 2
// the above statement is equivalent to a && (a = b);
// OR another way
if (a) {
a = b
}
Here it checks whether the value of a matches true, and if so, we update its value. The same can be done with the logical OR // operator.
const a = null;
const b = 3;
a ||= b;
console.log(a); // returns 3
// the above statement is equivalent to
a || (a = b);
And also with the help of an operator ??:
const a = null;
const b = 3;
a ??= b;
console.log(a); // returns 3
// the above statement is equivalent to
if (a === null || a === undefined) {
a = b;
}
The operator ?? checks only for null or undefined values.
Note that logical assignment operators have been added since ES 12/ES 2021.
Conclusion
These tricks and features can speed up the developer's work, and their use is not only necessary, but also useful. Continue to explore the hidden features of the language, learn all sorts of tricks and improve your skills.