พารามิเตอร์เริ่มต้นของ JavaScript:คู่มือสำหรับผู้เริ่มต้น

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

JavaScript แนะนำพารามิเตอร์เริ่มต้นใน ES2015 สิ่งเหล่านี้ช่วยให้คุณเริ่มต้นฟังก์ชันด้วยค่าที่กำหนดไว้ล่วงหน้า

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

พารามิเตอร์เทียบกับอาร์กิวเมนต์:การต่อสู้

ก่อนที่เราจะเริ่ม เรามาพูดถึงคำถามเก่าแก่จากผู้เริ่มต้นกันก่อนว่า Parameter กับ Argument ต่างกันอย่างไร? คุณจำเป็นต้องทราบความแตกต่างก่อนที่คุณจะเริ่มทำงานกับพารามิเตอร์เริ่มต้นใน JavaScript

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

function sayHello(name) {
	console.log("Hello, " + name);
}

ในตัวอย่างนี้ “ชื่อ” คือพารามิเตอร์ของเรา มันไม่มีค่าใด ๆ ที่กำหนดให้กับมัน

ในทางกลับกัน อาร์กิวเมนต์เป็นค่าที่ส่งผ่านไปยังฟังก์ชัน:

sayHello("Brett");

รหัสของเราส่งคืน:“สวัสดี เบรตต์” “Brett” เป็นตัวอย่างของอาร์กิวเมนต์ ซึ่งเป็นค่าที่เราส่งผ่านฟังก์ชันของเรา

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

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

การเรียกใช้ฟังก์ชันโดยไม่ระบุพารามิเตอร์ทั้งหมดอาจทำให้เกิดข้อผิดพลาด:

sayHello()

รหัสของเราส่งคืน:Hello, undefined . นั่นเป็นเพราะเราไม่ได้ส่งผ่านค่าไปยังฟังก์ชันของเรา

พารามิเตอร์เริ่มต้นของ JavaScript

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

การกำหนดค่าเริ่มต้นใช้ตัวดำเนินการกำหนดค่า:

function sayHello(name="World") {
	console.log("Hello, " + name);
}

sayHello();

รหัสของเราส่งคืน:Hello, World . คุณจะเห็นว่าเราไม่ได้ระบุอาร์กิวเมนต์ในตัวอย่างนี้ เราได้ตั้งค่าพารามิเตอร์ฟังก์ชันเริ่มต้นแทน ในกรณีนี้ เมื่อใดก็ตามที่ไม่ได้ระบุอาร์กิวเมนต์ ค่าของพารามิเตอร์ "name" ในฟังก์ชันของเราจะกลายเป็น "World"

ซึ่งง่ายกว่าการตรวจสอบด้วยตนเองว่ามีการระบุค่าหรือไม่

พารามิเตอร์เริ่มต้นสามารถมีค่าดั้งเดิมหรือวัตถุที่กำหนดเป็นค่าของมันได้ ต่อไปนี้คือตัวอย่างบางส่วนของพารามิเตอร์เริ่มต้นที่ถูกต้อง:

• สตริง:“ลาเต้”
• จำนวน:2.40
• บูลีน:จริง
• อาร์เรย์:["สตีเวน", เท็จ]
• วัตถุ:{ชื่อ:“สตีเวน”, ความภักดีลูกค้า:เท็จ }

การระบุพารามิเตอร์เริ่มต้นหลายรายการ

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

function createOrder(coffee="Espresso", price=1.75) {
	console.log("Order: " + coffee);
	console.log("Price: $" + price);
}

createOrder();

รหัสของเราส่งคืน:

Order: Espresso
Price: $1.75

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

function createOrder(coffee, price=1.75) {
	console.log("Order: " + coffee);
	console.log("Price: $" + price);
}

createOrder("Cappuccino");

รหัสของเราส่งคืน:

Order: Cappuccino
Price: $1.75

เราได้ระบุหนึ่งอาร์กิวเมนต์:Cappuccino นี่คือชื่อกาแฟที่เราสั่ง เนื่องจากเราไม่ได้ระบุค่าเริ่มต้นสำหรับพารามิเตอร์นี้ เราจึงต้องระบุค่าอาร์กิวเมนต์ มิฉะนั้นจะส่งคืน "undefined"

เราประกาศว่าค่าเริ่มต้นสำหรับ "ราคา" ควรเป็น "1.75" เนื่องจากเราตั้งค่าพารามิเตอร์เริ่มต้นนี้ ทุกครั้งที่เราไม่ได้ระบุราคา ราคาจะถูกตั้งค่าเป็น “1.75” โดยอัตโนมัติ

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

ฟังก์ชันเป็นพารามิเตอร์เริ่มต้น

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

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

function getRandomUsername() {
	var number = Math.floor(Math.random() * 100);
	var username_list = ['Crash', 'Steve', 'Lucinda', 'Ellie'];
	var username = username_list[Math.floor(Math.random() * username_list.length)];
	var final_username = username + number;

	return final_username;
}

function createUser(username = getRandomUsername(), email) {
	console.log('Your username is: ' + username);
	console.log('Your email is: ' + email);
}

createUser('test@test.com');

รหัสของเราส่งคืน:

Your username is: Crash87
Your email is: test@test.com

มาทำลายรหัสของเรากัน

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

ใน createUser . ของเรา ฟังก์ชัน เราได้ตั้งค่าเริ่มต้นของพารามิเตอร์ "ชื่อผู้ใช้" ให้เท่ากับ getRandomUsername() ของเรา การทำงาน. ซึ่งหมายความว่าเมื่อใดก็ตามที่เราไม่ได้ระบุชื่อผู้ใช้สำหรับผู้ใช้ใหม่ของเรา จะมีการสร้างชื่อผู้ใช้แบบสุ่ม

จากนั้นรหัสของเราจะพิมพ์ชื่อผู้ใช้และที่อยู่อีเมลของผู้ใช้ไปที่คอนโซล

บทสรุป

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

ตอนนี้คุณพร้อมที่จะเริ่มทำงานกับพารามิเตอร์เริ่มต้นของ JavaScript อย่างผู้เชี่ยวชาญแล้ว!