Functions

ถ้าต้องเขียน 1 + 1 100 ครั้ง คงรำคาญ function ช่วยแก้เรื่องนี้ function คือ โค้ดที่ตั้งชื่อไว้แล้วเรียกซ้ำได้ ใส่ input ต่างกันก็ได้ output ต่างกัน

คิดเหมือน สูตรอาหาร ใส่วัตถุดิบที่ต่างกัน ก็ได้อาหารที่ต่างกัน แต่กระบวนการเหมือนเดิม

Function แบบดั้งเดิม

วิธีเขียนแบบที่ทำมาตั้งแต่ปี 1995 ยังใช้ได้อยู่ เรียกว่า function declaration

function double(n) {
  return n * 2
}

double(5)   // ได้ 10
double(7)   // ได้ 14

แตกออกเป็นส่วนๆ

• function เป็น keyword บอก JS ว่าจะสร้าง function
• double คือชื่อ function ตั้งให้บอกความหมาย
• (n) เรียกว่า parameter ใส่ในวงเล็บ คั่นด้วย comma ได้หลายตัว
• { ... } เป็น body ของ function ที่ code ทำงานข้างใน
• return คือส่งค่ากลับ ถ้าไม่ใส่ จะ return undefined ให้เงียบๆ

function double(n) {
  return n * 2
}

Function เขียนได้หลายแบบ

JS สมัยใหม่มีหลายวิธีเขียน function ที่ทำงานเหมือนกัน ลาก slider ดูว่าแต่ละแบบสั้นลงยังไง

function double(n) {
  return n * 2
}

Parameters กับ Arguments

คำที่สับสน 2 คำ

• Parameter คือชื่อตัวแปรที่ระบุตอนสร้าง function (ใน (...))
• Argument คือค่าจริงที่ส่งตอนเรียก function

function greet(name) {  // name = parameter
  return `สวัสดี ${name}!`
}

greet("Top")             // "Top" = argument

Default value

ถ้าไม่ส่ง argument JS จะใส่ undefined ให้ ใช้ default value ป้องกัน

function greet(name = "เพื่อน") {
  return `สวัสดี ${name}!`
}

greet()        // "สวัสดี เพื่อน!"
greet("Top")   // "สวัสดี Top!"

Rest parameter รับหลายตัว

ถ้าไม่รู้จะมี argument กี่ตัว ใช้ ... รวมเป็น array

function sum(...numbers) {
  let total = 0
  for (const n of numbers) total += n
  return total
}

sum(1, 2, 3)        // 6
sum(10, 20, 30, 40) // 100

Return value

Function ที่ไม่ใส่ return จะ return undefined ให้อัตโนมัติ เป็น function ที่ทำอะไรบางอย่างแต่ไม่คืนค่า

function logHello() {
  console.log("hello")
  // ไม่มี return
}

const result = logHello()  // ปริ้น "hello"
console.log(result)         // undefined

First-class function function เป็น value

จุดที่ JS ต่างจากภาษาเก่าๆ ใน JS function เป็น value เก็บใน variable ได้ ส่งเป็น argument ของ function อื่นได้ return จาก function ได้ เรียกว่า first-class function

// 1. function ใน variable
const double = (n) => n * 2

// 2. function เป็น argument (callback)
const numbers = [1, 2, 3]
const doubled = numbers.map(double)  // [2, 4, 6]

// 3. function return function
const multiplyBy = (x) => (n) => n * x
const triple = multiplyBy(3)
triple(5)  // 15

เรื่องนี้คือพื้นฐานของรูปแบบที่ใช้กันใน React hooks และ array methods (map / filter / reduce) ที่จะเรียนใน lesson 8

ตั้งชื่อ function ยังไง

• เริ่มด้วย verb (กริยา) เพราะ function คือ action เช่น getUser, calculateTotal, sendEmail
• function ที่คืนค่า boolean เริ่มด้วย is/has/can เช่น isLoggedIn, hasPermission, canEdit
• ใช้ camelCase เหมือน variable
• ห้ามใช้ data, handle, process เดี่ยวๆ ไม่บอกอะไรเลย

สรุป

• Function คือโค้ดตั้งชื่อ เรียกซ้ำได้ ใส่ input ก็ได้ output
• JS สมัยใหม่ใช้ arrow function เป็นหลัก สั้นกว่า เข้าใจง่ายกว่า
• Parameter คือชื่อใน definition, Argument คือค่าตอนเรียก
• Default value, rest parameter ช่วยรับ argument ยืดหยุ่น
• First-class function คือ function เป็น value เก็บ ส่ง return ได้

ใน lesson ถัดไปเข้าโครงสร้างข้อมูล เริ่มที่ array และ object ซึ่งเป็น 2 ที่เก็บข้อมูลที่ใช้ทุกที่ใน JS