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

ฟังก์ชัน: การประกาศ นิพจน์ และฟังก์ชันลูกศร

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

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

ฟังก์ชันคืออะไร

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

การประกาศฟังก์ชัน

การประกาศฟังก์ชันจะสร้างฟังก์ชันที่มีชื่อโดยใช้คีย์เวิร์ด function การประกาศจะถูกยกขึ้น ดังนั้นคุณจึงเรียกใช้ฟังก์ชันได้ก่อนที่ฟังก์ชันจะปรากฏในโค้ด

function greet(name) {
  return `Hello, ${name}!`;
}

// Can call before declaration due to hoisting:
console.log(greet('Alice')); // 'Hello, Alice!'

นิพจน์ฟังก์ชัน

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

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(3, 4)); // 12

// Named function expression (name useful in stack traces):
const factorial = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};

ฟังก์ชันลูกศร

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

// Standard arrow:
const add = (a, b) => a + b;

// Single parameter (no parens needed):
const double = n => n * 2;

// No parameters:
const greet = () => 'Hello!';

// Multi-line body needs {} and return:
const process = (x) => {
  const result = x * 2;
  return result + 1;
};

พารามิเตอร์และอาร์กิวเมนต์

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

function info(name, age) {
  console.log(`${name} is ${age}`);
}
info('Alice', 30); // 'Alice is 30'
info('Bob');       // 'Bob is undefined'

พารามิเตอร์ค่าเริ่มต้น

ES6 ช่วยให้คุณกำหนดค่าเริ่มต้นให้พารามิเตอร์ได้ ระบบจะใช้ค่าเริ่มต้นเมื่ออาร์กิวเมนต์เป็น undefined รวมถึงกรณีที่ไม่ได้ส่งอาร์กิวเมนต์มาเลย

function greet(name = 'World') {
  return `Hello, ${name}!`;
}
console.log(greet());        // 'Hello, World!'
console.log(greet('Alice')); // 'Hello, Alice!'

คำสั่ง return

โดยค่าเริ่มต้น ฟังก์ชันจะส่งคืนค่าเป็น undefined ใช้ return เพื่อส่งออกค่า ฟังก์ชันจะจบการทำงานเมื่อพบ return แรก โค้ดหลังจากนั้นจะไม่ถูกเรียกใช้

function divide(a, b) {
  if (b === 0) return null; // early return
  return a / b;
}
console.log(divide(10, 2)); // 5
console.log(divide(10, 0)); // null

พารามิเตอร์ rest

พารามิเตอร์ rest ...args จะรวบรวมอาร์กิวเมนต์ที่เหลือทั้งหมดไว้ในอาร์เรย์ และต้องเป็นพารามิเตอร์ตัวสุดท้าย พารามิเตอร์นี้มาแทนที่ออบเจ็กต์ arguments แบบเดิมในโค้ดสมัยใหม่

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

ฟังก์ชันในฐานะค่า (แบบชั้นหนึ่ง)

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

const numbers = [3, 1, 4, 1, 5];
const sorted = numbers.sort((a, b) => a - b); // callback
console.log(sorted); // [1, 1, 3, 4, 5]

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

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

// Pure:
const add = (a, b) => a + b;

// Impure (side effect: mutates external state):
let total = 0;
function addToTotal(n) { total += n; }

นิพจน์ฟังก์ชันที่เรียกใช้ทันที (IIFE)

IIFE จะทำงานทันทีที่มีการนิยาม เดิมใช้เพื่อสร้างขอบเขตส่วนตัว ปัจจุบันจำเป็นน้อยลงเมื่อมีโมดูลและขอบเขตระดับบล็อก แต่ยังพบได้ในฐานโค้ดรุ่นเก่า

(function () {
  const secret = 'hidden';
  console.log('IIFE ran');
})();
// secret is not accessible here

ตรวจสอบอย่างรวดเร็ว

ข้อใดต่อไปนี้เป็นจริงเกี่ยวกับฟังก์ชันลูกศร

ทบทวน: ฟังก์ชัน JavaScript

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

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

บทเรียน “ฟังก์ชัน: การประกาศ นิพจน์ และฟังก์ชันลูกศร” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ฟังก์ชัน: การประกาศ นิพจน์ และฟังก์ชันลูกศร”

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

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

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

บทเรียน “ฟังก์ชัน: การประกาศ นิพจน์ และฟังก์ชันลูกศร” ใช้เวลานานแค่ไหน

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

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

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

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

  1. ตัวแปร: let const var และขอบเขต
  2. ชนิดข้อมูล: string number boolean null undefined
  3. ฟังก์ชัน: การประกาศ นิพจน์ และฟังก์ชันลูกศร
  4. ลำดับการควบคุม: if else switch for while
← กลับไปที่ Frontend Academy