สมัครเรียนโทร. 085-350-7540 , 084-88-00-255 , ntprintf@gmail.com
JavaScript เป็นภาษาการเขียนโปรแกรมที่ได้รับความนิยมอย่างกว้างขวางในโลกของการพัฒนาเว็บ หนึ่งในความสามารถที่น่าสนใจของ JavaScript คือโครงสร้างภาษาและฟีเจอร์ที่ทำให้นักพัฒนาเขียนโค้ดได้สะดวกและมีประสิทธิภาพยิ่งขึ้น หนึ่งในนั้นคือ "Destructuring Assignment" ซึ่งช่วยให้การแตกค่าจากอาร์เรย์หรือออบเจกต์เป็นเรื่องง่ายและกระชับกว่าการใช้วิธีแบบดั้งเดิม ในบทความนี้ เราจะศึกษาเกี่ยวกับการใช้ Destructuring Assignment ใน JavaScript อย่างละเอียด รวมถึงตัวอย่างการใช้งานที่น่าสนใจ
Destructuring Assignment เป็นฟีเจอร์ที่สามารถใช้กับทั้งอาร์เรย์และออบเจกต์ ซึ่งช่วยให้การนำข้อมูลออกมาในตัวแปรได้อย่างสะดวก โดยจะใช้เครื่องหมายก้อนปีกสำหรับออบเจกต์ `{}` และก้อนที่บิปของอาร์เรย์ `[]` ในการขยายโครงสร้างข้อมูลเหล่านั้น ตามประกาศ ES6 หรือ ECMAScript 2015
หลักการของ Destructuring Assignment กับอาร์เรย์คือการจับคู่แต่ละค่ากับตัวแปรที่กำหนดไว้ ตัวอย่างเช่น
const coordinates = [100, 200];
const [x, y] = coordinates;
console.log(x); // 100
console.log(y); // 200
ในตัวอย่างนี้ ค่าในอาร์เรย์ `coordinates` ถูกกระจายออกมาเป็นสองตัวแปร `x` และ `y` โดยไม่จำเป็นต้องเรียกใช้ค่าดังกล่าวโดยตรงจากอาร์เรย์
การใช้ Default Values
เมื่อ array ไม่มีบางค่าสำหรับตัวแปรที่กำหนดไว้ คุณสามารถให้ค่าดีฟอลต์ได้ เช่น
const [a, b = 10, c = 20] = [5];
console.log(a); // 5
console.log(b); // 10 (เพราะไม่ได้กำหนดค่าใน array)
console.log(c); // 20 (เพราะไม่ได้กำหนดค่าใน array)
การ Destructuring ออบเจกต์ก็มีลางคล้ายกับอาร์เรย์ แต่จะใช้ชื่อของคุณสมบัติในการจับคู่กับตัวแปร ดังตัวอย่าง
const person = {
name: 'John',
age: 30,
city: 'Bangkok'
};
const { name, age } = person;
console.log(name); // John
console.log(age); // 30
การเปลี่ยนชื่อของตัวแปร
บางครั้งคุณอาจต้องการเปลี่ยนชื่อของตัวแปรที่ได้มา เช่น
const { name: personName, age: personAge } = person;
console.log(personName); // John
console.log(personAge); // 30
การใช้ Default Values กับออบเจกต์
เช่นเดียวกับอาร์เรย์ คุณสามารถให้ค่าดีฟอลต์สำหรับกรณีที่คุณสมบัติไม่มีอยู่ในออบเจกต์
const { address = 'Unknown' } = person;
console.log(address); // Unknown
Destructuring Assignment มีประโยชน์อย่างมากเมื่อนำมาใช้กับฟังก์ชัน โดยช่วยทำให้ฟังก์ชันรับพารามิเตอร์ได้ง่ายและเข้าใจได้ชัดเจนยิ่งขึ้น
function printCoordinates([x, y]) {
console.log(`X: ${x}, Y: ${y}`);
}
printCoordinates([12, 30]); // X: 12, Y: 30
คุณยังสามารถใช้ให้ทำงานร่วมกับพารามิเตอร์ที่เป็นออบเจกต์ได้โดยตรง เช่น
function printPersonInfo({ name, age }) {
console.log(`Name: ${name}, Age: ${age}`);
}
printPersonInfo(person); // Name: John, Age: 30
Destructuring Assignment เป็นหนึ่งในฟีเจอร์ขั้นสูงของ JavaScript ที่ทำให้กระบวนการเขียนโค้ดง่ายและกระชับขึ้นมาก มันไม่เพียงช่วยให้นักพัฒนาทำงานได้ราบรื่นขึ้น แต่ยังทำให้โค้ดชัดเจนยิ่งขึ้นอีกด้วย ทั้งนี้ Destructuring ยังมีความยืดหยุ่นสูงเมื่อนำมาใช้ร่วมกับฟังก์ชันในการจัดการข้อมูล
หากคุณต้องการศึกษาเพิ่มเติมเกี่ยวกับความก้าวหน้าและเทคนิคต่าง ๆ ในการเขียนโปรแกรมด้วย JavaScript หรือภาษาโปรแกรมอื่น ๆ สามารถเข้ามาเรียนรู้ได้ที่ EPT ที่นี่คุณจะได้พบกับหลักสูตรที่ครอบคลุมและครบถ้วน พร้อมทีมงานผู้เชี่ยวชาญที่พร้อมจะพาคุณไปสู่เส้นทางนักพัฒนาที่ประสบความสำเร็จในวงการ!
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
Tag ที่น่าสนใจ: java c# vb.net python c c++ machine_learning web database oop cloud aws ios android
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM
Copyright (c) 2013 expert-programming-tutor.com. All rights reserved. | 085-350-7540 | 084-88-00-255 | ntprintf@gmail.com