5 cool JavaScript features that most developers don't know about
Tags: javascript, webdev, programming, tutorial
Published: 2022-01-04 08:55:10

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bm3z5isc5qqlqu2d31c0.png)
 

## 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.

```js
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::

```js
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:

```js
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:

```js
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.

```js
// 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:

```js
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:

```js
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 **=**.

```js
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.

```js
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 **??**:

```js
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.