ฟังก์ชันคือบล็อกคำสั่งแบบโมดูลที่นำกลับมาใช้ใหม่ได้ ซึ่งใช้ในการดำเนินการชุดงานที่เกี่ยวข้อง เช่น การคำนวณและแสดงผลค่าตามอาร์กิวเมนต์ที่ระบุให้กับฟังก์ชัน ฟังก์ชันคือออบเจ็กต์ เช่นเดียวกับค่าที่ไม่ใช่พื้นฐานทั้งหมด ซึ่งเป็นออบเจ็กต์ที่ไม่ซ้ำกันซึ่งสามารถเรียกเพื่อเรียกใช้โค้ด ส่งผ่านข้อมูลในรูปแบบอาร์กิวเมนต์ และreturnค่าได้
ฟังก์ชันจะมองว่าเป็นออบเจ็กต์ "คลาสแรก" ซึ่งหมายความว่าแม้จะมีลักษณะการทำงานที่เป็นเอกลักษณ์เฉพาะตัว แต่สามารถใช้ในบริบทเดียวกับออบเจ็กต์ JavaScript อื่นๆ ทั้งหมดได้ เช่น สามารถกำหนดฟังก์ชันให้กับตัวแปร ส่งผ่านเป็นอาร์กิวเมนต์ไปยังฟังก์ชันอื่นๆ และแสดงผลโดยฟังก์ชันอื่นๆ
function myFunction() {
console.log( "This is my function." );
};
ฟังก์ชันที่กำหนดเป็นพร็อพเพอร์ตี้ของออบเจ็กต์มักจะเรียกว่า "method" ตามตัวแปรที่ประกาศโดยใช้ var
" ระบบจะเพิ่มการประกาศฟังก์ชันภายนอกฟังก์ชันที่ล้อมรอบไปยังออบเจ็กต์ส่วนกลางเป็นเมธอด
การประกาศฟังก์ชัน
การประกาศฟังก์ชัน (เรียกอีกอย่างว่า "คำสั่งฟังก์ชัน" หรือ "คำจำกัดความของฟังก์ชัน") จะสร้างฟังก์ชันที่มีชื่อซึ่งสามารถเรียกใช้ที่อื่นได้ในขอบเขตที่มีอยู่
การประกาศฟังก์ชันประกอบด้วยคีย์เวิร์ด function
ตามด้วยตัวระบุ รายการพารามิเตอร์ที่คั่นด้วยคอมมาที่อยู่ในวงเล็บ และคำสั่งบล็อกที่เรียกว่า "เนื้อหาฟังก์ชัน" คุณมักจะพบการประกาศฟังก์ชันที่ไม่ได้ลงท้ายด้วยเครื่องหมายเซมิโคลอน เนื่องจากการประกาศฟังก์ชันเป็นคำสั่ง เครื่องหมายเซมิโคลอนตัวท้ายจึงอาจอนุมานได้ด้วย ASI
function myFunction() {
console.log( "This is my function." );
};
myFunction();
> "This is my function."
สืบเนื่องจากการตัดสินใจด้านการออกแบบตั้งแต่ช่วงแรกของ JavaScript การประกาศฟังก์ชันจะเป็นไปตามลักษณะการทำงานของการยกแบบเดิมเช่นเดียวกับตัวแปรที่ประกาศด้วย var
ซึ่งหมายความว่าการประกาศฟังก์ชันจะเพิ่มไปที่ด้านบนสุดของขอบเขต และอาจเรียกใช้ได้ก่อนที่จะประกาศผลลัพธ์ ไม่ว่าขอบเขตนั้นจะอยู่ในโหมดเข้มงวดหรือไม่
"use strict";
{
myFunction();
function myFunction() {
console.log( "This is my function." );
};
}
> "This is my function."
ภายนอกโหมดเข้มงวด การประกาศฟังก์ชันจะใช้ลักษณะการทำงานของการกำหนดขอบเขตเดิมของ JavaScript ซึ่งหมายความว่าการประกาศฟังก์ชันจะกำหนดขอบเขตเป็นฟังก์ชันที่ล้อมรอบอยู่ใกล้เคียงที่สุด
function myFunction() {
function myNestedFunction() {
console.log( "This is my nested function." );
}
myNestedFunction();
};
myFunction();
> "This is my nested function."
myNestedFunction();
>Uncaught ReferenceError: myNestedFunction is not defined
ในโหมดเข้มงวด การประกาศฟังก์ชันจะกำหนดขอบเขตไว้ที่บล็อกที่ล้อมรอบที่ใกล้ที่สุด ตามที่มีการประกาศตัวแปรโดยใช้ let
หรือ const
ดังนี้
"use strict";
{
function myFunction() {
console.log( "This is my function." );
};
}
myFunction();
> Uncaught ReferenceError: myFunction is not defined
การเรียกใช้ฟังก์ชัน
เช่นเดียวกับตัวแปร ตัวระบุที่ใช้เมื่อประกาศฟังก์ชันจะทำหน้าที่เป็นสัญลักษณ์ของค่า การอ้างอิงฟังก์ชันด้วยตัวระบุเพียงอย่างเดียวจะแสดงผลเฉพาะออบเจ็กต์ฟังก์ชันเท่านั้น และไม่ได้เรียกใช้ฟังก์ชันที่อยู่ในฟังก์ชันต่อไปนี้
function myFunction() {
console.log( "This is my function." );
};
myFunction;
> myFunction() {
console.log( "This is my function." );
}
หากต้องการเรียกใช้โค้ดภายในเนื้อหาของฟังก์ชัน ให้เรียกใช้ (หรือ invoke) ฟังก์ชันโดยต่อท้ายชื่อฟังก์ชันด้วยวงเล็บคู่ที่ตรงกัน
function myFunction() {
console.log( "My function has been executed." );
}
myFunction();
> "My function has been executed."
พารามิเตอร์ในคำจำกัดความฟังก์ชันทำหน้าที่เป็นตัวแปรตัวยึดตำแหน่งสำหรับค่าที่ส่งเข้าไปในเนื้อหาของฟังก์ชันได้เมื่อมีการเรียกใช้ฟังก์ชัน ค่าในวงเล็บเมื่อมีการเรียกใช้ฟังก์ชันคือ "อาร์กิวเมนต์" (แต่คุณอาจเห็น "อาร์กิวเมนต์" ที่ใช้อธิบายทั้งอาร์กิวเมนต์และพารามิเตอร์ในเอกสารบางรายการ)
function myFunction( myParameter ) {
console.log( `The value is: ${ myParameter }.` );
};
myFunction( "this string" );
> "The value is: this string."
หากละเว้นอาร์กิวเมนต์ที่คาดไว้ พารามิเตอร์ที่ได้จะมีค่า undefined
เนื่องจากมีการประกาศพารามิเตอร์ไว้ในเนื้อหาของฟังก์ชัน แต่ไม่ได้เริ่มต้นด้วยค่า ดังนี้
function myFunction( myParameter ) {
console.log( `The value is: ${ myParameter }.` );
};
myFunction();
> "The value is: undefined."
คุณตั้งค่าพารามิเตอร์เริ่มต้นได้โดยกำหนดค่าเริ่มต้นด้วยวิธีเดียวกันกับการเริ่มต้นตัวแปร นั่นคือใช้โอเปอเรเตอร์การกำหนด (=
) ตามด้วยค่า หากคุณระบุอาร์กิวเมนต์สำหรับฟังก์ชันนั้นในภายหลัง ค่าใหม่นั้นจะลบล้างค่าเริ่มต้น
function myFunction( myParameter = "omitted" ) {
console.log( `The value is: ${ myParameter }.` );
};
myFunction( "this string" );
> "The value is: this string."
myFunction();
> "The value is: omitted."
ส่วนเนื้อหาของฟังก์ชัน non-arrow
ยังมีสิทธิ์เข้าถึงดัชนีค่าศูนย์
อาร์เรย์-เช่น arguments
ซึ่งมีค่าใดๆ ที่ส่งผ่านเป็นอาร์กิวเมนต์ ไม่ว่าฟังก์ชันนั้นจะระบุหรือไม่:
คำจำกัดความ
function myFunction() {
console.log( arguments );
};
myFunction( 3, true, "My string" );
> Arguments { 0: 3, 1: true, 2: "My string", … }
ฟังก์ชัน Variadic
ออบเจ็กต์ arguments
ให้คุณสร้างฟังก์ชันแปรผันพื้นฐาน ซึ่งยอมรับอาร์กิวเมนต์จำนวนตัวแปรได้ ดังนี้
function myFunction() {
let result = "";
for (let i = 0; i < arguments.length; i++) {
result += arguments[i] + " - ";
}
console.log( result );
};
myFunction( "My first string", "My second string", "my third string" );\
> "My first string - My second string - my third string - "
อย่างไรก็ตาม แนวทางนี้สำหรับฟังก์ชันแปรผันนี้ไม่ค่อยนิยมใช้ในการพัฒนา JavaScript สมัยใหม่ ปกติแล้วจะมีการใช้ไวยากรณ์พารามิเตอร์ส่วนที่เหลือที่ทันสมัยและอ่านง่าย ซึ่งจะสร้างพารามิเตอร์ที่มีชื่อเริ่มต้นเป็นอาร์เรย์ที่มีอาร์กิวเมนต์ซึ่งอยู่นอกเหนือที่ระบุไว้อย่างชัดแจ้ง
function myFunction( mySeparator, ...myStrings ) {
console.log( myStrings.join( mySeparator ) );
};
myFunction( " - ", "My first string", "My second string", "my third string" );
> "My first string - My second string - my third string"
ไวยากรณ์ของพารามิเตอร์ส่วนที่เหลือทำงานตามที่คาดไว้กับพารามิเตอร์ฟังก์ชันลูกศร ซึ่งต่างจากการเชื่อมโยง parameter
ดังนี้
function myOuterFunction() {
let myInnerArrowFunction = ( ...myParams ) => {
console.log( myParams[ 0 ] );
}
myInnerArrowFunction( true );
};
myOuterFunction( false );
> true
let myArrowFunction = ( ...myParams ) => {
console.log( myParams[ 0 ] );
};
myArrowFunction( true );
> true`
``