JavaScript นับเป็นภาษาพื้นฐานที่ทุกเว็บดีเวลอปเปอร์ต้องรู้จัก แม้จะมีการใช้งานอย่างแพร่หลาย แต่ก็ยังมีคุณสมบัติบางอย่างที่หลายคนอาจยังไม่รู้จักหรือใช้งานเท่าที่ควร ในบทความนี้ ผมจะพาทุกคนไปรู้จักกับ 5 คุณสมบัติสุดเจ๋งของ JavaScript ที่คุณอาจยังไม่เคยใช้ ซึ่งการเข้าใจและการนำไปใช้เหล่านี้อาจช่วยให้โค้ดของคุณนั้นสะอาด และมีประสิทธิภาพมากยิ่งขึ้น!
1. Nullish Coalescing Operator (??)
JavaScript มีการเสนอ ‘Nullish Coalescing Operator' เป็นตัวช่วยในการจัดการกับค่า null หรือ undefined อย่างชาญฉลาด เครื่องหมาย ‘??’ ช่วยให้คุณกำหนดค่าเริ่มต้นในกรณีที่ตัวแปรมีค่าเป็น null หรือ undefined โดยไม่ต้องใช้เงื่อนไขเช็คแบบเก่าๆ ดูโค้ดตัวอย่าง:
let greeting = userGreeting ?? 'Hello, guest!';
console.log(greeting); // 'Hello, guest!' หาก userGreeting คือ null หรือ undefined
2. Optional Chaining (?.)
‘Optional Chaining' หรือ ?. เปิดโอกาสให้คุณเข้าถึงคุณสมบัติของอ็อบเจ็กต์ที่อาจไม่มีอยู่จริงอย่างไม่ต้องห่วงเรื่องข้อผิดพลาดที่เกิดจาก `undefined` หรือ `null`. ด้วยการใช้ ?. คุณจะไม่ต้องเขียนโค้ดยาวๆ เพื่อเช็คว่าคุณสมบัตินั้นมีหรือไม่อีกต่อไป:
const city = user?.address?.city;
console.log(city); // undefined หาก user หรือ user.address ไม่มีค่า
3. Template Literals
‘Template Literals' ให้คุณสร้างสตริงที่มีการแทรกตัวแปรหรือนิพจน์ได้ง่ายขึ้น ใช้เครื่องหมาย backtick (` `) ในการเริ่มและจบสตริง และใช้ ${ } สำหรับการแทรกตัวแปรหรือนิพจน์ นี่เป็นวิธีที่สะอาดกว่าของการทำ string concatenation:
const name = 'Prayuth';
const greeting = `Hello, ${name}! How are you?`;
console.log(greeting); // 'Hello, Prayuth! How are you?'
4. Destructuring Assignment
การใช้งาน 'Destructuring Assignment' เป็นวิธีที่สะดวกในการตั้งค่าตัวแปรจากอาร์เรย์หรืออ็อบเจกต์ ไม่ต้องจำลำดับหรือเรียกคุณสมบัติเหล่านั้นอย่างยุ่งยากอีกต่อไป ตัวอย่างการใช้งานคือ:
const user = { firstName: 'Somsri', lastName: 'Sukhum', age: 30 };
const { firstName, age } = user;
console.log(firstName); // 'Somsri'
console.log(age); // 30
5. Async/Await
‘Async/Await' คือการปรับปรุงในการจัดการกับ asynchronous code ทำให้โค้ดที่เขียนดูเหมือนเป็นโค้ดแบบ synchronous ช่วยลดความซับซ้อนของการใช้พรอมิส (Promises) และการจัดการกับ callback-hell:
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error fetching data:', error);
}
}
fetchData();
การรู้จักกับคุณสมบัติเหล่านี้ของ JavaScript ไม่เพียงช่วยเพิ่มความสามารถในภาษาของคุณเท่านั้น แต่ยังช่วยให้โค้ดที่คุณเขียนนั้นอ่านง่ายและรักษาได้ง่ายขึ้น จึงไม่แปลกใจที่ JavaScript ได้กลายเป็นภาษาที่หลายคนเลือกเรียนรู้และใช้งาน
หากคุณพบว่าฟีเจอร์เหล่านี้น่าสนใจและต้องการขุดลึกลงไปในโลกโปรแกรมมิ่งมากขึ้น สถาบัน EPT ของเรามีหลักสูตรที่พร้อมจะนำคุณไปสู่ความเข้าใจที่ลึกซึ้งในภาษา JavaScript และเทคโนโลยีที่เกี่ยวข้องได้อย่างแน่นอน อย่ารอช้าที่จะไต่สู่จุดสูงสุดของภาษาที่ขับเคลื่อนเว็บไซต์ระดับโลก และเริ่มเดินทางการเรียนรู้ที่น่าเร้าใจไปกับเราได้ที่นี่ ณ EPT.
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
Tag ที่น่าสนใจ: javascript nullish_coalescing_operator optional_chaining template_literals destructuring_assignment async/await programming web_development
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ 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