JavaScript capabilities you might not know about. Part 1

This article will share some JavaScript tips to help you better understand the nuances of the language and improve your code. The article is mainly for junior and intermediate developers. Advanced developers may find it a bit boring, but everyone is welcome to read it! ?

Don’t forget to subscribe to my Telegram channel, where I will share interesting articles about front-end development! ?

Let’s get started!

1. Number separator

In numbers, you can use _ to improve the readability of your code.

<code class="language-javascript">const sixBillion = 6000000000;

// 难以阅读
const sixBillion2 = 6000_000_000;

// 更易于阅读
console.log(sixBillion2); // 6000000000

// 也可用于计算
const sum = 1000 + 6000_000_000; // 6000001000</code>

2. Simplify using the optional chaining operator && and the ternary operator

For example, we want to simplify the following code:

<code class="language-javascript">const obj = null;
console.log(obj && obj.name);
const title1 = document.querySelector('.title');
const title = title1 ? title.innerText : undefined;</code>

Rewrite the code using the optional chaining operator:

<code class="language-javascript">const obj = null;
console.log(obj?.name);
const title1 = document.querySelector('.title');
const title = title1?.innerText;</code>

The optional chaining operator makes the code more concise and readable.

3. Use BigInt to solve large integer calculation problems

Unfortunately, the correctness of number calculations beyond Number.MAX_SAFE_INTEGER (9007199254740991) is not guaranteed in JS, which is frustrating.

For example:

<code class="language-javascript">Math.pow(2, 53) === Math.pow(2, 53) + 1; // true

// Math.pow(2, 53) => 9007199254740992

// Math.pow(2, 53) + 1 => 9007199254740992</code>

In order to calculate large numbers, it is recommended to use BigInt. This will help avoid calculation errors.

<code class="language-javascript">BigInt(Math.pow(2, 53)) === BigInt(Math.pow(2, 53)) + BigInt(1); // false</code>

4. in Alternatives to operator

To check if a property exists in an object, we usually use the in operator, but you can also use obj.hasOwnProperty().

Both have their drawbacks:

The
• in operator checks whether a property exists in an object, including properties inherited from the prototype. This can lead to unexpected results if you only want to check properties of the object itself, rather than those of its prototype.
The
• obj.hasOwnProperty() method only checks the properties of the object itself, excluding properties inherited from the prototype. However, this method will not work properly if the object overrides the hasOwnProperty method. In this case, calling obj.hasOwnProperty() may lead to errors or incorrect results.

Both methods do not take into account properties that can be accessed through the prototype chain. If you need to inspect properties in an object, including its prototype, you need to use other methods, such as Object.getPrototypeOf() or Object.prototype.isPrototypeOf().

Using in and obj.hasOwnProperty() can be inconvenient and inefficient when working with large objects or nested data structures. This may require multiple checks and method calls, slowing down your program's execution.

Simple example:

<code class="language-javascript">// `in` 运算符

const obj = { name: 'John', age: 25 };
console.log('name' in obj); // true
console.log('gender' in obj); // false

// 检查对象原型中的属性
console.log('toString' in obj); // true

// `obj.hasOwnProperty()` 方法
const obj = { name: 'John', age: 25 };
console.log(obj.hasOwnProperty('name')); // true
console.log(obj.hasOwnProperty('gender')); // false

// 检查对象原型中的属性
console.log(obj.hasOwnProperty('toString')); // false</code>

There is also a more convenient and safer operator Object.hasOwn().

<code class="language-javascript">const sixBillion = 6000000000;

// 难以阅读
const sixBillion2 = 6000_000_000;

// 更易于阅读
console.log(sixBillion2); // 6000000000

// 也可用于计算
const sum = 1000 + 6000_000_000; // 6000001000</code>

5. Use to declare private attributes #

In the past, in order to indicate that a field was private, we were used to adding a line in front of the attribute name (_). But now, we can use to declare the real private attributes:

#

<code class="language-javascript">const obj = null;
console.log(obj && obj.name);
const title1 = document.querySelector('.title');
const title = title1 ? title.innerText : undefined;</code>

Use instead of

6. ?? ||

   Use to replace the
to check whether the value of the left side of the fortunes is null or undefined, and then return the value of the right side.

Example: ?? || In the above example, if the value of the left variable is not null or underfined, the

operator returns the value of the left variable on the left.

Otherwise, if the value of the left variable is null or undefined, the calculating symbol returns the value of the right variable.

<code class="language-javascript">const obj = null;
console.log(obj?.name);
const title1 = document.querySelector('.title');
const title = title1?.innerText;</code>

??

Strings converted to numbers

7. Many developers use

   Functions to convert the string to numbers, but you can use the

   computing symbols to achieve the same results. It is more concise:

Both methods are effective, but parseInt() The computing symbols are simpler and clearer.

<code class="language-javascript">Math.pow(2, 53) === Math.pow(2, 53) + 1; // true

// Math.pow(2, 53) => 9007199254740992

// Math.pow(2, 53) + 1 => 9007199254740992</code>

The brief method of the number of numbers to replace

8. Instead of using the function to give up the numbers downwards, it is better to use the position non -Math.floor() operator as the abbreviation:

I don't recommend you to use all the techniques described in this article. Some methods may damage your code, but it is important to understand them.

Math.floor() Thank you for reading this article! I hope you have learned something useful. Please look forward to the second part! ? ~~

The above is the detailed content of JavaScript capabilities you might not know about. Part 1. For more information, please follow other related articles on the PHP Chinese website!