JavaScript Academy · บทเรียน

ฟังก์ชันบริสุทธิ์และผลข้างเคียง

เขียนฟังก์ชันที่คาดเดาผลลัพธ์ได้และทดสอบได้

ฟังก์ชันบริสุทธิ์และผลข้างเคียง เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

อะไรทำให้ฟังก์ชันเป็นฟังก์ชันบริสุทธิ์

ฟังก์ชันบริสุทธิ์มีคุณสมบัติสองประการ ได้แก่ เมื่อได้รับข้อมูลเข้าเดิมจะคืนผลลัพธ์เดิมเสมอ และไม่ก่อให้เกิดผลข้างเคียงที่สังเกตได้ ฟังก์ชันบริสุทธิ์จึงคาดเดาได้และทดสอบได้ง่าย

function add(a, b) {
  return a + b;
}
console.log(add(2, 3));
console.log(add(2, 3)); // always 5

ผลลัพธ์ที่กำหนดแน่นอน

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

function double(n) {
  return n * 2;
}
console.log(double(10)); // always 20

ผลข้างเคียงคืออะไร

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

let total = 0;
function impureAdd(n) {
  total += n;     // side effect: mutates outer state
  return total;
}
console.log(impureAdd(5));
console.log(impureAdd(5)); // 5 then 10, not pure

การพึ่งพาสถานะภายนอก

การอ่านสถานะภายนอกที่เปลี่ยนแปลงได้ก็ทำลายความบริสุทธิ์เช่นกัน เพราะผลลัพธ์จะเปลี่ยนแม้อาร์กิวเมนต์จะยังเหมือนเดิม

let rate = 1.5;
function priceImpure(x) {
  return x * rate; // depends on outside variable
}
console.log(priceImpure(10)); // 15
rate = 2;
console.log(priceImpure(10)); // 20 - different result

ทำให้เป็นฟังก์ชันบริสุทธิ์

ส่งทุกสิ่งที่ฟังก์ชันต้องใช้เข้ามาเป็นอาร์กิวเมนต์ จากนั้นผลลัพธ์จะขึ้นอยู่กับข้อมูลเข้าเท่านั้น

function price(x, rate) {
  return x * rate;
}
console.log(price(10, 1.5)); // 15
console.log(price(10, 2));   // 20

การเปลี่ยนแปลงอาร์กิวเมนต์ทำให้ไม่บริสุทธิ์

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

function impurePush(arr, x) {
  arr.push(x);   // mutates caller array
  return arr;
}
const a = [1, 2];
impurePush(a, 3);
console.log(a); // [1, 2, 3] - caller changed

การคืนค่าใหม่

ฟังก์ชันบริสุทธิ์จะสร้างและคืนค่าใหม่แทนการเปลี่ยนแปลงข้อมูลเข้าโดยตรง

function pureAppend(arr, x) {
  return [...arr, x];
}
const a = [1, 2];
const b = pureAppend(a, 3);
console.log(a); // [1, 2] unchanged
console.log(b); // [1, 2, 3]

เหตุผลที่ความบริสุทธิ์มีประโยชน์

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

function square(n) { return n * n; }
console.log([1, 2, 3].map(square)); // [1, 4, 9]

แยกส่วนที่ไม่บริสุทธิ์

คุณไม่สามารถหลีกเลี่ยงผลข้างเคียงทั้งหมดได้ เพราะแอปต้องบันทึกล็อก ดึงข้อมูล และแสดงผล เป้าหมายคือผลักผลข้างเคียงไปไว้ที่ขอบของระบบ และรักษาตรรกะหลักให้บริสุทธิ์

function computeTotal(items) {
  return items.reduce((s, i) => s + i.price, 0);
}
const total = computeTotal([{ price: 5 }, { price: 7 }]);
console.log(total); // 12 - pure core, log at the edge

ความโปร่งใสเชิงอ้างอิง

คุณสามารถแทนที่การเรียกใช้ฟังก์ชันบริสุทธิ์ด้วยผลลัพธ์ของมันได้โดยไม่เปลี่ยนพฤติกรรม add(2, 3) ใช้แทน 5 ได้ทุกที่ คุณสมบัตินี้เรียกว่าความโปร่งใสเชิงอ้างอิง

function add(a, b) { return a + b; }
const x = add(2, 3) + add(2, 3);
const y = 5 + 5;
console.log(x === y); // true

การสังเกตความไม่บริสุทธิ์

ให้สังเกตสัญญาณต่าง ๆ เช่น console, Math.random, Date.now, การกำหนดค่าให้ตัวแปรภายนอก หรือการเปลี่ยนแปลงอาร์กิวเมนต์ สิ่งใดสิ่งหนึ่งเหล่านี้ทำให้ฟังก์ชันไม่บริสุทธิ์

function pureRoll(seed) {
  return (seed * 1103515245 + 12345) % 100;
}
console.log(pureRoll(42)); // deterministic, testable

ตรวจสอบความเข้าใจ

การระบุฟังก์ชันบริสุทธิ์

สรุป

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

คำถามที่พบบ่อย

บทเรียน “ฟังก์ชันบริสุทธิ์และผลข้างเคียง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ฟังก์ชันบริสุทธิ์และผลข้างเคียง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ฟังก์ชันบริสุทธิ์และผลข้างเคียง”

เขียนฟังก์ชันที่คาดเดาผลลัพธ์ได้และทดสอบได้ คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “ฟังก์ชันบริสุทธิ์และผลข้างเคียง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ JavaScript Academy