JavaScript
Fundamentals
Expressions vs Statements
เข้าใจความแตกต่างระหว่าง Expression (สิ่งที่มีค่า) กับ Statement (คำสั่ง) และ expression statement พร้อม Lab ฝึกเขียนโค้ดให้ถูกต้อง ก่อนเข้าสู่ operator และ control flow
1. ทำไมต้องแยก Expression กับ Statement
เมื่อเขียน JavaScript คุณจะเขียนอยู่สองอย่างสลับกันตลอดเวลาโดยไม่รู้ตัว: • Expression — สิ่งที่มีค่า (produces a value) • Statement — คำสั่งที่ทำงานบางอย่าง (does something) การเข้าใจความต่างนี้สำคัญมาก เพราะ JavaScript รับ expression และ statement ในที่ที่ต่างกัน เช่น ใน if (…) ต้องการ expression เท่านั้น และการสับสนระหว่างสองอย่างนี้คือสาเหตุที่ทำให้โค้ดผิดพลาด
2. Mental Model — คำนาม vs ประโยคคำสั่ง
ลองเปรียบกับภาษาพูดในชีวิตประจำวัน: Expression เหมือน "คำนาม" หรือ "วลี" ที่มีความหมายในตัว: • "ราคา 5 บาท" — มีค่าอยู่ในตัว • "ผลรวมของ 3 กับ 4" — มีค่าคือ 7 Statement เหมือน "ประโยคคำสั่ง" ที่บอกให้ทำอะไร: • "ซื้อกาแฟ" — เป็นคำสั่ง ไม่ใช่ค่า • "ถ้าฝนตก ให้เอาร่มไป" — เป็นเงื่อนไข สรุป: ถ้าถามว่า "มันเท่ากับอะไร?" — เป็น expression. ถ้าตอบไม่ได้ — เป็น statement
3. Expression — ทุกอย่างที่มีค่า
Expression คือโค้ดใด ๆ ที่ JavaScript ประเมินแล้วได้ค่าออกมา ไม่ว่าจะเป็นตัวเลข, string, boolean, หรือ object
| ประเภท | ตัวอย่าง | ค่าที่ได้ |
|---|---|---|
| Literal | 42, "hello", true | ค่าตรง ๆ นั้นเลย |
| Variable | age, name | ค่าในตัวแปรนั้น |
| Arithmetic | 5 + 3 | 8 |
| Comparison | age >= 18 | true หรือ false |
| Logical | isAdmin || isMod | true หรือ false |
| Function call | Math.max(3, 7) | 7 |
| Assignment | x = 5 | 5 (assignment ก็เป็น expression!) |
4. Statement — คำสั่งที่ทำงาน
Statement คือโค้ดที่สั่งให้ JavaScript ทำงานบางอย่าง — ไม่ได้ "มีค่า" ในตัวเอง แต่ทำให้เกิดผลลัพธ์
| ประเภท | ตัวอย่าง | หน้าที่ |
|---|---|---|
| Variable declaration | let x = 5; | ประกาศตัวแปร |
| if statement | if (age >= 18) { ... } | แยกทิศทางการทำงาน |
| for loop | for (let i = 0; i < 5; i++) { ... } | ทำซ้ำ |
| return statement | return result; | คืนค่าออกจากฟังก์ชัน |
| Expression statement | console.log(42); | เรียก expression เพื่อ side effect |
5. Expression Statement — จุดที่ทับซ้อน
บาง expression สามารถใช้เป็น statement ได้เมื่อวางคนเดียวในบรรทัด เรียกว่า Expression Statement ตัวอย่างที่พบบ่อยที่สุดคือการเรียก function: console.log("hello"); // ← นี่คือ expression statement console.log(...) คือ expression (มีค่าคือ undefined) แต่เราใช้มันเป็น statement เพื่อให้เกิด side effect (แสดงข้อความ)
สังเกตว่า expression มักอยู่ในวงเล็บหรือเป็นส่วนขวาของ =
// === STATEMENTS ===
// variable declaration statement
let price = 100;
// if statement — if (…) รับ expression ภายใน
if (price > 50) { // ← "price > 50" คือ expression ใน statement
console.log("แพง");
}
// for statement
for (let i = 0; i < 3; i++) {
console.log(i);
}
// === EXPRESSIONS ===
// literal expression
100; // ค่าคือ 100 (แต่เราไม่ได้ใช้)
// arithmetic expression
price * 1.07; // ค่าคือ 107 (แต่เราไม่ได้ใช้)
// expression ต่อข้อความ — อยู่ฝั่งขวาของ =
let label = "ราคา " + price + " บาท";
// assignment expression — ตัวมันเองก็มีค่า
let x = (price = 200); // price = 200, x = 2006. Expression ใช้เป็นค่าที่ส่งต่อได้
จุดสำคัญของ expression คือมันให้ค่าออกมาเสมอ ค่านั้นจึงนำไปเก็บในตัวแปร ส่งเข้า function หรือประกอบกับ expression อื่นได้ ส่วนการเลือกค่าจากเงื่อนไขด้วย ternary operator จะเรียนหลังจากเข้าใจ if/else แล้วในหมวด Control Flow
โค้ดฝั่งขวาของ = เป็น expression เพราะประเมินแล้วได้ค่า
let name = "มิน";
let score = 88;
let scoreText = score + " คะแนน";
let message = name + " ได้ " + scoreText;
console.log(message); // "มิน ได้ 88 คะแนน"7. สรุป
- Expression คือสิ่งที่มีค่า — เช่น 5+3, age >= 18, name, Math.max(1,2)
- Statement คือคำสั่ง — เช่น if, for, let x = ..., return
- ถามตัวเองว่า 'มันเท่ากับอะไร?' — ถ้าตอบได้ = expression
- Expression statement คือ expression ที่ใช้คนเดียวในบรรทัดเพื่อ side effect
- การเลือกค่าด้วย ternary จะอยู่หลังบท if/else ใน Control Flow
- if (…) ต้องการ expression ภายในวงเล็บ ไม่ใช่ statement