Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Tại sao nên tránh toán tử ++ (increment) và -- (decrement) trong JavaScript


Toán tử ++ và -- nên tránh vì có thể dẫn đến kết quả bất ngờ (unexpected results) do side effect và precedence phức tạp.

Ví dụ gây nhầm lẫn trong assignment

<html>
  <body>
    <script>
      var a = 5;
      var b = ++a; // pre-increment: a=6, b=6
      var c = a++; // post-increment: c=6, a=7
      var d = ++c; // pre-increment: c=7, d=7
      document.write(a); // 7
      document.write("\r" + b); // 6
      document.write("\r" + c); // 7
      document.write("\r" + d); // 7
    </script>
  </body>
</html>

Whitespace gây bug

a = b = c = 1;
++a;  // pre-increment a → 2
b--;  // post-decrement b → 1 (giá trị expression là 1), b thành 0
c;    // 1

// Nhưng nếu viết:
++ a; // space - vẫn OK trong JS
b --; // space - vẫn OK
// Tuy nhiên một số language khác có thể parse khác (++a vs + +a)

Tại sao nguy hiểm?

  1. Side effect trong expression: Thay đổi giá trị biến ngay trong biểu thức → khó debug, khó đọc.
  2. Pre vs Post confusion: ++x (trả về giá trị mới) vs x++ (trả về giá trị cũ) - dễ nhầm lẫn.
  3. Sequence point ambiguity: Trong biểu thức phức tạp, thứ tự evaluation không đảm bảo cross-browser (dù ES2015+ đã chuẩn hóa left-to-right).
  4. Không readable: x = y++ + ++z - --a - ai đọc hiểu ngay?

Best Practice: Thay thế rõ ràng

// Thay vì x++
x = x + 1;
// hoặc
x += 1;

// Thay vì ++x
x += 1;
// sau đó dùng x

// Loop for - OK dùng ++ (idiomatic, rõ ràng)
for (let i = 0; i < 10; i++) { ... }

// While loop
while (i++ < 10) { ... } // chấp nhận được vì pattern phổ biến

Linting Rules

ESLint rule no-plusplus (default off, có thể bật) cảnh báo dùng ++/--. Airbnb style guide: disallow trừ trong loop for.

Kết luận

Dùng x += 1 / x -= 1 thay cho ++/-- trong expression. Chỉ dùng ++/-- standalone statement hoặc trong for loop header. Code rõ ràng > code ngắn.