Serials Javascript Style Guide – Comparison Operators & Equality

Comparison Operators & Equality

15.1 Eqeqeq

Sử dụng dấu === và !== thay cho == và !=. eslint: eqeqeq

15.2 If

Một số các quy định bên trong điều kiện lệnh if:

Objects tương đương true
Undefined tương đương false
Null tương đương false
Booleans tương đương giá trị của boolean
Numbers tương đương false nếu là +0, -0, hoặc NaN, ngược lại là true
Strings tương đương false nếu là chuỗi rỗng '', ngược lại là true

if ([0] && []) {
  // true
  // an array (even an empty one) is an object, objects will evaluate to true
}

15.3 Shortcuts

Chỉ sử dụng shortcuts với các kiểu boolean. So sánh string, number thì cần rõ ràng.

// bad
if (isValid === true) {
  // ...
}

// good
if (isValid) {
  // ...
}

// bad
if (name) {
  // ...
}

// good
if (name !== '') {
  // ...
}

// bad
if (collection.length) {
  // ...
}

// good
if (collection.length > 0) {
  // ...
}

15.4 Moreinfo

Tham khảo thêm Truth Equality and JavaScript viết bởi Angus Croll.

15.5 Switch block

Sử dụng các dấu ngoặc nhọn trong mệnh đề case và default nếu sử dụng thêm các khai báo. (ví dụ: let, const, function, và class). eslint: no-case-declarations

Tại sao ư? Các khai báo lexical xuất hiện trong khối switch nhưng nó chỉ nhận giá trị khởi tạo khi gán, chỉ xảy ra khi gọi tới case của nó. Điều này dẫn tới vấn đề khi nhiều mệnh đề case định nghĩa cùng 1 vấn đề giống nhau.

// bad
switch (foo) {
  case 1:
    let x = 1;
    break;
  case 2:
    const y = 2;
    break;
  case 3:
    function f() {
      // ...
    }
    break;
  default:
    class C {}
}

// good
switch (foo) {
  case 1: {
    let x = 1;
    break;
  }
  case 2: {
    const y = 2;
    break;
  }
  case 3: {
    function f() {
      // ...
    }
    break;
  }
  case 4:
    bar();
    break;
  default: {
    class C {}
  }
}

15.6 Nested ternaries

Ternaries (tam phân) không nên lồng nhau mà nên tách riêng ra thành từng biểu thức đơn. eslint: no-nested-ternary

// bad
const foo = maybe1 > maybe2
  ? "bar"
  : value1 > value2 ? "baz" : null;

// split into 2 separated ternary expressions
const maybeNull = value1 > value2 ? 'baz' : null;

// better
const foo = maybe1 > maybe2
  ? 'bar'
  : maybeNull;

// best
const foo = maybe1 > maybe2 ? 'bar' : maybeNull;

15.7 Unneeded ternary

Tránh các tam phân không cần thiết. eslint: no-unneeded-ternary

// bad
const foo = a ? a : b;
const bar = c ? true : false;
const baz = c ? false : true;

// good
const foo = a || b;
const bar = !!c;
const baz = !c;

15.8 No mixed operators

Khi kết hợp các toán tử thì hãy gộp lại trong cặp ngoặc đơn (). Chỉ có ngoại lệ là các toán tử số học chuẩn (+, -, *, & /) vì sự ưu tiên của chúng là dễ hiểu. eslint: no-mixed-operators

Tại sao ư? Việc làm này code dễ đọc và làm rõ mục đích của các lập trình viên.

// bad
const foo = a && b < 0 || c > 0 || d + 1 === 0;

// bad
const bar = a ** b - 5 % d;

// bad
// one may be confused into thinking (a || b) && c
if (a || b && c) {
  return d;
}

// good
const foo = (a && b < 0) || c > 0 || (d + 1 === 0);

// good
const bar = (a ** b) - (5 % d);

// good
if (a || (b && c)) {
  return d;
}

// good
const bar = a + b / c * d;