JavaScript
Functions
Arrow functions
เรียนรู้ Arrow Function ในฐานะรูปแบบสั้นของ Function Expression ฝึกดู syntax ตามจำนวน parameter เข้าใจ concise body, block body, implicit return และข้อผิดพลาดที่พบบ่อย
Arrow Function คือรูปแบบสั้นของ Function Expression
Arrow Function คือการเขียนฟังก์ชันแบบย่อแทน `function` โดยใช้ลูกศร `=>` แนวคิดทุกอย่างยังเหมือน Function Expression — เรายังเก็บฟังก์ชันไว้ในตัวแปร รับ parameter ได้ และ `return` ค่ากลับได้ ข้อแตกต่างที่เห็นชัดคือเขียนสั้นกว่า และถ้าใช้ **concise body** (ไม่มี `{}`) JavaScript จะ `return` ค่าอัตโนมัติโดยไม่ต้องเขียน `return`
ผลลัพธ์เหมือนกัน — เปลี่ยนแค่ syntax
// Function Expression
const doubleOld = function(number) {
return number * 2;
};
// Arrow Function
const double = (number) => {
return number * 2;
};
console.log(doubleOld(4)); // 8
console.log(double(4)); // 8หน้าที่ของบทนี้คือทำความเข้าใจ syntax ของ Arrow Function — รู้ว่าเขียนยังไง ใช้กี่รูปแบบ และเลือกใช้รูปแบบไหนให้เหมาะกับแต่ละกรณี
Syntax ของ Arrow Function แบ่งตามจำนวน parameter
กฎวงเล็บของ Arrow Function ดูตามจำนวน parameter: - **ไม่มี parameter** — ต้องใส่วงเล็บว่าง `()` - **1 parameter** — ละวงเล็บได้ แต่ตอนเริ่มต้นแนะนำให้ใส่วงเล็บไว้ก่อน จะอ่านง่ายกว่า - **มากกว่า 1 parameter** — ต้องใส่วงเล็บ `(a, b)`
| กรณี | รูปแบบ | ตัวอย่าง |
|---|---|---|
| ไม่มี parameter | () => ... | const sayHi = () => "Hi"; |
| 1 parameter (มีวงเล็บ) | (name) => ... | const greet = (name) => 'Hello ' + name; |
| 1 parameter (ละวงเล็บ) | name => ... | const greet = name => 'Hello ' + name; |
| หลาย parameter | (a, b) => ... | const add = (a, b) => a + b; |
สังเกตว่าไม่มี parameter ต้องมี `()` — ละไม่ได้
const sayHi = () => "Hi";
const square = number => number * number;
const add = (a, b) => a + b;
console.log(sayHi()); // Hi
console.log(square(5)); // 25
console.log(add(3, 4)); // 7**เคล็ดลับสำหรับผู้เริ่มต้น**: แม้ 1 parameter จะละวงเล็บได้ แต่การใส่วงเล็บ `(name) => ...` จะช่วยให้อ่านโค้ดได้ง่ายขึ้น และลดความสับสนเมื่อมีหลาย parameter ในภายหลัง
Concise Body กับ Block Body — เลือกใช้ให้ถูกจังหวะ
Arrow Function แบ่งตามลักษณะของ body ได้ 2 แบบ: **Concise body** — วาง expression หลัง `=>` โดยตรง ไม่ใช้ `{}` - JavaScript จะ `return` ค่าอัตโนมัติ (implicit return) - เหมาะกับฟังก์ชันที่ทำงานอย่างเดียว จบในบรรทัดเดียว **Block body** — ใช้ `{}` ครอบโค้ด - ถ้าอยากส่งค่ากลับ ต้องเขียน `return` เอง - เหมาะกับฟังก์ชันที่มีหลายบรรทัด มีตัวแปรกลาง หรือมี `if`
ไม่ต้องเขียน `return` — ค่าของ expression หลัง `=>` จะถูกส่งกลับทันที
const triple = number => number * 3;
const makeLabel = name => "สินค้า: " + name;
console.log(triple(2)); // 6
console.log(makeLabel("ปากกา")); // สินค้า: ปากกาเมื่อใช้ `{}` ต้องใส่ `return` ถ้าอยากส่งค่ากลับ
const getFullName = (firstName, lastName) => {
const fullName = firstName + " " + lastName;
return fullName;
};
console.log(getFullName("Mali", "Dee")); // Mali Deeถ้าใช้ `{}` (block body) แต่ลืมเขียน `return` — ฟังก์ชันจะคืน `undefined` แทนค่าที่เราคาดไว้ นี่คือ bug ที่พบบ่อยมาก
วิธีเลือกใช้ Concise Body หรือ Block Body
หลักการเลือกง่าย ๆ: ดูที่จำนวนงานในฟังก์ชัน
| สถานการณ์ | ใช้แบบ | ตัวอย่าง |
|---|---|---|
| มีแค่การคำนวณหรือต่อข้อความ 1 อย่าง | concise body | const double = x => x * 2; |
| ต้องมีตัวแปรกลางหลายตัว | block body | const fn = (x) => { const t = x + 1; return t * 2; }; |
| ต้องใช้ `if` / `else` | block body | const fn = (x) => { if (x > 0) { return 'บวก'; } return 'ไม่บวก'; }; |
กฎง่าย ๆ: ถ้าจบใน 1 expression → เลือก concise body, ถ้าต้องการมากกว่า 1 บรรทัด → เลือก block body แล้วอย่าลืม `return`
ข้อผิดพลาดที่พบบ่อย
| สิ่งที่พลาดบ่อย | ผลที่เกิดขึ้น | วิธีแก้ |
|---|---|---|
| ใช้ `{}` แต่ลืม `return` | ได้ `undefined` | เขียน `return` ใน block body หรือเปลี่ยนเป็น concise body |
| มีหลาย parameter แต่ไม่ใส่วงเล็บ | SyntaxError | ใช้ `(a, b) => ...` |
| ไม่มี parameter แต่ไม่ใส่ `()` | SyntaxError | ใช้ `() => ...` |
| พยายามใช้ `if` ใน concise body | SyntaxError | เปลี่ยนเป็น block body แล้วใช้ `return` |
ฟังก์ชันรันได้ แต่ไม่ได้ค่าที่คาด — ได้ `undefined` แทน
const wrongDouble = (number) => {
number * 2;
};
const correctDouble = (number) => {
return number * 2;
};
console.log(wrongDouble(4)); // undefined
console.log(correctDouble(4)); // 8เวลาผลลัพธ์ไม่ตรงที่คิด ให้เช็กก่อนว่าใช้ `{}` หรือไม่ — ถ้าใช่ ให้ดูว่ามี `return` แล้วหรือยัง