0Pricing
JavaScript Academy · บทเรียน

รูปแบบไร้อาร์กิวเมนต์ที่ตั้งชื่อ

ประกอบฟังก์ชันโดยไม่ต้องตั้งชื่ออาร์กิวเมนต์

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

รูปแบบไม่ระบุอาร์กิวเมนต์คืออะไร

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

function double(n) { return n * 2; }
const nums = [1, 2, 3];
// pointed: argument named explicitly
console.log(nums.map((n) => double(n))); // [2, 4, 6]
// point-free: no named argument
console.log(nums.map(double));            // [2, 4, 6]

การส่งฟังก์ชันโดยตรง

เมื่อฟังก์ชันเรียกกลับเพียงส่งต่ออาร์กิวเมนต์ไปยังฟังก์ชันอื่น คุณสามารถส่งฟังก์ชันนั้นด้วยชื่อโดยตรง แทนการครอบด้วยฟังก์ชันใหม่

const len = (s) => s.length;
const words = ["a", "bb", "ccc"];
console.log(words.map((w) => w.length)); // pointed: [1, 2, 3]
console.log(words.map(len));             // point-free: [1, 2, 3]

การประกอบฟังก์ชัน

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

const compose = (f, g) => (x) => f(g(x));
const inc = (n) => n + 1;
const double = (n) => n * 2;
const incThenDouble = compose(double, inc);
console.log(incThenDouble(3)); // (3+1)*2 = 8

ตัวช่วย pipe

pipe อ่านการทำงานจากซ้ายไปขวา ซึ่งหลายคนเห็นว่าชัดเจนกว่า compose โดยจะเรียกใช้ฟังก์ชันตามลำดับ

const pipe = (...fns) => (x) => fns.reduce((acc, f) => f(acc), x);
const inc = (n) => n + 1;
const double = (n) => n * 2;
const f = pipe(inc, double);
console.log(f(3)); // 8

การสร้างกระบวนการทำงาน

ด้วย pipe คุณสามารถแสดงการแปลงข้อมูลหลายขั้นตอนเป็นฟังก์ชันที่มีชื่อได้ โดยไม่ต้องตั้งชื่อข้อมูลเลย

const pipe = (...fns) => (x) => fns.reduce((a, f) => f(a), x);
const trim = (s) => s.trim();
const lower = (s) => s.toLowerCase();
const clean = pipe(trim, lower);
console.log(clean("  HELLO  ")); // "hello"

การคาร์รีทำให้ไม่ต้องระบุอาร์กิวเมนต์

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

const multiply = (a) => (b) => a * b;
const triple = multiply(3);
console.log([1, 2, 3].map(triple)); // [3, 6, 9]

การประยุกต์บางส่วน

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

const add = (a, b) => a + b;
const add10 = add.bind(null, 10);
console.log([1, 2, 3].map(add10)); // [11, 12, 13]

การประกอบเงื่อนไข

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

const isEven = (n) => n % 2 === 0;
const negate = (fn) => (x) => !fn(x);
const isOdd = negate(isEven);
console.log([1, 2, 3, 4].filter(isOdd)); // [1, 3]

ข้อแลกเปลี่ยนด้านความอ่านง่าย

รูปแบบไม่ระบุอาร์กิวเมนต์อาจดูสง่างาม แต่หากใช้มากเกินไปก็จะอ่านยากและคลุมเครือ ควรใช้เมื่อช่วยให้เจตนาชัดเจน เช่น map(double) และควรระบุอาร์กิวเมนต์เมื่อการตั้งชื่ออาร์กิวเมนต์ช่วยให้เข้าใจได้ดีขึ้น

const names = ["ada", "bob"];
console.log(names.map((n) => n.toUpperCase())); // ["ADA","BOB"]

ข้อควรระวังเกี่ยวกับการอ้างอิงวิธีการ

การส่งวิธีการด้วยชื่ออาจทำให้สูญเสียค่า this ให้ครอบวิธีการนั้นหรือผูกบริบทด้วย bind เมื่อฟังก์ชันต้องอาศัยบริบทของออบเจ็กต์

const calc = {
  factor: 2,
  scale(n) { return n * this.factor; }
};
console.log([1, 2].map(calc.scale.bind(calc))); // [2, 4]

การประกอบการแปลงข้อมูลจริง

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

const pipe = (...fns) => (x) => fns.reduce((a, f) => f(a), x);
const toNums = (arr) => arr.map(Number);
const onlyPos = (arr) => arr.filter((n) => n > 0);
const sum = (arr) => arr.reduce((a, n) => a + n, 0);
const process = pipe(toNums, onlyPos, sum);
console.log(process(["3", "-1", "4"])); // 7

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

รูปแบบไม่ระบุอาร์กิวเมนต์

สรุป

รูปแบบไม่ระบุอาร์กิวเมนต์สร้างฟังก์ชันด้วยการประกอบฟังก์ชันอื่นโดยไม่ตั้งชื่ออาร์กิวเมนต์ ส่งฟังก์ชันด้วยการอ้างอิง เช่น map(double) ประกอบฟังก์ชันด้วย compose/pipe และใช้การคาร์รีหรือการประยุกต์บางส่วนเพื่อสร้างฟังก์ชันเอกภาค ระวังการสูญเสียค่า this เมื่ออ้างอิงวิธีการ และควรระบุอาร์กิวเมนต์เมื่ออ่านได้ชัดเจนกว่า

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

บทเรียน “รูปแบบไร้อาร์กิวเมนต์ที่ตั้งชื่อ” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “รูปแบบไร้อาร์กิวเมนต์ที่ตั้งชื่อ”

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

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

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

บทเรียน “รูปแบบไร้อาร์กิวเมนต์ที่ตั้งชื่อ” ใช้เวลานานแค่ไหน

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

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

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

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

  1. ฟังก์ชันบริสุทธิ์และผลข้างเคียง
  2. การแปลงข้อมูลแบบประกาศ
  3. การหลีกเลี่ยงการกลายสภาพ
  4. รูปแบบไร้อาร์กิวเมนต์ที่ตั้งชื่อ
← กลับไปที่ JavaScript Academy