[JS] การใช้งาน Function ประเภทต่างๆ

ฟังก์ชันทั่วไป

ฟังก์ชัน คือ โปรแกรมย่อยๆ เพื่อรวมคำสั่งที่ทำงานซ้ำๆ ให้มารวมอยู่จุดเดียวกัน แล้วจึงเรียกผ่านฟังก์ชันที่เดียว

อาจจะ return ค่า, return; เฉยๆ, หรือไม่ return เลยก็ได้

ex. ฟังก์ชันที่มี return

function calculate(a,b){
  return a*b;
}
var res = calculate(10,2);
console.log(res) // 20

ex. ฟังก์ชันที่มี return; จะคืนค่า undefined แทน

function hello(){
  return;
}
var res = hello();
console.log(res) // undefined

ฟังก์ชัน Anonymous

ฟังก์ชัน Anonymous คือฟังก์ชันที่ไม่มีชื่อ

มีประโยชน์เมื่อนำไปใช้เป็นอาร์กิวเมนต์ หรือในประโยค return เนื่องจากฟังก์ชันใน JS ถือเป็น object ตัวหนึ่ง จึงสามารถนำฟังก์ชันมากำหนดค่าให้กับตัวแปรได้

ex. นิพจน์ฟังก์ชันแบบไร้ชื่อ

var calculate = function(a,b){
  return a*b;
}
var res = calculate(10,2);
console.log(res) // 20

ex. จะใส่ชื่อไปก็ได้เหมือนกัน แต่ชื่อไม่มีผลอะไร เรียกใช้ชื่อ multiply ไม่ได้ จะ error

var calculate = function multiply(a,b){
  return a*b;
}
var res = calculate(10,2);
console.log(res) // 20

ฟังก์ชัน Callback

ฟังก์ชัน callback คือ ฟังก์ชันที่ถูกเรียกใช้งานกลับภายหลัง

เนื่องจากฟังก์ชันใน JS ถือเป็น object ตัวหนึ่ง จึงสามารถนำมาใช้เป็นอากิวเมนต์ แล้วส่งไปให้ฟังก์ชันตัวอื่นเรียกใช้งานได้

ex. ฟังก์ชัน hi() และ bye() เป็น ฟังก์ชัน callback เพราะถูกเรียกกลับจากฟังก์ชัน say() ภายหลังนั่นเอง

function hi(){
  console.log("Hi");
}
function bye(){
  console.log("Bye");
}

function say(wordToSay){
  wordToSay();
}
say(hi);  // Hi
say(bye); // Bye

ฟังก์ชันที่ return ออกมาเป็น function

เนื่องจากฟังก์ชันใน JS ถือเป็น object ตัวหนึ่ง จึงสามารถถูก return ออกมาได้เช่นกัน

function say(){
  console.log("Say...");
  function hi(){
    console.log("Hi");
  }
  return hi;
}
var greet = say();
greet();
// Say...
// Hi
console.log(greet);  // ƒ hi(){ console.log("Hi"); }

หรือจะ return ฟังก์ชันไร้ชื่อก็ได้

function say(){
  console.log("Say...");
  return function(){
    console.log("Hi");
  }
}
var greet = say();
greet();
// Say...
// Hi
console.log(greet);  // ƒ (){ console.log("Hi"); }

การแสดงผลทุกตัวที่รับค่าด้วย ออบเจ็ค arguments

ฟังก์ชันใน JS เราไม่จำเป็นต้องส่งอาร์กิวเม้นท์ไปครบทุกตัวตามที่ประกาศไว้ก็ได้ เพราะจะมีตัวแปรออบเจ็ค arguments ซึ่งเป็น array เก็บค่าทุกตัวที่ส่งมาให้อยู่แล้ว หากระบุไม่ครบตามจำนวนพารามิเตอร์ ก็จะแสดงค่าเป็น undefined

ex. ฟังก์ชัน display มีพารามิเตอร์ 2 ตัว แต่เวลาเรียก เราใส่อาร์กิวเมนต์ไปกี่ตัวก็ได้

function display(a,b){
  console.log(a,b);
}
display();         // undefined undefined
display(1);        // 1 undefined
display(1,2);      // 1 2
display(1,2,3);    // 1 2
display(1,2,3,4);  // 1 2

ex. แสดงผลด้วย arguments

function display(a,b){
  console.log(arguments);
}
display(1,2,3,4);  // Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]

การ Override ฟังก์ชัน (ไม่มี Overload)

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

ใน JS นั้น หากเขียนฟังก์ชันต่อกัน จะ Override ทับไปเลย ยึดอันล่าสุด ไม่มีการ Overload ที่จะรู้ได้เองว่ารับอาร์กิวเมนตืมาต่างกัน

ex. การ Override

function display(a,b){             // ไม่เคยถูกเรียกใช้
  console.log("display 1 =",a,b);
}
display(1,2);                      // เรียกใช้อันข้างล่าง

function display(c){               // override ทับอันบน
  console.log("display 2 =",c);
}
display(1); 
display(1,2); 

// display 2 = 1
// display 2 = 1
// display 2 = 1

ขอบเขตการมองเห็นของตัวแปร (Scope of Variables)

ทั้งที่มีหรือไม่มี var นำหน้า ดังนี้

Local scope หมายถึง ตัวแปรที่ประกาศในฟังก์ชัน เข้าถึงได้เฉพาะในฟังก์ชัน นอกฟังก์ชันจะไม่รู้จัก
Global scope หมายถึง ตัวแปรที่ประกาศนอกฟังก์ชัน เห็นจากทุกที่
Local variable สามารถชื่อซ้ำกับ Global variable ได้
Global variable ทั้งหมด เป็นตัวแปรของ ออบเจ็ค global

ex. ตัวแปรที่ไม่ได้ประกาศอยู่ในฟังก์ชัน จะมีขอบเขตแบบ global ได้แก่ a และ b

if(true){
  var a = 1;
}
{
  var b = 2;
}
console.log(a,b); // 1 2

Verzaru's Notes