JavaScript tips to help you improve your coding skills

Today, I will share with you 11 JavaScript tips that are not often mentioned in daily tutorials. They often appear in our daily work, but are easily overlooked.

1. Filter unique values

The Set type is newly added in ES6. It is similar to an array, but the values ​​of its members are unique and there are no duplicate values. Combined with the spread operator (...) we can create a new array to filter out duplicate values ​​in the original array.

const array = [1, 2, 3, 3, 5, 5, 1];
const uniqueArray = [...new Set(array)];

console.log(uniqueArray); // [1, 2, 3, 5]

Before ES6, if we wanted to implement this function, we needed a lot more processing code. This technique is applicable to array values ​​of the following types: undefined, null, boolean, string, number. This does not apply when containing object, function, or array.

2. Short-Circuit Evaluation

The ternary operator is a very convenient and quick way to write some simple logical statements.

x > 100 ? 'Above 100' : 'Below 100';
x > 100 ? (x > 200 ? 'Above 200' : 'Between 100-200') : 'Below 100';

But sometimes when the logic is complicated, the ternary operator can be hard to read. At this point, we can use the logical AND (&&) and logical OR (||) operators to rewrite our expression.

The logical AND and logical OR operators always evaluate their left operand first, and evaluate their right operand only when the result of the logical expression cannot be determined by the value of the left operand alone.

This is called "Short-Circuit Evaluation" and how it works The && operator will return the first false/'falsy' value. When all operands are true, the result of the last expression is returned.

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3


console.log(0 && null); // Result: 0

The or (||) operator will return the first true/'truthy' value. When all operands are false, the result of the last expression is returned.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1

console.log(0 || null); // Result: null

2.1 Scenario Examples

When we request data from the server, we use this data in another location, but we don't know the state of the data, such as when we access the data property of this.state.

In the usual way, we will first determine the validity of this.state.data, and then distinguish and handle it according to the validity.

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

But we can simplify this logical processing in the above way.

return (this.state.data || 'Fetching Data');

By comparison, we found that this method is more simple and convenient.

3. Convert Boolean

Conventional boolean values ​​are only true and false, but in JavaScript we can consider other values ​​to be 'truthy' or 'falsy'.

Except for 0, "", null, undefined, NaN and false, we can consider all others to be 'truthy'. We can use the minus operator! Converts a series of variables to "boolean" type.

const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(isTrue); // Result: true
console.log(typeof true); // Result: "boolean"

4. Convert String

We can convert a number type variable into a string type by using the + concatenation operator.

const val = 1 + "";

console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

5. Convert Number type

Corresponding to the above, we can convert a string type variable back to a number type by using the addition operator +.

let int = "15";
int = +int;

console.log(int); // Result: 15
console.log(typeof int); Result: "number"

In some contexts, + will be interpreted as a concatenation operator rather than an addition operator. When this happens (you want an integer returned, not a floating point number), you can use two tildes: ~~.

(Note that it is in English format) A tilde sign ~ is called the "bitwise NOT operator" and is equivalent to - n - 1. So ~15 = -16. Using two ~~s effectively negates the operation. This is because - (- n - 1) - 1 = n + 1 - 1 = n. That is ~-16 = 15

const int = ~~"15"

console.log(int); // Result: 15
console.log(typeof int); Result: "number"

6. Fast exponentiation

Starting from ES7, we can use the power operator ** as a shortcut for exponentiation, which is faster than the previous Math.pow(2, 3). This is a very simple and practical point, but most tutorials don't specifically introduce it.

console.log(2 ** 3); // Result: 8

This should not be confused with the ^ symbol, which is often used to represent exponentiation but is the bitwise XOR operator in JavaScript. Before ES7, the abbreviation of power mainly relied on the bitwise left shift operator <<, with different writing methods.

// The following expressions are equivalent: Math.pow(2, n);
2 << (n - 1);
2**n;

It should be noted that 2 << 3 = 16 is equivalent to 2 ** 4 = 16

7. Fast Float to Integer

We can usually use Math.floor(), Math.ceil() and Math.round() to convert float type to integer type. But there is a faster way to truncate floating point numbers to integers using | (bitwise OR operator).

console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23

The behavior of | depends on whether you are dealing with positive or negative numbers, so it is best to use this shortcut only when you are sure. If n is positive, then n | 0 effectively rounds down. If n is negative, it effectively rounds up.

More precisely, the result of this operation is to directly delete the content after the decimal point and truncate the floating point number to an integer, which is different from the other methods mentioned above.

You can also use ~~ to get the same rounding effect, as mentioned above, and really any bitwise operator will coerce a floating point number to an integer. These special operations work because once coerced to an integer, the value remains unchanged.

7.1 Usage scenarios

The bitwise OR operator can be used to remove any number of digits from the end of an integer. This means we don't have to use code like this to convert between types.

let str = "1553"; 
Number(str.substring(0, str.length - 1));

Instead, we can use the following method to implement our function

console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1

8. Automatic binding in class

We can implement implicit binding scope in the class by using the arrow function added by ES6. According to the previous processing, we need to explicitly bind the method we wrote, similar to this.myMethod = this.myMethod.bind(this). When there are many methods in our class, a lot of binding code will be written. Now we can simplify this process by using arrow functions.

import React, { Component } from React;
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  myMethod = () => {
    // Implicit binding }
  render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

9. Intercepting arrays

If you want to remove values ​​from the end of an array, there are faster alternatives than using splice(). For example, if you know the length of the original array, you can truncate it by redefining its length property.

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]

This is a particularly neat solution. However, the runtime of the slice() method is faster. If speed is your primary goal, consider using the following approach.

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);

console.log(array); // Result: [0, 1, 2, 3]

10. Get the last element in the array

The array method slice() can accept a negative integer, if provided, it will start cutting values ​​from the end of the array instead of the beginning.

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

11. Format JSON code

We may use JSON.stringify a lot when dealing with some JSON-related processing, but did you realize that it can help indent JSON? The stringify() method accepts two optional parameters: a replacer function and a space value. The replacer function can be used to filter the displayed JSON. The space value accepts an integer representing the number of spaces required or a string (such as 't' to insert a tab character), which can make reading fetched JSON data a lot easier.

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));

// Result:
// '{
// "alpha": A,
// "beta": B
// }'

This concludes this article about JavaScript tips to help you improve your coding skills. For more relevant JavaScript tips, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!