function คือ code ที่เขียนขึ้นเพื่อให้โปรแกรมทำงานอย่างใดอย่างหนึ่ง สามารถรับ input หรือข้อมูลได้ และสามารถใช้ได้อีกทุกครั้งที่ต้องการให้โปรแกรมทำงานแบบเดิม (reusable)

function เขียนได้ 5 แบบ แม้ว่า function ทุกแบบจะสามารถให้ output ที่เหมือนกันได้ แต่เราควรเรียนรู้การเขียน function ทุกแบบ เนื่องจากการทำงานร่วมกับคนอื่นๆ จะทำให้เราต้องอ่าน code ของคนอื่นด้วย ซึ่งแต่ละคนก็อาจนิยมการเขียน function ในรูปแบบที่ต่างกันไป

1. Function Declaration

เป็น function ที่ต้องมีการประกาศการเป็น function ด้วยคีย์เวิร์ด “function” ก่อน

ส่วนประกอบ function

  • คีย์เวิร์ด function
  • ชื่อ function หรือเรียกว่า identifier ตามด้วย ( )
  • body ของ function โดยจะอยู่ใน { }

การเรียก function

การเรียก function หรือ การสั่งให้โปรแกรมทำงานทำได้โดยการ เรียก identifier และตามด้วย ( )

เราสามารถเรียก function กี่ครั้งก็ได้ โดยโปรแกรมจะทำงานแบบเดิมทุกครั้ง

Parameters และ Arguments

Parameter ช่วยให้ function นั้น รับค่า input ต่างๆ เพื่อใช้ในการทำงานได้

Argument คือ ค่าของ parameter ที่นำมาใช้ในการทำงาน

x และ y คือ parameter ของ function ที่ชื่อว่า sum

2 และ 3 คือ argument ที่ส่งผ่านให้แก่ parameter x และ y เพื่อนำมาใช้ในการคำนวณ(ทำงาน) ของโปรแกรม

Default Parameters

default parameter ช่วยให้ parameter นั้นมีค่าเริ่มต้น (default) กรณีที่ไม่มี argument ส่งเข้ามา หรือ argument นั้นเป็น undefined เมื่อถูกเรียก

การใส่ค่าเริ่มต้นของ parameter ทำได้ดังตัวอย่างต่อไปนี้

หากเรียกใช้งาน function แต่ไม่ได้ใส่ parameter เมื่อเรียก ค่า default จะถูกใช้เป็นค่า parameter

หากมีค่า argument ส่งเข้ามา ค่านั้นจะถูกส่งเข้าไปใน parameter (ค่า default ไม่ถูกใช้งาน)

Return

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

ตัวอย่าง ไม่มี return statement

ตัวอย่าง มี return statement

แสดงผลการคำนวณถูกต้อง

เมื่อ return statement ใน body ของ function รัน code ที่เหลือ รวมถึง return statement อื่นใน body เดียวกันจะไม่รัน

2. Helper functions

เป็น function ที่ช่วยคำนวณบางส่วนของ function อื่น เราจะพบ function ชนิดนี้ ถูกเขียนอยู่ใน function อื่น

โปรแกรมด้านบนทำงานอย่างไร?

  1. console.log(getCelsius(98.6)); สั่งปริ้นท์ผลลัพท์ของ function หลัก
  2. getCelsius เป็น function หลัก มี Fahrenheit เป็น parameter ค่า argument ที่ส่งเข้ามาคือ 98.6 มี return statement เป็น helper function
  3. getDivideByNine เป็น helper function มี number เป็น parameter ค่า argument ที่ส่งเข้ามาคือ Fahrenheit – 32
  4. return number * (5/9) เมื่อ number คือ Fahrenheit – 32 ดังนั้นคำนวณ (98.6 – 32) * (5/9) ได้ output ที่แสดงใน console คือ 37

3. Function Expressions

expression คือ ค่าของตัวแปร หรือ ผลที่ได้จากการคำนวณของ ตัวแปร (variable หรือ identifier)

function expression คือการใส่ function แทนค่าหรือผลลัพท์ของตัวแปร

  • กำหนดตัวแปร หรือ identifier
  • กำหนดค่าตัวแปรด้วยเครื่องหมาย =
  • ในส่วนของ expression ใส่คีย์เวิร์ด function โดยไม่ต้องใส่ชื่อ function แต่ใส่ parameter เลย เช่น function(x, y)
  • ส่วน body ของ function เขียนเหมือน function ปกติทั่วไป

function ที่เขียนในรูปแบบนี้ไม่มีชื่อ function เราเรียก function ที่ไม่มีชื่อว่า Anonymous function

สามารถเรียก function expression ได้โดยการอ้างถึงจากตัวแปรที่ function ถูกเก็บไว้ และ argument ที่ถูกส่งผ่านใน parameter ของ function

4. Arrow Functions

เป็นการเขียน function อย่างย่อ โดยใช้เครื่องหมาย ( ) =>

ตัดคีย์เวิร์ด function ออก เหลือแต่ parameter จากนั้นใช้เครื่องหมาย => โยงไปที่ code statement ของ function ที่อยู่ใน { }

5. Concise Body Arrow Functions

เป็นการย่อ body ของ function

การเขียน function ในรูปแบบนี้ เป็นการเขียน function ที่สั้นที่สุดใน function ทั้งหมด เป็นการนำเอา arrow function มาย่อ body ให้สั้นลงไปอีก

function ทุกอันในรูปด้านบนเป็นการเขียนแบบ concise body
  • function ที่มี parameter อันเดียวไม่ต้องใส่ ( ) เช่น const multiply = x => x * x
  • ไม่ต้องใส่ { } เพราะเขียนแค่บรรทัดเดียว ไม่ได้เขียนเป็น code block
  • ไม่ต้องใส่คีย์เวิร์ด return เพราะเขียน function ออกมาแค่บรรทัดเดียว