รูปแบบ Prefix และ Postfix ใน JavaScript

จริงๆ แล้ว การดำเนินการเพิ่มค่าและลดค่า สามารถเขียนได้สองวิธี มาดู วิธีการเหล่านี้โดยใช้ตัวอย่าง ++, สำหรับ -- ก็จะทำงานคล้ายกัน

วิธีแรก เขียนตัวดำเนินการหลัง ชื่อตัวแปร แบบนี้: a++, ส่วน วิธีที่สอง - เขียนหน้าชื่อตัวแปร แบบนี้: ++a

รูปแบบแรกเรียกว่า postfix, และรูปแบบที่สอง - prefix มาดูกันว่า กรณีไหนที่เห็นความแตกต่างระหว่าง สองรูปแบบนี้

สมมติเรามีโค้ด alert(a++) และ โค้ด alert(++a)

ในกรณี alert(a++) ตัวแปรจะ ถูกแสดงผลก่อน แล้วจึงเพิ่มค่าขึ้นหนึ่ง, ส่วนในกรณี alert(++a) ตัวแปรจะ เพิ่มค่าขึ้นหนึ่งก่อน แล้วจึงถูกแสดงผล

ในตัวอย่างถัดไป alert ตัวแรกจะแสดงผล 0 เพราะในตอนแรกจะทำงานเป็นการแสดงผล ออกทางหน้าจอก่อน แล้วตัวแปรจึงจะเพิ่มค่า:

javascriptlet num = 0;
alert(num++); // แสดงผล 0
alert(num);   // แสดงผล 1

และตอนนี้ตัวแปรจะเพิ่มค่าก่อน แล้ว จึงจะมีการแสดงผลออกทางหน้าจอ:

javascriptlet num = 0;
alert(++num); // แสดงผล 1 - ตัวแปรเพิ่มค่าในทันที

พฤติกรรมแบบนี้ไม่เพียงเกิดขึ้นกับ การแสดงผลทางหน้าจอ แต่ยังเกิดขึ้นกับการกำหนดค่า:

javascriptlet num1 = 0;
let num2 = num1++; // ตัวแปร num2 จะได้รับค่า 0
alert(num2); // แสดงผล 0
alert(num1); // แสดงผล 1 - ตัวแปร num1 เปลี่ยนค่าหลังจากกำหนดค่าให้ num2

และตอนนี้ลองเปลี่ยนจากรูปแบบ postfix เป็น prefix:

javascriptlet num1 = 0;
let num2 = ++num1; // ตัวแปร num2 จะได้รับค่า 1
alert(num2); // แสดงผล 1

หากการดำเนินการของเราทำในบรรทัดแยกต่างหาก จะไม่มีความแตกต่างระหว่างรูปแบบ prefix และ postfix

javascriptlet num = 0;
++num;
num++;
alert(num); // แสดงผล 2

javascriptlet num = 3;
alert(++num);

javascriptlet num = 3;
alert(num++);

javascriptlet num = 3;
alert(--num);

javascriptlet num = 3;
alert(num--);

javascriptlet num1 = 3;
let num2 = ++num1;
alert(num1);
alert(num2);

javascriptlet num1 = 3;
let num2 = num1++;
alert(num1);
alert(num2);

javascriptlet num1 = 3;
let num2 = --num1;
alert(num1);
alert(num2);

javascriptlet num1 = 3;
let num2 = num1--;
alert(num1);
alert(num2);

javascriptlet num1 = 3;
num1++;
let num2 = num1--;
alert(num1++);
alert(--num2);