ฟังก์ชันบริสุทธิ์และการไม่เปลี่ยนแปลงข้อมูล
เขียนฟังก์ชันที่คาดเดาผลลัพธ์ได้โดยไม่มีผลข้างเคียง
ฟังก์ชันบริสุทธิ์และการไม่เปลี่ยนแปลงข้อมูล เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
ฟังก์ชันบริสุทธิ์คืออะไร
ฟังก์ชันบริสุทธิ์จะคืนผลลัพธ์เดิมสำหรับข้อมูลนำเข้าเดิม และไม่มีผลข้างเคียง ฟังก์ชันจะไม่อ่านหรือเขียนสถานะภายนอก ไม่เปลี่ยนแปลงอาร์กิวเมนต์ของตนเอง และไม่ทำการรับส่งข้อมูล
ตัวอย่างฟังก์ชันบริสุทธิ์
ฟังก์ชันนี้ขึ้นอยู่กับอาร์กิวเมนต์ของตนเองเท่านั้น และสร้างเพียงค่าที่คืนกลับมา การเรียกใช้ฟังก์ชันจะไม่เปลี่ยนแปลงสิ่งใดภายนอกเลย
function add(a: number, b: number): number {
return a + b;
}
console.log(add(2, 3)); // 5, alwaysตัวอย่างฟังก์ชันไม่บริสุทธิ์
ฟังก์ชันนี้อ่านและเปลี่ยนแปลงค่าตัวแปรที่อยู่นอกขอบเขตของตนเอง ดังนั้นผลลัพธ์จึงขึ้นอยู่กับสถานะที่ซ่อนอยู่ และยังทิ้งร่องรอยไว้ด้วย นั่นทำให้ฟังก์ชันนี้ไม่บริสุทธิ์
let counter = 0;
function next(): number {
counter += 1; // side effect
return counter;
}
console.log(next(), next()); // 1 2, depends on historyความโปร่งใสเชิงการอ้างอิง
การเรียกใช้ฟังก์ชันบริสุทธิ์มีความโปร่งใสเชิงการอ้างอิง คุณสามารถแทนที่การเรียกด้วยผลลัพธ์ของมันได้โดยไม่เปลี่ยนแปลงโปรแกรม เช่น แทนที่ add(2, 3) ด้วย 5 ได้ทุกที่
const x = add(2, 3) * 2;
const y = 5 * 2; // identical meaning
console.log(x === y); // trueประโยชน์ของความบริสุทธิ์
ฟังก์ชันบริสุทธิ์ทดสอบได้ง่าย (ไม่ต้องตั้งค่าเตรียมต้น) เก็บไว้ในแคชได้ ทำงานแบบขนานได้อย่างปลอดภัย และทำความเข้าใจได้ง่าย เพราะไม่มีการพึ่งพาที่ซ่อนอยู่
หลีกเลี่ยงการเปลี่ยนแปลงอาร์กิวเมนต์
การเปลี่ยนแปลงอาร์เรย์หรืออ็อบเจ็กต์ข้อมูลนำเข้าเป็นผลข้างเคียงที่ผู้เรียกอาจไม่คาดคิด ดังนั้นควรสร้างและคืนค่าใหม่แทน
// Impure: mutates input
function pushImpure(xs: number[], v: number) { xs.push(v); return xs; }
// Pure: returns a new array
function pushPure(xs: number[], v: number): number[] { return [...xs, v]; }อัปเดตแบบไม่เปลี่ยนแปลงค่าด้วยการกระจาย
ตัวดำเนินการกระจายจะคัดลอกอ็อบเจ็กต์หรืออาร์เรย์ ทำให้คุณแทนที่ฟิลด์ต่าง ๆ ได้โดยไม่แตะต้องตัวเดิม นี่คือเครื่องมือหลักสำหรับการอัปเดตแบบไม่เปลี่ยนแปลงค่าใน TS
interface User { name: string; age: number }
function birthday(u: User): User {
return { ...u, age: u.age + 1 };
}
const before = { name: "Ada", age: 30 };
const after = birthday(before);
console.log(before.age, after.age); // 30 31อัปเดตอาร์เรย์โดยไม่เปลี่ยนแปลงค่า
ใช้ map, filter และการกระจายเพื่อสร้างอาร์เรย์ใหม่แทนการเปลี่ยนแปลงค่า อาร์เรย์เดิมจะยังคงสมบูรณ์เพื่อให้โค้ดส่วนอื่นนำไปใช้อ้างอิงได้
const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2);
console.log(nums, doubled); // [1,2,3] [2,4,6]readonly เพื่อความปลอดภัย
การกำหนดพารามิเตอร์เป็น readonly จะบอกคอมไพเลอร์และผู้อ่านว่าฟังก์ชันจะไม่เปลี่ยนแปลงพารามิเตอร์เหล่านั้น จึงช่วยยืนยันความบริสุทธิ์ในระดับชนิดข้อมูล
function sum(xs: readonly number[]): number {
return xs.reduce((a, b) => a + b, 0);
}
console.log(sum([1, 2, 3])); // 6ผลักผลกระทบไปไว้ที่ขอบโปรแกรม
โปรแกรมจริงจำเป็นต้องมีการทำงานที่มีผลข้างเคียง เช่น การบันทึกเหตุการณ์และการสื่อสารผ่านเครือข่าย รูปแบบเชิงฟังก์ชันจะรักษาให้แกนกลางบริสุทธิ์ และแยกผลข้างเคียงไว้ที่ขอบเขตต่าง ๆ ทำให้โค้ดส่วนใหญ่คาดเดาได้
รายการตรวจสอบในใจ
สำหรับแต่ละฟังก์ชัน ให้ถามว่า ฟังก์ชันขึ้นอยู่กับข้อมูลนำเข้าเท่านั้นหรือไม่ คืนค่าเพียงค่าเดียวหรือไม่ และปล่อยให้ข้อมูลนำเข้าและโลกภายนอกไม่เปลี่ยนแปลงหรือไม่ หากตอบว่าใช่ทั้งสามข้อ ฟังก์ชันนั้นก็บริสุทธิ์
ตรวจสอบอย่างรวดเร็ว
ตรวจสอบความเข้าใจบทเรียนนี้อย่างรวดเร็ว
ทบทวน
ฟังก์ชันบริสุทธิ์ขึ้นอยู่กับข้อมูลนำเข้าเท่านั้นและไม่ก่อให้เกิดผลข้างเคียง จึงมีความโปร่งใสเชิงการอ้างอิง ใช้การกระจาย map/filter และ readonly เพื่ออัปเดตโดยไม่เปลี่ยนแปลงค่า และผลักผลกระทบจากโลกจริงไปไว้ที่ขอบโปรแกรม
คำถามที่พบบ่อย
บทเรียน “ฟังก์ชันบริสุทธิ์และการไม่เปลี่ยนแปลงข้อมูล” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ฟังก์ชันบริสุทธิ์และการไม่เปลี่ยนแปลงข้อมูล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ฟังก์ชันบริสุทธิ์และการไม่เปลี่ยนแปลงข้อมูล”
เขียนฟังก์ชันที่คาดเดาผลลัพธ์ได้โดยไม่มีผลข้างเคียง คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “ฟังก์ชันบริสุทธิ์และการไม่เปลี่ยนแปลงข้อมูล” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ฟังก์ชันบริสุทธิ์และการไม่เปลี่ยนแปลงข้อมูล
- การทำเคอร์รีและการประยุกต์ใช้บางส่วน
- การประกอบฟังก์ชันด้วยชนิดข้อมูล
- ยูทิลิตี pipe และ flow แบบมีชนิดข้อมูล