Skip to main content

แนะนำ function

Function คืออะไร ?​

Function คือ ชุดคำสั่งที่ทำการรวมกันเอาไว้ และให้เรียกใช้ผ่าน function ออกมาแทนได้

ตัวอย่างการประกาศ function นั้นมี 2 วิธีคือ

  1. function functionName() {} = ประกาศโดยให้ function นำหน้า
  2. const functionName = () => {} = ประกาศแบบ arrow function

โดย functionName สามารถกำหนดชื่อเองได้ (วิธีกำหนดเหมือนกำหนดชื่อตัวแปร)

โดยทั้ง 2 วิธีนั้นสามารถประกาศ​ function ได้ทั้งคู่ ซึ่งวิธีที่ 2 นั้นเป็นท่าใหม่ ที่เป็น Standard หลัง ES6 (ปี 2015 เป็นต้นมา) ซึ่งแนะนำให้ใช้ท่านี้ เพราะมันจะประกาศแนวทางเดียวกันกับตัวแปรเลย

เราจะลองยกตัวอย่างการใช้งาน function กับการตัดเกรด

  • เราจะเอา if-else ตัดเกรดเข้ามารวมใน function ชื่อ calculateGrade
  • แล้วให้คืนค่า Grade ออกไป (ผ่าน return ของ function)
// การประกาศ​ calculateGrade แบบ arrow function
const calculateGrade = (score) => {
  if (score >= 90) {
    return 'Your grade is A.'
  } else if (score >= 80) {
    return 'Your grade is B.'
  } else if (score >= 70) {
    return 'Your grade is C.'
  } else if (score >= 60) {
    return 'Your grade is D.'
  } else {
    return 'Your grade is F.'
  }
}

// การประกาศ calculateGradeOld แบบ function ปกติ
function calculateGradeOld (score) {
  if (score >= 90) {
    return 'Your grade is A.'
  } else if (score >= 80) {
    return 'Your grade is B.'
  } else if (score >= 70) {
    return 'Your grade is C.'
  } else if (score >= 60) {
    return 'Your grade is D.'
  } else {
    return 'Your grade is F.'
  }
}

let score = 85
console.log(calculateGrade(score))
console.log(calculateGradeOld(score))

ตรง (score) สิ่งที่อยู่ใน () เรียกว่า parameters

  • Parameters คือค่าที่จะส่งเข้าจากภาพนอกเข้าสู่ function
  • ตามตัวอย่างนี้ score = 85 เป็นสิ่งที่ประกาศอยู่นอก function
  • เราจึงทำการส่ง score เข้า calculateGrade เพื่อให้สามารถส่ง score จากภายนอกเข้าไปคำนวนใน function ได้
  • และการ return คือการคืนผลลัพธ์ของ function ออกมา ซึ่งในทีนี้เราให้ return string (Your grade is ...) ออกมา ดังนั้นจึงสามารถนำ String ในนั้นมาแสดงผลตรง console.log ได้

รวมถึง Parameters เองสามารถเป็นตัวแปรอะไรก็ได้ตั้งแต่ Number, String, Boolean, Array, Object รวมถึง Function ด้วยเช่นกัน

ใน Javascript มอง function เป็น Object ตัวหนึ่งที่เก็บคำสั่งเอาไว้ ดังนั้น การส่ง parameters function เข้าไป = เป็นเหมือนการส่ง Object เข้าไปใน function (จากนี้จะขอเรียกว่า Parameter function)

ซึ่งใน function ที่ติดกับ Array นั้นมีความสามารถในการส่ง Parameter function เข้าไปใน function ของ Array ได้ (เหมือนกับ forEach ที่ใช้ในก่อนหน้านี้) เราจะมาลองดูตัวอย่างกัน

Parameter function กับการหาและการ modified Array​

ด้วยความที่ Array เป็นการเก็บข้อมูลที่มากกว่า 1 ข้อมูลไว้ Array จึงสามารถค้นหาได้เช่นกัน โดยคำสั่งที่จะขอนำมาแนะนำคือ

  • find = สำหรับหาข้อมูลใน array

มาลองดูตัวอย่างของการใช้ find กัน

let numbers = [10, 20, 30, 40, 50]

let foundNumber = numbers.find((element) => {
  return element == 20
})

console.log(foundNumber) // ได้คะแนน 20

อย่างที่ทุกคนเห็นกัน ส่วน code

(element) => {
  return element == 20
}

นี่แหละคือ Parameter function คือการใส่ function ลงไปใน parameter ของ .find ที่เป็นคำสั่งค้นหา เพื่อบอก .find ว่าจะให้ค้นหาแบบไหนออกมา ซึ่งใน function นั้นมีการระบุว่า return element == 20 เท่ากับว่า element (ซึ่งเป็นตัวแทนในแต่ละตัวที่กำลังวนลูปไป) ตัวไหนที่ตรงตามเงื่อนไขนี้ ก็จะ return ออกจาก .find ไป

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

  • sort = สำหรับการเรียงข้อมูลใหม่
  • map = สำหรับการวนลูปตัวแปร และ update ตัวแปรใหม่ออกมา
  • filter = สำหรับการ filter array เอาเฉพาะ condition ที่ต้องการออกมา

ซึ่งทั้ง 3 คำสั่งนี้รับเป็น Parameter function ทั้งหมดเลย เรามาลองดูตัวอย่างกัน

let numbers = [10, 20, 30, 40]

// ลองใช้ .map โดยการให้ทุกตัวเลขใน numbers เพิ่มเป็น 2 เท่าแล้วใส่ตัวแปรใหม่ไป
let doubleNumbers = numbers.map((number) => {
  return number * 2
})

// ลองใช้ .filter โดยการเอาแค่เฉพาะตัวเลขที่มากกว่า 25 จาก numbers ออกมา แล้วใส่ตัวแปรใหม่ไป
let moreNumbers = numbers.filter((number) => {
  return number > 25
})

// ลองใช้ .sort
let randNumber = [5, 13, 8, 1]
randNumber.sort((a, b) => {
  return a - b
})
console.log('randNumber', randNumber) // [1, 5, 8, 13]

Parameter function กับการหาและการ modified Object Array​

เราลองกับ Object ใน Array บ้าง ด้วยคำสั่งแบบเดียวกัน find, map, filter

let people = [
  { name: 'John', age: 25 },
  { name: 'Mike', age: 30 },
  { name: 'Jack', age: 35 },
  { name: 'Loop', age: 40 }
]

// ตัวอย่าง .find โดยเอา people ที่มี age = 30 ออกมา และหยิบ object ของคนนั้นออกมา
let foundPeople = people.find((person) => {
  return person.age == 30
})

console.log(foundPeople) // { name: 'Jane', age: 30 }

// ตัวอย่าง .map โดยเพิ่ม age ของทุกคนเพิ่มขึ้น 2 เท่าและส่งออกมาใส่อีกตัวแปรหนึ่ง
let doubleAgePeople = people.map((person) => {
  person.age = person.age * 2
  return person
})

console.log(doubleAgePeople)
/*
ผลลัพธ์ของ console.log นี้
{ name: 'John', age: 50 }
{ name: 'Mike', age: 60 }
{ name: 'Jack', age: 70 }
{ name: 'Loop', age: 80 }
*/

// ตัวอย่าง .filter โดยเอา Object เฉพาะ people ที่มี age มากกว่า 30
let olderThan30 = people.filter((person) => {
  return person.age > 30
})

console.log(olderThan30)
/*
ผลลัพธ์ของ console.log นี้
{ name: 'Jack', age: 35 }
{ name: 'Loop', age: 40 }
*/

ประมาณนี้ คิดว่าพื้นฐานเท่านี้เพียงพอสำหรับการทำงานในเคสทั่วไปแล้ว สำหรับหัวข้อถัดไป ** เช่นเดิม หากอ่านแล้วงงแนะนำให้ลองดูคลิปก่อน เพื่อความเข้าใจที่เพิ่มขึ้นด้วยนะครับ

ถ้าใครอยากจะรู้จักคำสั่งของ javascript มากขึ้น ขอแนะนำ 2 แหล่งที่ศึกษาเพิ่มเติมได้

แล้วเจอกันใน Session ต่อไป หัวข้อที่เราจะนำ Javascript มาใช้ร่วมกับ Event ใน html กัน