JavaScript Default Parameters: คู่มือสำหรับผู้เริ่มต้น

Default parameters ทำให้การทำงานกับฟังก์ชันง่ายขึ้นมาก ด้วย default parameters คุณสามารถบอกฟังก์ชันได้ว่า ควรใช้ parameters อะไรในกรณีที่คุณไม่ได้ระบุใดๆ นี้ช่วยป้องกัน errors และทำให้โค้ดอ่านง่ายขึ้น

JavaScript นำ default parameters มาใน ES2015 อนุญาตให้คุณ initialize ฟังก์ชันด้วยค่า predefined values

ในคู่มือนี้ เราจะพูดถึง default parameters คืออะไร วิธีใช้ และประเภทของ expressions ที่ระบุเป็น default parameter ได้ พร้อมตัวอย่างโค้ด

Parameters vs. Arguments: การต่อสู้

ก่อนเริ่ม มาตอบคำถามคลาสสิกของมือใหม่: parameter และ argument ต่างกันยังไง? คุณต้องรู้ความต่างก่อนใช้ default parameters ใน JavaScript

Parameter คือ named variable ที่ส่งเข้า JavaScript function Parameter ไม่มีค่าโดยตรง มันเป็น placeholder สำหรับค่าที่จะส่งเข้า function ตัวอย่าง parameter:

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

ในตัวอย่าง "name" คือ parameter ไม่มีค่า assigned

Arguments คือค่าที่ส่งเข้า function:

sayHello("Brett");

โค้ดคืนค่า: "Hello, Brett" "Brett" คือ argument คือค่าที่ส่งผ่านฟังก์ชัน

การเรียกฟังก์ชันโดยไม่ระบุ parameters ทั้งหมดอาจนำไปสู่ error:

sayHello()

โค้ดคืนค่า: Hello, undefined เพราะเราไม่ได้ส่งค่าเข้า function

JavaScript Default Parameters

เราแก้ปัญหานี้ได้ด้วยการระบุ default parameter Default parameter อนุญาตให้ระบุค่าที่จะ assign ให้ parameter ในกรณีที่ไม่ได้ระบุ

Default value assignment ใช้ assignment operator:

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

โค้ดคืนค่า: Hello, World เห็นว่าเราไม่ได้ระบุ argument แทนที่จะตั้ง default function parameter ในกรณีนี้ เวลาไม่ได้ระบุ argument ค่า "name" parameter จะกลายเป็น "World"

ง่ายกว่าต้องเช็ค manual ว่ามีค่าระบุมาหรือไม่

Default parameter สามารถมี primitive value หรือ object ใดๆ เป็นค่าได้ ตัวอย่าง default parameters ที่ถูกต้อง:

• String: "Latte"
• Number: 2.40
• Boolean: true
• Array: ["Steven", false]
• Object: {name: "Steven", loyaltyCustomer: false }

การระบุ Multiple Default Parameters

ไม่มีขีดจำกัดจำนวน default params ที่ระบุในฟังก์ชันได้ พิจารณาโค้ดนี้:

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

โค้ดคืนค่า:

Order: Espresso Price: $1.75

ในตัวอย่างนี้ เราระบุ default parameters สองตัว: coffee และ price คุณยังผสม parameters ระหว่าง default และ regular ได้ ตอนทำแบบนี้ ต้องวาง regular parameters ก่อน default parameters พิจารณาตัวอย่างนี้:

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

โค้ดคืนค่า:

Order: Cappuccino Price: $1.75

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

เรากำหนด default value สำหรับ "price" เป็น "1.75" เพราะตั้ง default parameter ทุกครั้งที่ไม่ระบุราคา จะถูกตั้งเป็น "1.75" อัตโนมัติ

สำคัญมากที่ต้องระบุ regular parameters ก่อน default parameters เพราะค่าของ regular parameters ถูก assign ตามลำดับที่ปรากฏใน function call

Functions เป็น Default Parameter

ฟังก์ชันสามารถตั้งเป็น default parameter ได้ มีประโยชน์ถ้าค่าที่ต้องการส่งเข้า function คำนวณจากฟังก์ชันอื่น

ในโค้ดต่อไป เราจะสร้างฟังก์ชันสร้าง pseudo-random username สำหรับผู้เล่นใหม่ในเกม:

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() สร้าง pseudo-random username ทำงานโดยสุ่มเลข และสุ่ม username หนึ่งจากลิสต์สี่ username แล้วนำเลขสุ่มต่อท้าย username ฟังก์ชันคืนค่า username ใหม่

ในฟังก์ชัน createUser เราตั้ง default value ของ "username" parameter ให้เท่ากับฟังก์ชัน getRandomUsername() หมายความว่าเวลาไม่ระบุ username ให้ผู้ใช้ใหม่ จะสุ่ม username ให้อัตโนมัติ

โค้ดต่อมาพิมพ์ username และ email ของผู้ใช้ไปที่ console

สรุป

Default parameters อนุญาตให้ตั้งค่าที่จะ assign ให้ parameter ถ้าไม่ได้ระบุเป็น argument ใน function call Default parameters ช่วยให้ฟังก์ชันอ่านง่ายและลดปัญหาที่อาจเกิดเมื่อไม่ส่งค่าเข้า function

ตอนนี้คุณพร้อมทำงานกับ JavaScript default parameters แบบมืออาชีพแล้ว!