DEV Community 👩‍💻👨‍💻

Cover image for 5 cool JavaScript features that most developers don't know about
Matvey Romanov
Matvey Romanov

Posted on

5 cool JavaScript features that most developers don't know about

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.

Code

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]]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

The separator can also be used with BigInt numbers, as in the following example:

const trillion = 1000_000_000_000n;
console.log(trillion); // 1000000000000
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
normandanielmq profile image
Norman Murillo

Awesome. Thanks for sharing.

Thank you.

 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.