ฟังก์ชัน

ฟังก์ชันคือบล็อกคำสั่งแบบโมดูลที่นำกลับมาใช้ใหม่ได้ ซึ่งใช้ในการดำเนินการชุดงานที่เกี่ยวข้อง เช่น การคำนวณและแสดงผลค่าตามอาร์กิวเมนต์ที่ระบุให้กับฟังก์ชัน ฟังก์ชันคือออบเจ็กต์ เช่นเดียวกับค่าที่ไม่ใช่พื้นฐานทั้งหมด ซึ่งเป็นออบเจ็กต์ที่ไม่ซ้ำกันซึ่งสามารถเรียกเพื่อเรียกใช้โค้ด ส่งผ่านข้อมูลในรูปแบบอาร์กิวเมนต์ และ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`
``