map, filter, reduce — สามตัวที่ใช้ทุกวัน

tsc  Version 7.0.2      # จาก tsc -v
node v24.14.0           # จาก node --version

1 · เริ่มจาก for loop ที่คุณคุ้นอยู่แล้ว

สมมติมีรายการออเดอร์ แล้วอยากรู้ว่ายอดรวมของออเดอร์ที่จ่ายเงินแล้วเป็นเท่าไหร่
ถ้าเขียนแบบที่คุณเขียนใน Go มา 9 วัน โครงจะเหมือน Go เป๊ะ ต่างแค่ชื่อ type

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

interface Order {
  id: number;
  status: string;
  amount: number;
}

const orders: Order[] = [
  { id: 1, status: "paid",      amount: 250 },
  { id: 2, status: "pending",   amount: 120 },
  { id: 3, status: "paid",      amount: 150 },
  { id: 4, status: "cancelled", amount: 80 },
];

แล้วโค้ดที่คำนวณยอดรวมของออเดอร์ที่จ่ายแล้ว:

let totalLoop = 0;
for (const o of orders) {
  if (o.status === "paid") {
    totalLoop = totalLoop + o.amount;
  }
}

อ่านออกทันทีใช่ไหม — แต่สังเกตว่ามันทำ 3 เรื่องปนกันอยู่ในก้อนเดียว: คัดว่าเอาอันไหน · หยิบเอาเฉพาะตัวเลข · แล้วบวกสะสม
ถ้าใครมาอ่านโค้ดนี้ทีหลัง เขาต้องอ่านครบทั้ง 5 บรรทัดก่อนถึงจะรู้ว่ามันคำนวณอะไร

สามตัวในบทนี้คือการแยก 3 เรื่องนั้นออกจากกัน ให้แต่ละเรื่องมีชื่อของตัวเอง:

2 · map — แปลงทีละชิ้น ได้กองใหม่ที่ยาวเท่าเดิม

map แปลว่า "เดินไปทีละชิ้น ทำอะไรกับมันสักอย่าง แล้วเอาผลไปเรียงในกองใหม่"
กองเก่ามีกี่ชิ้น กองใหม่ก็มีเท่านั้นชิ้น เสมอ — ไม่มีทางหายและไม่มีทางเพิ่ม

const numbers: number[] = [1, 2, 3, 4, 5];
const doubleNumber = numbers.map((n) => n * 2);
console.log(doubleNumber);
console.log(numbers);

interface User {
  id: number;
  name: string;
}

const users: User[] = [
  { id: 1, name: "Joey" },
  { id: 2, name: "Sara" },
];

const names = users.map((user) => user.name);
console.log(names);

ผลรันจริง:

[ 2, 4, 6, 8, 10 ]
[ 1, 2, 3, 4, 5 ]
[ 'Joey', 'Sara' ]

บรรทัดที่สองสำคัญกว่าที่คิด — numbers ยังเป็น [1, 2, 3, 4, 5] เหมือนเดิมทุกตัว
ส่วนบรรทัดสุดท้ายคือท่าที่คุณจะใช้บ่อยที่สุดในชีวิตจริง: ได้ array ของ object ก้อนใหญ่จาก API มา แล้วดึงออกมาเฉพาะช่องที่จะเอาไปแสดง

สังเกตด้วยว่า type เปลี่ยนไปได้ — users เป็น User[] แต่ names กลายเป็น string[] โดยที่เราไม่ต้องเขียน type กำกับเลย TypeScript อ่านจากสิ่งที่ callback คืนให้เอง

3 · filter — คัดออก ได้กองใหม่ที่สั้นลง

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

const examScores: number[] = [45, 72, 88, 55, 91];
const passing = examScores.filter((score: number) => score >= 60);
console.log(passing);
console.log(examScores);

ผลรันจริง:

[ 72, 88, 91 ]
[ 45, 72, 88, 55, 91 ]

type ไม่เปลี่ยน — เข้าไป number[] ออกมาก็ number[] ต่างกันแค่จำนวนชิ้น นี่คือความต่างที่ชัดที่สุดระหว่าง filter กับ map

4 · reduce — ยุบทั้งกองให้เหลือค่าเดียว

reduce คือตัวที่คนกลัวที่สุด เพราะมันรับ สองอย่าง ไม่ใช่อย่างเดียว:

• callback ที่รับ 2 พารามิเตอร์ — ค่าที่สะสมมาถึงตอนนี้ กับ ชิ้นที่กำลังเดินถึง
• ค่าเริ่มต้น — ตัวที่บอกว่า "ก่อนเดินชิ้นแรก ค่าสะสมคืออะไร" (คือ 0 ในตัวอย่างล่าง)

const cart = [
  { item: "Book", price: 15 },
  { item: "Pen", price: 3 },
  { item: "Bag", price: 40 },
];

const total = cart.reduce((sum, product) => sum + product.price, 0);
console.log(total);

ผลรันจริง: 58

ลองไล่ในหัวทีละรอบ จะเห็นว่ามันไม่มีอะไรลึกลับเลย:

และค่าที่สะสมไม่จำเป็นต้องเป็นตัวเลข — จะเป็นอะไรก็ได้ ตัวอย่างในสไลด์คือการจัดกลุ่มคำตามตัวอักษรตัวแรก โดยให้ค่าสะสมเป็น object:

const words = ["apple", "ant", "banana", "avocado", "blueberry"];

const grouped = words.reduce<Record<string, string[]>>((acc, word) => {
  const letter = word[0];
  acc[letter] = acc[letter] ? [...acc[letter], word] : [word];
  return acc;
}, {});
console.log(grouped);

ผลรันจริง:

{ a: [ 'apple', 'ant', 'avocado' ], b: [ 'banana', 'blueberry' ] }

ตรง reduce<Record<string, string[]>> คือการบอก type ให้ TypeScript ตรง ๆ ว่าค่าสะสมจะหน้าตาแบบไหน — จำเป็นมาก และเดี๋ยวหัวข้อ 7 จะรันให้ดูว่าถ้าไม่บอกจะเจออะไร
(Record<string, string[]> อ่านว่า "object ที่ key เป็น string และ value เป็น array ของ string")

5 · ต่อกันเป็น chain — จุดที่มันเริ่มคุ้ม

เพราะ map กับ filter คืน array ออกมา คุณจึงเรียกตัวถัดไปต่อท้ายได้ทันที ไม่ต้องพักไว้ในตัวแปรกลางทาง
กลับไปที่โจทย์ในหัวข้อ 1 — "ยอดรวมของออเดอร์ที่จ่ายเงินแล้ว" — เขียนสองแบบเทียบกัน:

let totalLoop = 0;
for (const o of orders) {
  if (o.status === "paid") {
    totalLoop = totalLoop + o.amount;
  }
}

const totalPaid = orders
  .filter((o) => o.status === "paid")
  .map((o) => o.amount)
  .reduce((sum, amount) => sum + amount, 0);

เอา orders ก้อนเดิมจากหัวข้อ 1 (4 ออเดอร์ · จ่ายแล้ว 250 กับ 150) มารันทั้งสองแบบในไฟล์เดียวกัน แล้ว console.log ออกมาทั้งคู่ ได้ผลจริงว่า:

400
400
4
{ id: 1, status: 'paid', amount: 250 }

สองบรรทัดแรกคือคำตอบของสองวิธี — ตรงกัน
บรรทัดที่ 3 กับ 4 คือ orders.length และ orders[0] ที่ผมพิมพ์ออกมาหลังคำนวณเสร็จ: ยังครบ 4 ชิ้น และชิ้นแรกยังเป็นก้อนเดิมทุกช่อง

6 · ทำไมถึงเรียกว่า functional

คำว่า functional ในบริบทนี้ไม่ได้แปลว่า "ใช้ฟังก์ชันเยอะ" มันแปลว่า "ทำงานแบบฟังก์ชันคณิตศาสตร์" คือ รับของเข้า → คืนของใหม่ออกมา → ไม่ไปยุ่งกับของที่รับเข้ามา

พิสูจน์ด้วยการรันจริง:

const scores = [45, 72, 88];

const passing = scores.filter((s) => s >= 60);
const bonus = scores.map((s) => s + 5);

console.log(scores);
console.log(passing);
console.log(bonus);
console.log(scores === passing);

const sorted = scores.sort((a, b) => b - a);   // ตัวนี้ไม่ functional!
console.log(scores);
console.log(scores === sorted);

ผลรันจริง:

[ 45, 72, 88 ]
[ 72, 88 ]
[ 50, 77, 93 ]
false
[ 88, 72, 45 ]
true

สามบรรทัดแรก: ใช้ scores ไปแล้วสองรอบ มันยังเป็น [45, 72, 88] เท่าเดิม
บรรทัดที่ 4: scores === passing ได้ false — แปลว่าเป็น คนละก้อนในหน่วยความจำจริง ๆ ไม่ใช่แค่หน้าตาเหมือนกัน

7 · กับดัก 3 อัน ที่ต้องรันถึงจะเห็น

7.1 · reduce ที่ไม่ใส่ค่าเริ่มต้น เจอ array ว่าง = โปรแกรมตาย

reduce ใส่ค่าเริ่มต้นหรือไม่ใส่ก็ได้ — ถ้าไม่ใส่ มันจะหยิบชิ้นแรกของ array มาเป็นค่าเริ่มต้นให้เอง ซึ่งฟังดูฉลาดดี
จนกระทั่งวันที่ array นั้นว่าง (เช่น API คืน [] มาเพราะผู้ใช้ยังไม่มีข้อมูล)

const prices: number[] = [];
const total = prices.reduce((sum, p) => sum + p);
console.log(total);

TypeError: Reduce of empty array with no initial value
    at Array.reduce (<anonymous>)
    at Object.<anonymous> (/…/t1-reduce-empty.js:4:22)
    …
Node.js v24.14.0

7.2 · map ที่ลืม return = ได้ undefined เต็ม array

arrow function เขียนได้สองแบบ และความหมายไม่เหมือนกัน:

const numbers = [1, 2, 3];

const doubled = numbers.map((n) => {
  n * 2;
});

console.log(doubled);

[ undefined, undefined, undefined ]

7.3 · type ที่ reduce เดาให้ มาจากค่าเริ่มต้น ไม่ใช่จาก callback

นี่คือประโยคเดียวที่ต้องจำจากหัวข้อนี้: ค่าเริ่มต้นเป็น type อะไร TypeScript จะบังคับให้ทั้งสายเป็น type นั้น
ไม่ใช่ดูจากสิ่งที่ callback คืนออกมา · ผลที่ตามมามีสองแบบ และแบบที่ไม่ error อันตรายกว่า

แบบที่ 1 — ใส่ค่าเริ่มต้นผิด type แล้ว TypeScript ไม่บ่นเลย

const prices = [15, 3, 40];

const total = prices.reduce((sum, price) => sum + price, "");

console.log(total);

15340 string

แบบที่ 2 — ผิดคนละทาง คราวนี้ tsc จับได้ แต่ error อ่านยาก

const names = ["Joey", "Sara", "Ann"];

const joined = names.reduce((acc, name) => acc + name + ",", 0);

ผลจริงจาก tsc --noEmit --strict:

t3c-init-num.ts(3,44): error TS2769: No overload matches this call.
  The last overload gave the following error.
    Type 'string' is not assignable to type 'number'.

error นี้ชี้ไปที่ตำแหน่ง callback (คอลัมน์ 44) ทั้งที่ตัวที่พิมพ์ผิดคือ 0 ตรงท้ายบรรทัด
คนที่ไม่รู้กฎข้อนี้จะนั่งแก้ callback วนไปมาอยู่นาน ทั้งที่แก้จริงคือเปลี่ยน 0 เป็น ""
พอเห็น TS2769 No overload matches this call บน reduce เมื่อไหร่ — ให้ไปดูค่าเริ่มต้นก่อนเสมอ

แล้วเคสในหัวข้อ 4 ที่ต้องเขียน reduce<Record<string, string[]>> ล่ะ? ถ้าตัดออกแล้วปล่อยค่าเริ่มต้นเป็น {} เฉย ๆ tsc ตอบแบบนี้จริง ๆ:

t3b-empty-obj.ts(5,3): error TS7053: Element implicitly has an 'any' type because
  expression of type 'string' can't be used to index type '{}'.
  No index signature with a parameter of type 'string' was found on type '{}'.
t3b-empty-obj.ts(5,17): error TS7053: Element implicitly has an 'any' type because
  expression of type 'string' can't be used to index type '{}'.
  No index signature with a parameter of type 'string' was found on type '{}'.
t3b-empty-obj.ts(5,35): error TS7053: Element implicitly has an 'any' type because
  expression of type 'string' can't be used to index type '{}'.
  No index signature with a parameter of type 'string' was found on type '{}'.

ข้อความเดียวกันเป๊ะ ขึ้นมา 3 ก้อน เพราะบรรทัดที่ 5 เขียน acc[letter] ไว้ 3 ที่ (คอลัมน์ 3 · 17 · 35) และ tsc บ่นทีละที่ — ไม่ใช่ 3 ปัญหา แต่เป็นปัญหาเดียวที่นับซ้ำ
นี่คือนิสัยของ tsc ที่ควรรู้ไว้: ตัวเลขจำนวน error ที่ขึ้นมาไม่เท่ากับจำนวนจุดที่ต้องแก้ ให้ดูว่าข้อความซ้ำกันไหมก่อนตกใจ

แปลเป็นภาษาคน: "คุณให้ค่าเริ่มต้นเป็น object เปล่า ๆ ผมเลยคิดว่ามันไม่มี key อะไรเลย พอคุณจะเขียน key ลงไป ผมไม่รู้ว่ามันควรเป็นอะไร"
ทางแก้คือบอก type ให้มันตรง ๆ ผ่าน reduce<…> อย่างที่สไลด์เขียนไว้ นั่นเอง

8 · แล้วเมื่อไหร่ for ยังดีกว่า

บทนี้ไม่ได้จะบอกว่า for เป็นของโบราณ — มันมีที่ที่มันชนะชัด ๆ อยู่:

เกณฑ์ตัดสินง่าย ๆ ที่ใช้ได้เกือบทุกครั้ง: ถ้าอธิบายสิ่งที่กำลังทำเป็นประโยคเดียวได้ ("เอาชื่อของทุกคน") ให้ใช้ chain · ถ้าอธิบายไม่ได้โดยไม่พูดคำว่า "แล้วก็" ให้ใช้ for

9 · แล้วถ้าของที่มีเป็น object ไม่ใช่ array?

ปัญหาคือ map · filter · reduce เป็นของ array เท่านั้น
ถ้าในมือคุณเป็น object ก้อนเดียว มันไม่มี .map ให้เรียก — ต้องแปลงเป็น array ก่อน ซึ่งมีสามท่ามาตรฐาน:

const config = { host: "localhost", port: 3000 };

console.log(Object.keys(config));
console.log(Object.values(config));
console.log(Object.entries(config));

ผลรันจริง:

[ 'host', 'port' ]
[ 'localhost', 3000 ]
[ [ 'host', 'localhost' ], [ 'port', 3000 ] ]

สังเกตบรรทัดสุดท้าย — Object.entries คืน array ของ array คู่ โดยตัวแรกคือ key ตัวที่สองคือ value
พอมันเป็น array แล้ว ทุกอย่างในบทนี้ใช้ได้ทันที:

const stock = { apple: 4, banana: 0, cherry: 12 };

const inStock = Object.entries(stock)
  .filter(([, count]) => count > 0)
  .map(([name]) => name);

console.log(inStock);

ผลรันจริง: [ 'apple', 'cherry' ]

ตรง ([, count]) คือการแกะคู่ออกมาตั้งชื่อ — ช่องแรกเว้นว่างไว้แปลว่า "ไม่ใช้ key ตัวนี้" ส่วน ([name]) คือหยิบเฉพาะช่องแรก
ถ้าอ่านแล้วงง เขียนยาวก็ได้ ผลเหมือนกันเป๊ะ: .filter((pair) => pair[1] > 0).map((pair) => pair[0])

PASS filter คัดคนสอบผ่าน
PASS ของเดิมไม่ถูกแก้
FAIL ตั้งใจให้พัง: got [72,88,91] want [72,88]

ทดสอบความเข้าใจ

อ้างอิง

• MDN — Array.prototype.map() — อ่านหัวข้อ Parameters ให้เห็นว่า callback ได้รับ 3 อย่าง (element · index · array) ไม่ใช่อย่างเดียว — นี่คือเหตุผลที่ ["1","2","3"].map(parseInt) ได้ [1, NaN, NaN] (ผมรันแล้ว ได้อย่างนั้นจริง)
• MDN — Array.prototype.filter() — อ่านหัวข้อ Description ย่อหน้าแรก ที่บอกว่ามันคืน shallow copy — คำนี้อธิบายว่าทำไม array ต้นทางถึงไม่ถูกแตะ
• MDN — Array.prototype.reduce() — อ่านหัวข้อ Exceptions ซึ่งเขียนไว้ตรง ๆ ว่า TypeError จะถูกโยนเมื่อ array ว่างและไม่มีค่าเริ่มต้น · แล้วอ่าน Description ต่อเพื่อดูว่า ถ้าไม่ใส่ค่าเริ่มต้น มันหยิบสมาชิกตัวแรกมาใช้แทนยังไง
• TypeScript Handbook — More on Functions — อ่านหัวข้อ Function Type Expressions และ Generic Functions เพื่อเข้าใจว่าทำไมถึงเขียน reduce<Record<string, string[]>> ได้ และมันไปบอกอะไรกับ compiler
• MDN — Object.entries() — อ่าน Description ประโยคแรก ที่บอกว่ามันคืน array ของคู่ [key, value] แล้วดูตัวอย่างท้ายหน้าที่ใช้ร่วมกับ for…of — เทียบกับท่า chain ในหัวข้อ 9 ของบทนี้ว่าอันไหนอ่านง่ายกว่าสำหรับคุณ
• MDN — Array.prototype.sort() — อ่านประโยคแรกของ Description ที่บอกว่ามันเรียง in place แล้วเลื่อนไปดู toSorted() ในตารางท้ายหน้า — คือเวอร์ชันที่ไม่แก้ของเดิม