ฟังก์ชัน JavaScript
ฟังก์ชัน JavaScript คือกลุ่มโค้ดที่ออกแบบมาเพื่อทำงานเฉพาะ
ฟังก์ชัน JavaScript จะทำงานเมื่อ "บางสิ่ง" เรียกใช้ (เรียกมันว่า)
ตัวอย่าง
function myFunction(p1, p2) {
return p1 * p2;
// The function returns the product of p1 and p2
}
ไวยากรณ์ฟังก์ชัน JavaScript
ฟังก์ชัน JavaScript ถูกกำหนดด้วยfunction
คีย์เวิร์ด ตามด้วยชื่อตามด้วยวงเล็บ( )
ชื่อฟังก์ชันสามารถประกอบด้วยตัวอักษร ตัวเลข ขีดล่าง และเครื่องหมายดอลลาร์ (กฎเดียวกันกับตัวแปร)
วงเล็บอาจรวมชื่อพารามิเตอร์ที่คั่นด้วยเครื่องหมายจุลภาค:
( พารามิเตอร์ 1 พารามิเตอร์ 2 ... )
โค้ดที่จะดำเนินการโดยฟังก์ชันจะอยู่ในวงเล็บปีกกา: {}
function
name(parameter1, parameter2, parameter3) {
// code to be executed
}
พารามิเตอร์ของฟังก์ชันอยู่ในวงเล็บ () ในการกำหนดฟังก์ชัน
อาร์กิวเมนต์ ของ ฟังก์ชันคือค่า ที่ ได้รับจากฟังก์ชันเมื่อมีการเรียกใช้
ภายในฟังก์ชัน อาร์กิวเมนต์ (พารามิเตอร์) ทำหน้าที่เป็นตัวแปรท้องถิ่น
ฟังก์ชันเหมือนกับโพรซีเดอร์หรือรูทีนย่อยในภาษาโปรแกรมอื่นๆ
เรียกใช้ฟังก์ชัน
รหัสภายในฟังก์ชันจะทำงานเมื่อ "บางสิ่ง" เรียกใช้ (เรียก) ฟังก์ชัน:
- เมื่อมีเหตุการณ์เกิดขึ้น (เมื่อผู้ใช้คลิกปุ่ม)
- เมื่อถูกเรียกใช้ (เรียก) จากโค้ด JavaScript
- โดยอัตโนมัติ (เรียกตนเอง)
คุณจะได้เรียนรู้มากขึ้นเกี่ยวกับการเรียกใช้ฟังก์ชันในบทช่วยสอนนี้
ฟังก์ชั่นกลับ
เมื่อจาวาสคริปต์ไปถึงreturn
คำสั่ง ฟังก์ชันจะหยุดดำเนินการ
หากมีการเรียกใช้ฟังก์ชันจากคำสั่ง JavaScript จะ "ส่งคืน" เพื่อรันโค้ดหลังจากคำสั่งที่เรียกใช้
ฟังก์ชันมักจะคำนวณ ค่า ส่งคืน ค่าที่ส่งคืนคือ "ส่งคืน" กลับไปที่ "ผู้โทร":
ตัวอย่าง
คำนวณผลคูณของตัวเลขสองตัว แล้วส่งคืนผลลัพธ์:
let x = myFunction(4, 3); // Function is called, return value will end up in x
function myFunction(a, b) {
return a * b;
// Function returns the product of a and b
}
ผลลัพธ์ใน x จะเป็น:
12
ทำไมต้องเป็นฟังก์ชัน?
คุณสามารถใช้รหัสซ้ำได้: กำหนดรหัสเพียงครั้งเดียว และใช้หลายครั้ง
คุณสามารถใช้โค้ดเดียวกันได้หลายครั้งด้วยอาร์กิวเมนต์ที่แตกต่างกัน เพื่อให้ได้ผลลัพธ์ที่แตกต่างกัน
ตัวอย่าง
แปลงฟาเรนไฮต์เป็นเซลเซียส:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
ตัวดำเนินการ () เรียกใช้ฟังก์ชัน
จากตัวอย่างข้างต้นtoCelsius
อ้างถึงอ็อบเจกต์ฟังก์ชัน และ
toCelsius()
อ้างอิงถึงผลลัพธ์ของฟังก์ชัน
การเข้าถึงฟังก์ชันโดยไม่ใช้ () จะคืนค่าออบเจ็กต์ฟังก์ชันแทนผลลัพธ์ของฟังก์ชัน
ตัวอย่าง
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;
ฟังก์ชันที่ใช้เป็นค่าตัวแปร
คุณสามารถใช้ฟังก์ชันในลักษณะเดียวกับที่คุณใช้ตัวแปร ในสูตร การมอบหมาย และการคำนวณทุกประเภท
ตัวอย่าง
แทนที่จะใช้ตัวแปรเพื่อเก็บค่าส่งคืนของฟังก์ชัน:
let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";
คุณสามารถใช้ฟังก์ชันโดยตรงเป็นค่าตัวแปรได้:
let text = "The temperature is " + toCelsius(77) + " Celsius";
คุณจะได้เรียนรู้มากขึ้นเกี่ยวกับฟังก์ชันต่างๆ ในภายหลังในบทช่วยสอนนี้
ตัวแปรท้องถิ่น
ตัวแปรที่ประกาศภายในฟังก์ชัน JavaScript จะกลายเป็น LOCALของฟังก์ชัน
ตัวแปรท้องถิ่นสามารถเข้าถึงได้จากภายในฟังก์ชันเท่านั้น
ตัวอย่าง
// code here can NOT use carName
function myFunction() {
let carName = "Volvo";
// code here CAN use carName
}
// code here can NOT use carName
เนื่องจากตัวแปรโลคัลเป็นที่รู้จักในฟังก์ชันเท่านั้น ตัวแปรที่มีชื่อเดียวกันจึงสามารถใช้ในฟังก์ชันต่างๆ ได้
ตัวแปรโลคัลจะถูกสร้างขึ้นเมื่อฟังก์ชันเริ่มทำงาน และจะถูกลบเมื่อฟังก์ชันเสร็จสิ้น