วิธีใช้ฟังก์ชัน JavaScript:คำแนะนำทีละขั้นตอน

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

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

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

ในบทช่วยสอนนี้ เราจะสำรวจพื้นฐานของฟังก์ชัน:วิธีกำหนดฟังก์ชัน วิธีเรียกใช้ฟังก์ชัน และเวลาที่ฟังก์ชันอาจมีประโยชน์

วิธีใช้ฟังก์ชันกำหนด JavaScript

มีสองวิธีในการกำหนดฟังก์ชันใน JavaScript:ผ่านการประกาศและนิพจน์ เริ่มต้นด้วยวิธีการประกาศการกำหนดฟังก์ชัน

JavaScript การประกาศฟังก์ชัน

การประกาศฟังก์ชันกำหนดฟังก์ชันที่มีชื่อ ในการกำหนดฟังก์ชันประเภทนี้ คุณควรเริ่มโค้ดด้วย function คีย์เวิร์ด ตามด้วยชื่อของฟังก์ชัน นี่คือตัวอย่าง:

function nameOfYourFunction() {
	// Function code
}

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

จากนั้น เช่นคำสั่ง for หรือ if รหัสของฟังก์ชันจะอยู่ในวงเล็บปีกกา นี่คือตัวอย่างฟังก์ชันที่จะพิมพ์ Google ไปที่คอนโซล:

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

function printGoogle() {
	console.log(“Google”);
}

ภายใน printGoogle() ฟังก์ชัน JS คือ console.log() คำสั่งที่จะดำเนินการเมื่อมีการเรียกใช้ฟังก์ชัน แต่จะไม่มีอะไรเกิดขึ้นจนกว่าเราจะเรียกใช้ฟังก์ชัน หากเราต้องการเรียกใช้ฟังก์ชัน เราสามารถใช้รหัสนี้:

printGoogle();

ตอนนี้ มารวมโค้ดของเราเข้าด้วยกันเป็นฟังก์ชันเดียว แล้วเรียกใช้มัน:

// Declare the printGoogle() function
function printGoogle() {
	console.log(“Google”);
}

// Invoke the printGoogle() function
printGoogle();

ผลลัพธ์ของฟังก์ชันนี้จะเป็น Google . printGoogle() ฟังก์ชั่นจะส่งคืนผลลัพธ์เมื่อมีการเรียกใช้ในบรรทัดสุดท้ายในกรณีนี้

ตอนนี้โค้ดการพิมพ์ของเราอยู่ในฟังก์ชัน เราสามารถรันได้หลายครั้งตามต้องการโดยเรียก printGoogle() การทำงาน.

JavaScript นิพจน์ฟังก์ชัน

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

ลองใช้ตัวอย่างเดียวกันกับด้านบน แทนที่จะประกาศฟังก์ชันด้วยตัวเอง เราสามารถกำหนดให้กับตัวแปรแทนได้ นี่คือตัวอย่าง:

const google = function printGoogle() {
	console.log(“Google”);
}

เพื่อเรียกนิพจน์นี้ เราเพิ่ม google() บรรทัดของรหัสไปยังทุกที่ที่เราต้องการให้นิพจน์ทำงาน

พารามิเตอร์ของฟังก์ชัน

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

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

ดังนั้น เราจำเป็นต้องใช้พารามิเตอร์ ถ้าเราเพิ่ม name พารามิเตอร์ไปยังฟังก์ชัน JS ของเรา จากนั้นเราสามารถพิมพ์ชื่อใดๆ ไปยังคอนโซลผ่านฟังก์ชันของเราได้ นี่คือตัวอย่าง:

function printCompany(name) {
	console.log(`My favorite company is ${name}!`);
}

ชื่อของฟังก์ชันคือ printCompany() และพารามิเตอร์ของเราเรียกว่า name . พารามิเตอร์สามารถเรียกได้ภายในฟังก์ชัน JavaScript ในตัวอย่างข้างต้น เราใช้พารามิเตอร์ชื่อเพื่อเปลี่ยนสิ่งที่จะพิมพ์บน console.log() บรรทัดของรหัส

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

นี่คือตัวอย่าง:

// Call printCompany() function with “Snapchat” as “name”
printCompany(“Snapchat”);

เมื่อเรารันโค้ดนี้ สิ่งต่อไปนี้จะถูกพิมพ์:

My favorite company is Snapchat!

ในตัวอย่างของเรา เราเรียกใช้ฟังก์ชันโดยใช้ printCompany() จากนั้นเรากำหนดชื่อในวงเล็บ ดังนั้น ตอนนี้ เราสามารถใช้ฟังก์ชันของเราซ้ำได้หลายครั้งโดยใช้ชื่อต่างกัน

เป็นที่น่าสังเกตว่าคุณสามารถใช้พารามิเตอร์ได้มากเท่าที่คุณต้องการ และคุณจะอ้างอิงตามลำดับ เราจะใช้ตัวอย่างที่แสดงการดำเนินการด้านล่างนี้

คืนค่า

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

ต่อไปนี้คือตัวอย่างของฟังก์ชันที่บวกตัวเลขสองตัวและให้ผลรวมแก่เรา:

function addNumbers(first, second) {
	return first + second;
}

addNumbers(1, 2);

ในโปรแกรมนี้ ฟังก์ชันของเราถูกเรียกและส่งต่อตัวเลขสองตัวผ่านฟังก์ชัน เมื่อฟังก์ชันนี้ทำงาน—ในบรรทัดสุดท้ายในตัวอย่างด้านบน—เราจะได้คำตอบ 3 ในทางกลับกัน. รายการพารามิเตอร์ของเราคั่นด้วยเครื่องหมายจุลภาค

โปรแกรมได้เพิ่ม 1 และ 2 โดยมีชื่อพารามิเตอร์ first และ second และส่งคืนรหัส หากเราต้องการดูค่าเหล่านี้ เราสามารถเพิ่ม console.log() ทำงานรอบบรรทัดที่เราเรียกว่า addNumbers(1, 2) .

ฟังก์ชันลูกศร

สำหรับ ECMAScript 6 มีวิธีที่กระชับกว่าในการกำหนดฟังก์ชันที่เรียกว่าฟังก์ชันลูกศร สิ่งเหล่านี้แสดงโดยใช้นิพจน์ต่อไปนี้:=> .

ฟังก์ชันเหล่านี้เป็นประเภทของนิพจน์ฟังก์ชัน ลองใช้ตัวอย่างเพื่อแสดงการทำงานของลูกศร:

const addNumbers = (first, second) => {
	return first + second;
}

addNumbers(10, 15);

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

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

บทสรุป

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

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

แทนที่จะต้องเขียนโค้ดหลายบรรทัดทุกครั้งที่ต้องการใช้ คุณสามารถเพิ่มโค้ดเหล่านี้ลงในฟังก์ชันและเรียกใช้ฟังก์ชันเมื่อต้องการเรียกใช้โค้ด และส่งค่าต่างๆ ที่ต้องใช้ไปยังฟังก์ชันได้

ต่อไปนี้คือประเด็นสำคัญบางส่วนจากบทความนี้:

• ฟังก์ชันคือโปรแกรมย่อยที่ออกแบบมาเพื่อเรียกใช้โค้ดบางบรรทัด
• ฟังก์ชันจะทำงานเมื่อมีการเรียกเท่านั้น เราเรียกสิ่งนี้ว่าการเรียกใช้ฟังก์ชัน
• ค่าสามารถส่งผ่านไปยังฟังก์ชัน แล้วใช้ภายในฟังก์ชันได้
• ฟังก์ชันสามารถคืนค่าได้