ความแตกต่างระหว่าง a++ และ ++a ใน JavaScript

Prefix Increment (++a) และ Postfix Increment (a++) เพิ่มค่าตัวแปรทีเดียวกัน แต่ค่าที่คืนกลับต่างกัน

ความแตกต่างหลัก

ตัวอย่างจากบทความ

<html>
  <body>
    <script>
      var a = 10;
      var b = 20;
      
      // pre-increment
      a = ++a;        // a กลายเป็น 11, คืนค่า 11
      document.write("++a = " + a); // 11
      
      // post-increment
      b = b++;        // b คืนค่า 20 แล้วค่อยเพิ่ม (แต่ b = 20 ทับค่า 21!)
      document.write("<br> b++ = " + b); // 20 (เพราะ b = b++ ทับค่า!)
    </script>
  </body>
</html>

⚠️ ข้อสังเกตสำคัญ: b = b++ เป็น Anti-pattern! ค่าของ b++ คือ 20 (ค่าเก่า) แล้วจึง assign ให้ b = 20 ทับค่า 21 ที่เพิ่งเพิ่ม ผลคือ b = 20

ตัวอย่างที่ชัดเจนกว่า

let x = 5;
let y = 5;

console.log(++x); // 6 (คืนค่าหลังเพิ่ม)
console.log(x);   // 6

console.log(y++); // 5 (คืนค่าก่อนเพิ่ม)
console.log(y);   // 6

การใช้งานใน Loop

// ทั้งคู่ให้ผลลัพธ์เหมือนกันใน for loop ทั่วไป
for (let i = 0; i < 5; i++) { }    // i++ หรือ ++i ก็ได้
for (let i = 0; i < 5; ++i) { }    // เพราะไม่ได้ใช้ค่าคืน

// แตกต่างใน while loop
let i = 0;
while (i++ < 5) { console.log(i); } // 1,2,3,4,5,6 (พิมพ์ค่าหลังเพิ่ม)

let j = 0;
while (++j < 5) { console.log(j); } // 1,2,3,4 (พิมพ์ค่าหลังเพิ่ม แต่เช็คก่อน)

Decrement Operator (--a vs a--)

ทำงานเหมือนกันแต่ลดค่าลง 1

let a = 5;
console.log(--a); // 4
console.log(a--); // 4 (คืนค่า 4 แล้วลดเป็น 3)
console.log(a);   // 3

Best Practice

• หลีกเลี่ยงใช้ใน expression ที่ซับซ้อน (เช่น a = a++)
• ใช้บรรทัดแยกต่างหากเพื่อความชัดเจน
• ใน loop ใช้ i++ ตาม convention
• ESLint rule: no-plusplus แจ้งเตือนการใช้งาน