ฟังก์ชัน(Function) คืออะไร ในภาษา JavaScript

เนื้อหาที่ควรรู้ก่อนอ่านบทความนี้ (สามารถคลิกเข้าไปอ่านข้างในได้เลยนะครับ)

ก่อนที่เราจะพูดถึง Function ว่าคืออะไรในภาษา JavaScript ผมคิดว่ามีสิ่งที่ท่านผู้อ่านต้องรู้ก่อนสองเรื่อง

  • JavaScript procedure คืออะไร — JavaScript procedure ก็คือ ชุดของคำสั่ง(Statement)ที่ไว้สำหรับดำเนินการหรือคำนวณค่าบางอย่าง
  • Function คืออะไร — ต่อจากข้างบนเลยครับ Function นั้นที่จริงก็คือ ชุดของคำสั่ง(Statement)ที่ไว้สำหรับดำเนินการหรือคำนวณค่าบางอย่าง (JavaScript procedure นั่นเอง)

ซึ่งใน Function หนึ่ง ๆ จะมีส่วนประกอบดังนี้

  • ชื่อของฟังก์ชัน(Function’s name)
  • ชุดของพารามิเตอร์(List of parameters)
  • Statements ของ Function นั้น ๆ

เดี๋ยวผมจะลองยกตัวอย่างการเขียนฟังก์ชันใน JavaScript ให้ดูนะครับเช่น

ฟังก์ชันยกกำลังสอง

function square(number) {
  return number * number;
}
  • square คือชื่อของฟังก์ชัน
  • number คือชุดของพารามิเตอร์(ในตัวอย่างนี้มันมีตัวเดียว จะไม่เรียกว่าชุดก็ได้)
  • สิ่งที่อยู่ใน { … } ปีกกา (Curly braces) ก็คือ Statements ของฟังก์ชันนี้

ฟังก์ชันคูณเลข

function multiply(number1, number2) {
  return number1 * number2;
}
  • multiply คือชื่อของฟังก์ชัน
  • number1 และ number2 คือชุดของพารามิเตอร์(ตัวอย่างนี้เรียกว่าชุดของพารามิเตอร์ได้เต็มปากหน่อย)
  • สิ่งที่อยู่ใน { … } ปีกกา (Curly braces) ก็คือ Statements ของฟังก์ชันนี้

ฟังก์ชันบางฟังก์ชันอาจจะไม่มี parameter เลยด้วยซ้ำ เช่น

ฟังก์ชันแสดงข้อความ

function showMyName() {
  console.log("My name is Sonter.");
}
  • showMyName คือชื่อของฟังก์ชัน
  • จะเห็นได้ว่าฟังก์ชันนี้ไม่มี parameters
  • สิ่งที่อยู่ใน { … } ปีกกา (Curly braces) ก็คือ Statements ของฟังก์ชันนี้

แล้วฟังก์ชันมันมีประโยชน์อะไรล่ะ ?

ถ้าถามผม ผมก็ไม่รู้เหมือนกันครับ

Image for post

อ้างอิง

เดี๋ยวก่อนครับ!!! ผมแค่ล้อเล่นครับ ที่จริงมันมีข้อดีเยอะมาก ๆ เลย แต่ที่เห็นชัด ๆ เลยก็คือ

  • ลดความซับซ้อนของ Code
  • ลด Code ที่ซ้ำซ้อน
  • ทำให้ Code อ่านง่ายมากขึ้น
  • ทำให้ Code มีความ Generic มากขึ้น
  • ทำให้ Code สามารถ Reusable

และอื่น ๆ อีกมากมาย

เดี๋ยวผมจะลองยกตัวอย่างให้ดูนะครับ

โปรแกรมที่แสดง คำนำหน้า, ชื่อ และนามสกุลออกมา

let title1 = "Mr.";
let firstName1 = "Smith";
let lastName1 = "Kenny";let fullName1 = title1 + " " + firstName1 + " " + lastName1 + ".";
console.log("Title is " + title1);
console.log("Firstname is " + firstName1);
console.log("Lastname is " + lastName1);
console.log("Fullname is " + fullName1);let title2 = "Ms.";
let firstName2 = "Emma";
let lastName2 = "Gonna";let fullName2 = title2 + " " + firstName2 + " " + lastName2 + ".";
console.log("Title is " + title2);
console.log("Firstname is " + firstName2);
console.log("Lastname is " + lastName2);
console.log("Fullname is " + fullName2);let title3 = "General";
let firstName3 = "Source";
let lastName3 = "Manny";let fullName3 = title3 + " " + firstName3 + " " + lastName3 + ".";
console.log("Title is " + title3);
console.log("Firstname is " + firstName3);=
console.log("Lastname is " + lastName3);
console.log("Fullname is " + fullName3);

ตรงที่ผมทำตัวหน้าไว้คือ Code

  • ที่ค่อนข้างยาวอ่านแล้วอาจจะงง (Code ซับซ้อน)
  • มีการทำในลักษณะเดียวกันนี้หลายรอบ (Code ซ้ำซ้อน)
  • Code ก็ไม่สามารถนำมาใช้ซ้ำได้ (Reusable ไม่ได้)

ทีนี้ผมจะลองนำ Code ที่มีปัญหาดังกล่าวมาทำเป็น Function นะครับจะได้แบบนี้

function showName(title, firstName, lastName) {
   let fullName = title + " " + firstName + " " + lastName + ".";
   console.log("Title is " + title);
   console.log("Firstname is " + firstName);
   console.log("Lastname is " + lastName);
   console.log("Fullname is " + fullName);
}let title1 = "Mr.";
let firstName1 = "Smith";
let lastName1 = "Kenny";showName(title1, firstName1, lastName1);let title2 = "Ms.";
let firstName2 = "Emma";
let lastName2 = "Gonna";showName(title2, firstName2, lastName2);let title3 = "General";
let firstName3 = "Source";
let lastName3 = "Manny";showName(title3, firstName3, lastName3);

จะเห็นได้ว่า Code ดังกล่าว

  • จะมีความซับซ้อนลดลง และชื่อฟังก์ชันก็เป็นตัวบอกด้วยว่า Code ในส่วนนี้จะทำอะไร (ชื่อว่า showName ก็สื่อความหมายว่าจะ แสดงชื่อ)
  • ไม่เกิดการซ้ำซ้อนของ Code เนื่องจาก Code มีการเขียนไว้ที่เดียวคือใน Function และนำมาใช้ในแต่ละที่
  • เมื่อมีคนที่ 4 5 หรือ 6 ก็เพียงแค่เรียกฟังก์ชัน showName อีกรอบก็สามารถแสดงชื่อได้แบบเดียวกับ 3 คนแรก ทำให้ Code มีคุณสมบัติ Reusable

Write a comment