JavaScript Academy · บทเรียน

ฟังก์ชันเคอร์รี

เปลี่ยนฟังก์ชันที่รับหลายอาร์กิวเมนต์ให้เป็นสายการเรียกต่อเนื่อง

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

การทำเคอร์รีคืออะไร

การทำเคอร์รีเปลี่ยนฟังก์ชันที่รับอาร์กิวเมนต์หลายตัวให้เป็นลำดับของฟังก์ชันที่แต่ละตัวรับอาร์กิวเมนต์เพียง หนึ่งตัว

แทนที่จะเรียก add(1, 2, 3) คุณจะเรียก add(1)(2)(3) การเรียกใช้แต่ละครั้งจะส่งคืนฟังก์ชันถัดไป จนกว่าจะรวบรวมอาร์กิวเมนต์ครบทั้งหมด

การทำเคอร์รีด้วยตนเอง

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

function add(a) {
  return function (b) {
    return function (c) {
      return a + b + c;
    };
  };
}

console.log(add(1)(2)(3));

การส่งคืนฟังก์ชันลูกศรซ้อนกัน

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

const add = a => b => c => a + b + c;

console.log(add(1)(2)(3));
console.log(add(10)(20)(30));

คลอเชอร์จดจำอาร์กิวเมนต์

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

const greet = greeting => name => greeting + ', ' + name + '!';

const sayHi = greet('Hi');
console.log(sayHi('Ada'));
console.log(sayHi('Grace'));

การเรียกใช้ทีละขั้น

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

const add = a => b => c => a + b + c;

const addOne = add(1);
const addOneAndTwo = addOne(2);

console.log(addOneAndTwo(3));
console.log(addOneAndTwo(100));

ตัวช่วย curry ทั่วไป

การเขียนฟังก์ชันซ้อนกันด้วยตนเองเป็นเรื่องน่าเบื่อ ตัวช่วย curry ทั่วไปจะรวบรวมอาร์กิวเมนต์จนกว่าจะครบจำนวนที่ต้องใช้ แล้วจึงเรียกฟังก์ชันต้นฉบับ

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn(...args);
    }
    return (...more) => curried(...args, ...more);
  };
}

const add = curry((a, b, c) => a + b + c);
console.log(add(1)(2)(3));

การเรียกใช้แบบยืดหยุ่นด้วยการทำเคอร์รี

ตัวช่วย curry ที่ดีควรรับอาร์กิวเมนต์ได้ทุกการจัดกลุ่ม ส่วน fn.length จะบอกว่าฟังก์ชันต้นฉบับประกาศพารามิเตอร์ไว้กี่ตัว

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn(...args);
    }
    return (...more) => curried(...args, ...more);
  };
}

const add = curry((a, b, c) => a + b + c);
console.log(add(1, 2, 3));
console.log(add(1, 2)(3));
console.log(add(1)(2, 3));

การทำเคอร์รีเพื่อปรับใช้เฉพาะทาง

การทำเคอร์รีทำให้การปรับใช้เฉพาะทางเป็นเรื่องเป็นธรรมชาติ เพียงใช้อาร์กิวเมนต์ตัวแรก แล้วนำฟังก์ชันที่ส่งกลับมาใช้ซ้ำในการเรียกใช้หลายครั้ง

const multiply = a => b => a * b;

const double = multiply(2);
const triple = multiply(3);

console.log(double(5));
console.log(triple(5));

การทำเคอร์รีร่วมกับเมธอดอาร์เรย์

ฟังก์ชัน curried นำไปใช้กับ map และ filter ได้พอดี เพราะแต่ละฟังก์ชันสร้างฟังก์ชันที่รับอาร์กิวเมนต์เดียวและพร้อมรับสมาชิกแต่ละตัว

const greaterThan = min => value => value > min;

const over10 = greaterThan(10);
console.log([5, 12, 8, 20].filter(over10));

การทำเคอร์รีเทียบกับการประยุกต์ใช้บางส่วน

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

การทำเคอร์รีเป็นรูปแบบหนึ่งของการประยุกต์ใช้แบบ partial ที่แยกองค์ประกอบออกมาอย่างสมบูรณ์โดยเฉพาะ

const partial = (a, b) => c => a + b + c;
const curried = a => b => c => a + b + c;

console.log(partial(1, 2)(3));
console.log(curried(1)(2)(3));

เหตุใดจึงต้องทำเคอร์รี

การทำเคอร์รีส่งเสริมให้สร้างฟังก์ชันขนาดเล็กที่ประกอบเข้าด้วยกันได้และนำกลับมาใช้ซ้ำได้ นอกจากนี้ยังเข้าคู่กับการประกอบฟังก์ชันได้อย่างเป็นธรรมชาติ ซึ่งคุณจะได้ศึกษาในลำดับถัดไป แนวคิดสำคัญคือ ฟังก์ชัน curried ไม่เคยอยู่ในสภาพ “ไม่สมบูรณ์” แต่จะส่งกลับฟังก์ชันอีกตัวจนกว่าจะได้รับอาร์กิวเมนต์ครบ

const tag = name => content => '<' + name + '>' + content + '</' + name + '>';

const bold = tag('b');
console.log(bold('important'));
console.log(tag('i')('slanted'));

ตรวจสอบความเข้าใจอย่างรวดเร็ว

กำหนดให้ const add = a => b => c => a + b + c; แล้ว add(1)(2) ให้ค่าเป็นเท่าใด

ทบทวน: การทำเคอร์รี

คุณได้เรียนรู้การแยกฟังก์ชันออกเป็นสายที่รับอาร์กิวเมนต์เดียว ดังนี้

ฟังก์ชัน curried จะส่งกลับฟังก์ชันใหม่สำหรับอาร์กิวเมนต์แต่ละตัวผ่าน คลอเชอร์
ฟังก์ชันลูกศรซ้อนกันช่วยให้เขียนคำจำกัดความของฟังก์ชัน curried ได้กระชับ
ตัวช่วย curry ทั่วไปใช้ fn.length เพื่อตรวจสอบว่าได้รับอาร์กิวเมนต์ครบแล้วหรือไม่
การทำเคอร์รีช่วยให้ปรับใช้เฉพาะทางและประกอบฟังก์ชันได้อย่าง clean

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

บทเรียน “ฟังก์ชันเคอร์รี” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ฟังก์ชันเคอร์รี”

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

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

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

บทเรียน “ฟังก์ชันเคอร์รี” ใช้เวลานานแค่ไหน

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

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

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

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

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