ตัวแปร เงื่อนไข ลูป: 3 อย่างที่ต้องรู้ ก่อนอ่านโค้ดที่ AI เขียนให้

สมมติคุณให้ AI เขียนโค้ดคิดค่าส่งของร้านออนไลน์ ได้โค้ดมา 20 บรรทัด รันแล้วใช้ได้ วันหนึ่งร้านอยากเปลี่ยนเงื่อนไขจาก "ซื้อครบ 500 ส่งฟรี" เป็น "ครบ 450 ส่งฟรี"

ต้องแก้บรรทัดไหน? ถ้าตอบไม่ได้ ทุกครั้งที่อยากเปลี่ยนอะไรเล็กน้อย เราต้องกลับไปถาม AI ใหม่ และไม่รู้ว่ามันแก้ถูกจุดหรือไม่

บทความนี้เป็นตอนที่ 1 ของซีรีส์ "เขียนโปรแกรมพื้นฐาน" ซีรีส์นี้ไม่ได้สอนให้เขียนโค้ดเอง แต่สอนให้ อ่านและตรวจ โค้ดที่ AI เขียนได้ ตอนแรกเริ่มจาก 3 อย่างที่โค้ดเกือบทุกภาษามี คือ ตัวแปร (variable) เงื่อนไข (condition) และลูป (loop)

ข้อมูล ณ ตุลาคม 2569 ตัวอย่างโค้ดในบทความนี้เราเขียนเองและรันจริงด้วย Node.js บนเครื่องที่ใช้ทดสอบ ผลลัพธ์ที่แสดงคือผลที่ได้จริง

3 อย่างที่โค้ดเกือบทุกภาษามี

คู่มือสอนเขียนโปรแกรมของ MDN (เว็บเอกสารสำหรับนักพัฒนาเว็บที่ Mozilla ดูแล) อธิบายไว้ใกล้เคียงกัน

• ตัวแปรคือ "ภาชนะเก็บค่า" MDN เปรียบว่าเหมือน กล่องกระดาษใบเล็กที่เอาของใส่ไว้ได้
• เงื่อนไขคือการให้โค้ด ตัดสินใจ ทำต่างกันตามสิ่งที่เข้ามา เช่น ในเกม ถ้าพลังชีวิตเหลือ 0 ก็จบเกม
• ลูปคือการ ทำเรื่องเดิมซ้ำหลายรอบ โดยไม่ต้องเขียนโค้ดเดิมซ้ำทุกรอบ

แต่ละภาษาใช้ชื่อคำสั่งต่างกัน แต่แทบทุกภาษามี 3 อย่างนี้ ถ้าเข้าใจ 3 อย่างนี้ คุณจะอ่านโค้ดที่ AI เขียนได้คร่าวๆ ไม่ว่าโค้ดนั้นจะเป็นภาษาอะไร

ตัวอย่าง: โค้ดคิดค่าส่งที่ AI อาจเขียนให้

สมมติเราสั่ง AI ว่า "เขียนโค้ดคิดยอดเงินในตะกร้า ค่าส่ง 50 บาท ซื้อครบ 500 ส่งฟรี" แล้วได้โค้ด JavaScript หน้าตาแบบนี้ ตัวอย่างนี้เราเขียนเองให้สั้นที่สุด โค้ดจริงที่ AI เขียนอาจยาวกว่านี้

const freeShippingMin = 500; // ยอดขั้นต่ำที่ส่งฟรี (บาท)
const shippingFee = 50;      // ค่าส่งปกติ (บาท)

const cart = [
  { name: "เสื้อยืด", price: 250, qty: 1 },
  { name: "หมวก", price: 120, qty: 2 },
];

let total = 0;
for (const item of cart) {
  total = total + item.price * item.qty;
}

let shipping = shippingFee;
if (total >= freeShippingMin) {
  shipping = 0;
}

console.log("ยอดสินค้า:", total, "บาท");
console.log("ค่าส่ง:", shipping, "บาท");
console.log("ต้องจ่าย:", total + shipping, "บาท");

เมื่อรันโค้ดนี้ ได้ผลดังนี้

ยอดสินค้า: 490 บาท
ค่าส่ง: 50 บาท
ต้องจ่าย: 540 บาท

เสื้อ 250 บาท 1 ตัว กับหมวก 120 บาท 2 ใบ รวมเป็น 490 บาท ยังขาดอีก 10 บาทจึงจะได้ส่งฟรี ลูกค้าจึงต้องจ่ายค่าส่ง 50 บาท

คุณไม่ต้องอ่านออกทุกตัวอักษร ให้หา 3 อย่างนี้ในโค้ดทีละอย่าง

1. ตัวแปร: ค่าที่ตั้งไว้ และจุดที่เราแก้ได้

บรรทัดที่ขึ้นต้นด้วย const หรือ let คือการ สร้างกล่องแล้วติดป้ายชื่อ

• const freeShippingMin = 500 แปลว่า กล่องชื่อ freeShippingMin (ยอดขั้นต่ำส่งฟรี) เก็บเลข 500
• const shippingFee = 50 คือกล่องค่าส่ง เก็บเลข 50
• const cart = [...] คือกล่องตะกร้า เก็บรายการสินค้า

ตัวแปรที่อยู่บนสุดของไฟล์แบบนี้มักเป็น ค่าตั้งของโปรแกรม ถ้าร้านอยากเปลี่ยนยอดส่งฟรี ก็แก้ที่บรรทัดนี้ที่เดียว

ลองแก้ 500 เป็น 450

แก้แค่บรรทัดแรกเป็นแบบนี้

const freeShippingMin = 450; // ยอดขั้นต่ำที่ส่งฟรี (บาท)

เมื่อรันใหม่ ได้ผลดังนี้

ยอดสินค้า: 490 บาท
ค่าส่ง: 0 บาท
ต้องจ่าย: 490 บาท

ตะกร้าเดิม แต่ได้ส่งฟรีแล้ว เพราะยอด 490 ถึงเกณฑ์ 450 แล้ว บรรทัดอื่นไม่ต้องแก้เลย เพราะทุกจุดที่ต้องใช้ยอดขั้นต่ำเรียกผ่านชื่อกล่อง freeShippingMin ไม่ได้พิมพ์เลข 500 ซ้ำไว้หลายที่

ข้อสังเกตสำหรับตรวจงาน AI: ถ้าเห็นเลขเดียวกัน (เช่น 500) พิมพ์ซ้ำกระจายอยู่หลายบรรทัด แทนที่จะเก็บไว้ในตัวแปรเดียว วันที่ต้องแก้จะแก้ไม่ครบได้ง่าย ให้สั่ง AI ว่า "รวมค่าที่ใช้ซ้ำไว้เป็นตัวแปรบนสุดของไฟล์"

const กับ let ต่างกันอย่างไร

• const ตั้งค่าได้ครั้งเดียว ระหว่างที่โปรแกรมทำงานจะเปลี่ยนค่าไม่ได้ ตามที่ MDN อธิบาย คนอ่านโค้ดเห็นชื่อนี้ที่ไหนก็รู้ว่าเป็นค่าเดิมเสมอ
• let เปลี่ยนค่าได้ระหว่างที่โปรแกรมทำงาน เช่น total เริ่มที่ 0 แล้วค่อยๆ บวกเพิ่ม

ถ้าโค้ดพยายามเปลี่ยนค่าของ const ระหว่างทำงาน โปรแกรมจะหยุดพร้อมข้อความแจ้งข้อผิดพลาด (error) เราลองแล้ว ได้ข้อความ TypeError: Assignment to constant variable. (แปลว่า พยายามเปลี่ยนค่าของตัวแปรที่ห้ามเปลี่ยน) วิธีอ่านข้อความ error แบบนี้อยู่ในตอนถัดไปของซีรีส์

2. เงื่อนไข: จุดที่โค้ดตัดสินใจ

ในโค้ดตัวอย่าง ส่วนที่ตัดสินค่าส่งคือ 4 บรรทัดนี้

let shipping = shippingFee;
if (total >= freeShippingMin) {
  shipping = 0;
}

อ่านเป็นภาษาคนได้ว่า "ค่าส่งเริ่มที่ 50 ถ้า ยอดสินค้ามากกว่าหรือเท่ากับยอดขั้นต่ำ ให้ค่าส่งเป็น 0"

• if แปลว่า "ถ้า"
• ในวงเล็บ ( ) คือ คำถามที่ตอบได้แค่ใช่หรือไม่ใช่
• ในวงเล็บปีกกา { } คือ สิ่งที่ทำเมื่อคำตอบคือใช่

จุดที่ต้องเช็กเสมอ: ค่าที่อยู่ตรงเส้นพอดี

ตารางนี้แสดงเครื่องหมายเปรียบเทียบที่เจอบ่อย

ส่วน <= (น้อยกว่าหรือเท่ากับ) กับ < (น้อยกว่า) ก็ต่างกันตรงเส้นพอดีแบบเดียวกัน

เราลองเปลี่ยนราคาเสื้อเป็น 260 บาท ให้ยอดรวมเป็น 500 พอดี แล้วรัน 2 แบบ ได้ผลดังนี้

• ใช้ >= ได้ "ค่าส่ง: 0 บาท ต้องจ่าย: 500 บาท"
• ใช้ > ได้ "ค่าส่ง: 50 บาท ต้องจ่าย: 550 บาท"

ถ้าป้ายหน้าร้านเขียนว่า "ซื้อครบ 500 ส่งฟรี" ลูกค้าที่ซื้อ 500 พอดีย่อมคาดว่าจะได้ส่งฟรี โค้ดที่ใช้ > จึงทำงานผิดจากที่ร้านสัญญาไว้ ทั้งที่รันได้โดยไม่มี error เลย

AI ทำผิดพลาดแบบนี้ได้ เพราะคำว่า "ครบ" "เกิน" "ตั้งแต่" ในภาษาไทยตีความได้หลายแบบ วิธีป้องกันคือ บอกตัวเลขตรงเส้นให้ชัดตอนสั่งงาน เช่น "ยอด 500 พอดีต้องส่งฟรี" แล้วตรวจเครื่องหมายในโค้ด

3. ลูป: สิ่งที่ทำซ้ำ และจุดที่หยุด

ในโค้ดตัวอย่าง ส่วนที่บวกราคาสินค้าในตะกร้าคือลูปนี้

let total = 0;
for (const item of cart) {
  total = total + item.price * item.qty;
}

อ่านเป็นภาษาคนได้ว่า "ยอดเริ่มที่ 0 สำหรับสินค้าทุกชิ้น ในตะกร้า ให้เอาราคาคูณจำนวน แล้วบวกเพิ่มเข้าไปในยอด"

MDN อธิบายลูปแบบ for...of นี้ว่า หยิบของชิ้นแรกในรายการ ทำโค้ดในวงเล็บปีกกา แล้วหยิบชิ้นถัดไป ทำซ้ำจนถึงชิ้นสุดท้าย

เราเพิ่มบรรทัดที่พิมพ์ยอดสะสมไว้ในลูป เพื่อดูว่าลูปทำงานกี่รอบ แล้วเพิ่มถุงผ้า 30 บาทเข้าไปในตะกร้า โดยไม่แก้ลูปเลย ได้ผลดังนี้

รอบนี้: เสื้อยืด ยอดสะสม 250
รอบนี้: หมวก ยอดสะสม 490
รอบนี้: ถุงผ้า ยอดสะสม 520
ยอดสินค้า: 520 บาท
ค่าส่ง: 0 บาท
ต้องจ่าย: 520 บาท

ลูปทำรอบที่ 3 ให้เอง และเมื่อยอด 520 ถึง 500 แล้ว เงื่อนไขจึงให้ส่งฟรีด้วย ผลนี้แสดงให้เห็น 3 อย่างทำงานร่วมกัน คือ ตัวแปรเก็บค่า ลูปบวกราคาทุกชิ้น และเงื่อนไขตัดสินค่าส่ง

คำถามที่ต้องถามทุกลูป: ลูปหยุดเมื่อไหร่

ลูปแบบ for...of หยุดเองเมื่อของในรายการหมด แต่ลูปบางแบบ เช่น while (ทำซ้ำ "ตราบใดที่" เงื่อนไขยังเป็นจริง) จะหยุดเมื่อเงื่อนไขกลายเป็นเท็จ MDN เตือนว่าถ้าเงื่อนไขไม่มีวันเป็นเท็จ ลูปจะ วนไม่รู้จบ จนเบราว์เซอร์ต้องบังคับหยุดหรือค้างไป

เวลาเจอลูปในโค้ดที่ AI เขียน ให้ตอบ 2 ข้อนี้ให้ได้ คือ ทำอะไรซ้ำ และ หยุดเมื่อไหร่

ภาษาอื่นก็มี 3 อย่างนี้

ถ้าเขียนโค้ดเดียวกันด้วยภาษา Python ส่วนลูปและเงื่อนไขจะหน้าตาแบบนี้ เรารันแล้วได้ยอดสินค้า 490 บาท ค่าส่ง 50 บาท และยอดที่ต้องจ่าย 540 บาท เหมือนกัน

total = 0
for item in cart:
    total = total + item["price"] * item["qty"]

shipping = shipping_fee
if total >= free_shipping_min:
    shipping = 0

Python ไม่ใช้วงเล็บปีกกา แต่ใช้การย่อหน้าแทน ส่วนตัวแปร ลูป และเงื่อนไขยังเป็นแบบเดิม

เช็กลิสต์: อ่านโค้ดที่ AI เขียนใน 3 รอบ

อ่านโค้ด 3 รอบ แต่ละรอบหาอย่างเดียว

รอบที่ 1 หาตัวแปร ซึ่งคือค่าตั้งที่เราแก้ได้

• ตัวเลขหรือข้อความที่เป็น "นโยบาย" ของเรา (ยอดส่งฟรี ค่าส่ง เปอร์เซ็นต์ส่วนลด) อยู่ในตัวแปรที่ตั้งชื่ออ่านเข้าใจหรือไม่
• มีเลขเดียวกันพิมพ์ซ้ำหลายที่หรือไม่ ถ้ามี ให้ AI รวมไว้เป็นตัวแปรเดียว

รอบที่ 2 หาเงื่อนไข (if) ซึ่งคือจุดที่โค้ดตัดสินใจ

• อ่านเงื่อนไขแต่ละจุดเป็นภาษาคน แล้วเทียบกับกติกาที่เราตั้งใจ
• ดูเครื่องหมายตรงเส้นว่าเป็น >= หรือ > และตรงกับที่เราสัญญากับลูกค้าหรือไม่
• ถ้าเงื่อนไขไม่เป็นจริง โค้ดทำอะไร (ค่าตั้งต้นคืออะไร)

รอบที่ 3 หาลูป (for หรือ while) ซึ่งคือสิ่งที่ทำซ้ำ

• ทำอะไรซ้ำ กับของชุดไหน
• หยุดเมื่อไหร่ และมีทางหยุดแน่นอนหรือไม่

จากนั้นทดสอบด้วยตัวเลขที่รู้คำตอบ อย่างน้อยต้องมีตัวเลขที่ต่ำกว่าเส้น ตรงเส้นพอดี และเกินเส้น เช่น ยอด 490, 500 และ 520 คิดคำตอบเองก่อนว่าต้องได้เท่าไร แล้วรันดูว่าตรงกันหรือไม่ วิธีตั้งตัวเลขทดสอบแบบนี้มีอธิบายละเอียดใน Vibe coding: บอก AI ว่าอยากได้แอปอะไร แล้วตรวจให้เป็น

ลองทำแบบนี้: ให้ AI อธิบายโค้ดแยกเป็นตัวแปร เงื่อนไข และลูป

วางโค้ดที่ AI เขียนให้ แล้วต่อด้วยคำสั่งนี้

อธิบายโค้ดข้างบนให้คนที่ไม่ได้เขียนโปรแกรมอ่าน โดยแบ่งเป็น 3 ส่วน

1. ตัวแปร: มีตัวแปรอะไรบ้าง เก็บค่าอะไร ตัวไหนเป็นค่าตั้งที่ฉันแก้เองได้ (บอกเลขบรรทัด)
2. เงื่อนไข: มีจุดตัดสินใจกี่จุด อ่านแต่ละจุดเป็นภาษาคน และบอกว่าค่าที่อยู่ตรงเส้นพอดีจะผ่านหรือไม่ผ่าน
3. ลูป: มีอะไรทำซ้ำบ้าง ทำกับอะไร และหยุดเมื่อไหร่

ปิดท้ายด้วยตัวเลขทดสอบ 3 ชุด (ต่ำกว่าเส้น ตรงเส้น เกินเส้น) พร้อมผลที่ควรได้
ห้ามแก้โค้ด ถ้าเห็นจุดที่น่าจะผิด ให้บอกแยกไว้ท้ายสุด

แต่ละส่วนของคำสั่งช่วยอะไร

• การแบ่งเป็น 3 ส่วนตามบทความนี้ ทำให้คำอธิบายเป็นระเบียบ และเทียบกับโค้ดได้ทีละจุด
• "บอกเลขบรรทัด" ทำให้เรากลับไปหาในโค้ดเองได้ ไม่ต้องเชื่อคำอธิบายอย่างเดียว
• คำถามเรื่อง "ตรงเส้นพอดี" บังคับให้ AI ดูเครื่องหมาย >= กับ >
• ตัวเลขทดสอบ 3 ชุด คือสิ่งที่เรานำไปรันเช็กเองได้
• "ห้ามแก้โค้ด" ป้องกันไม่ให้ AI เปลี่ยนโค้ดไปเงียบๆ ระหว่างอธิบาย

คำอธิบายของ AI ก็ผิดได้เหมือนโค้ด ให้ใช้คำอธิบายเป็นแผนที่สำหรับอ่านโค้ด ไม่ใช่คำตัดสิน ตัวเลขทดสอบที่รันแล้วได้ผลตรง เชื่อได้มากกว่าคำอธิบาย

สิ่งที่ 3 อย่างนี้ยังไม่ครอบคลุม

• โค้ดจริงมีส่วนอื่นอีก เช่น ฟังก์ชัน (function) ซึ่งเป็นชุดคำสั่งที่ตั้งชื่อไว้เรียกใช้ซ้ำ การอ่านไฟล์ และการเชื่อมต่อฐานข้อมูล บทความนี้เป็นเพียงจุดเริ่มต้นของการอ่านโค้ด
• การอ่าน 3 อย่างนี้ออก ช่วยตรวจว่าโค้ดทำงาน ตามกติกาที่เราตั้ง หรือไม่ แต่ยังไม่พอที่จะตัดสินเรื่องความปลอดภัยหรือคุณภาพของโค้ด เรื่องนั้นอ่านต่อได้ที่ ให้ AI เขียนโค้ดแทนแล้ว ยังต้องสนใจไหมว่าโค้ดดีหรือไม่ดี (สำหรับสมาชิกฟรี)
• โค้ดจริงจาก AI มักยาวกว่าตัวอย่างนี้และแบ่งเป็นหลายไฟล์ หลักการอ่านยังเหมือนเดิม แต่ใช้เวลามากขึ้น

สรุป

โค้ดเกือบทุกภาษามี 3 อย่าง คือ ตัวแปร ที่เก็บค่าซึ่งเราแก้ได้ เงื่อนไข ที่เป็นจุดตัดสินใจของโค้ด และ ลูป ที่ทำงานเดิมซ้ำ เวลาได้โค้ดจาก AI ให้อ่าน 3 รอบ รอบละอย่าง เช็กเครื่องหมายตรงเส้น แล้วทดสอบด้วยตัวเลขที่รู้คำตอบ

ตอนถัดไปของซีรีส์ "เขียนโปรแกรมพื้นฐาน" เป็นเรื่องการอ่านข้อความ error ว่าบอกอะไร และส่งให้ AI อย่างไรให้แก้ได้ตรงจุด

อาทิตย์ละสกิล เดี๋ยวก็เก่ง