ฟังก์ชัน

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

ฟังก์ชันต่างๆ ถือว่าเป็น "ชั้นเรียนแรก" ซึ่งหมายความว่าแม้จะมีลักษณะการทำงานเฉพาะตัว แต่ก็สามารถใช้ใน บริบทเดียวกับออบเจ็กต์ JavaScript อื่นๆ ตัวอย่างเช่น ฟังก์ชันอาจเป็น กำหนดให้กับตัวแปร ส่งต่อเป็นอาร์กิวเมนต์ไปยังฟังก์ชันอื่น และส่งผลลัพธ์ โดยฟังก์ชันอื่นๆ

function myFunction() {
   console.log( "This is my function." );
};

ฟังก์ชันที่กำหนดไว้เป็นคุณสมบัติของออบเจ็กต์คือ ซึ่งปกติจะเรียกว่า "เมธอด" เช่นเดียวกับตัวแปรที่ประกาศโดยใช้ 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." );
}

หากต้องการเรียกใช้โค้ดภายในเนื้อหาของฟังก์ชัน ให้เรียก (หรือ เรียกใช้) ฟังก์ชัน โดยต่อท้ายชื่อฟังก์ชันด้วยวงเล็บที่ตรงกัน

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."

ลำตัวของไม่ใช่ลูกศร ยังมีสิทธิ์เข้าถึงฟังก์ชันที่จัดทำดัชนีเป็นศูนย์ วัตถุ อาร์เรย์เหมือนarguments ที่มีค่าที่ส่งผ่านเป็นอาร์กิวเมนต์ ไม่ว่าฟังก์ชันจะมีหรือไม่ก็ตาม คำจำกัดความจะระบุพารามิเตอร์ดังนี้

function myFunction() {
   console.log( arguments );
};

myFunction( 3, true, "My string" );
> Arguments { 0: 3, 1: true, 2: "My string", … }

ฟังก์ชันแปรผัน

ออบเจ็กต์ 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 - "

อย่างไรก็ตาม วิธีนี้ไม่ค่อยมีการใช้ฟังก์ชัน variadic ใน 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`
``