บทความ IT เจ๋งๆ

5 JavaScript ES12 Features ที่คุณสามารถนำไปใช้ใน Projects ได้

09-ธ.ค.-21

คัมภีร์เทพ IT

ปัจจุบันคุณสามารถใช้งาน ECMAScript 2021 (12th Edition) ได้แล้ว มันมาพร้อมกับ Features ใหม่ ๆ และการปรับปรุงเรื่อง Syntax ซึ่งการปรับปรุงเหล่านี้จะช่วยทำให้ JavaScript มีประสิทธิภาพมากขึ้น และเพื่อช่วยให้ Developer ทำงานให้ลุล่วงได้อย่างง่ายดาย และนี่ก็เป็น 5 JavaScript ES12 Features ที่คุณสามารถนำไปใช้ใน Projects ได้

1. Numeric Separators

Numeric Separators จะช่วยให้คุณเพิ่ม Underscores ระหว่างตัวเลขใน Literal Numbers ได้ ซึ่งช่วยทำให้คุณสามารถอ่านได้ง่ายขึ้น Underscores เหล่านี้ จะถูกตัดออกโดยอัตโนมัติเมื่อ Files ถูกแยกวิเคราะห์ (Parse) คุณสามารถดูที่ Code Snippet ด้านล่างนี้ เพื่อทำความเข้าใจว่า คุณสามารถใช้ Numeric Separators ได้อย่างไร

2. String.prototype.replaceAll

replaceAll() Function บน String Prototype จะช่วยให้สามารถแทนที่ Instances ทั้งหมดของ Sub-String ได้ โดยไม่ต้องใช้ regex หาก replace() ถูกใช้งานกับ String มันจะแทนที่ Instance แรกของค่านั้นเท่านั้น ในทางกลับกัน replaceAll() จะมี Function การทำงานเพื่อแทนที่ Instance ทั้งหมดของค่านั้น คุณสามารถดูที่ Code Snippet ต่อไปนี้ เพื่อทำความเข้าใจว่าคุณสามารถใช้ replaceAll() ได้อย่างไร

3. Promise.any() and AggregateError

Promise.any จะตรงกันข้ามกับ Promise.all() โดย Promise.any() จะถูกเรียกใช้หาก Promises บางส่วนได้รับการแก้ไข แต่ในทางกลับกัน Promise.all() จะรอจนกว่า Promises ทั้งหมดได้รับการแก้ไข

นี่ก็คือ ข้อแตกต่างใน any(), all() และ allSettled()

  • any() — มันจะ Execute หากมีอย่างน้อยหนึ่ง Promise ได้รับการแก้ไข และจะ Reject หาก Promises ทั้งหมดถูก Reject
  • all() — มันจะ Execute หาก Promises ทั้งหมดได้รับการแก้ไข และมันจะ Reject หากมีอย่างน้อยหนึ่ง Promise ถูก Reject
  • allSettled() — มันจะ Execute หาก Promises ทั้งหมด ได้รับการแก้ไขหรือถูก Reject

คุณสามารถดูที่ Code Snippet ต่อไปนี้ เพื่อทำความเข้าใจว่าคุณสามารถใช้ Promise.any() ได้อย่างไร

หาก Promises ทั้งหมดถูก Reject จากนั้น AggregateError Exception จะถูก Throw ออกไป คุณสามารถดูที่ Code Snippet ต่อไปนี้ เพื่อทำความเข้าใจวิธีจัดการกับ Exception

4. Logical Assignment Operators

มีการแนะนำ 3 Logical Assignment Operators จากการ Update ของ ECMAScript 2021 สิ่งเหล่านี้เป็น Combination กันของ Logical Operators และ Assignment Expressions

  • Logical OR assignment operator ||=

Logical OR assignment operator ||= ยอมรับการใช้ 2 Operands และกำหนด Right Operand ให้กับ Left Operand ถ้า Left Operand เป็น False คุณสามารถดูที่ Code Snippet ต่อไปนี้ เพื่อเรียนรู้วิธีการใช้ Logical OR assignment operator 

Logical OR Assignment Operator เป็น Short-Circuits ซึ่ง Operator ||= นี้ สามารถเทียบเท่ากับคำสั่งต่อไปนี้ ที่ใช้ Logical OR Operator

  • Logical AND assignment operator &&=

Logical AND assignment operator &&= จะ Assign เฉพาะ Right Operand ให้กับ Left Operand ถ้า Left Operand เป็น True คุณสามารถดูที่ Code Snippet ต่อไปนี้ เพื่อเรียนรู้วิธีการใช้ Logical AND assignment operator

Logical AND Assignment Operator ก็ยังเป็น Short-Circuits ซึ่ง Operator &&= นี้ สามารถเทียบเท่ากับคำสั่งต่อไปนี้ ที่ใช้ Logical AND Operator

  • Nullish Coalescing assignment operator ??=

Nullish Coalescing assignment operator ??= จะ Assign เฉพาะ Right Operand ให้กับ Left Operand ถ้า Left Operand เป็น Null หรือ Undefined คุณสามารถดูที่ Code Snippet ต่อไปนี้ เพื่อเรียนรู้วิธีการใช้ Nullish Coalescing assignment operator

Logical AND Assignment Operator ก็ยังเป็น Short-Circuits ซึ่ง Operator ??= นี้ สามารถเทียบเท่ากับคำสั่งต่อไปนี้ ที่ใช้ Nullish Coalescing operator

5. Private Class Methods and Accessors

Class Methods และ Properties เป็น Public โดยค่า Default แต่ Private Methods และ Properties สามารถถูกสร้างได้โดยใช้ Hash # วางไว้ข้างหน้า ส่วน Privacy Encapsulation ได้รับการบังคับใช้จากการ Update ของ ECMAScript 2021 ซึ่ง Private Methods และ Properties เหล่านี้ สามารถถูกเข้าถึงได้จากภายใน Class เท่านั้น คุณสามารถดูที่ Code Snippet ต่อไปนี้ เพื่อเรียนรู้วิธีการใช้ Private Methods 

Private Accessors เป็น Private Getters และ Private Setter ซึ่ง Getter จะให้คุณสามารถ Fetch ค่าของ Class Property ส่วน Setter จะให้คุณสามารถ Assign ค่าให้กับ Class Property คุณสามารถ Define Private Getter โดยใช้ Hash # วางไว้ข้างหน้า

ในทำนองเดียวกัน คุณสามารถ Define Private Setter โดยใช้ Hash # วางไว้ข้างหน้า ด้วยเช่นเดียวกัน

คุณสามารถดูที่ Code Snippet ต่อไปนี้ เพื่อเรียนรู้วิธีใช้งาน Private Getters และ Private Setter

เชื่อว่าตอนนี้คุณได้เรียนรู้ Features ที่น่าสนใจของ JavaScript ES12 (ECMAScript 2021) เรียบร้อยแล้ว ดังนั้น คุณสามารถเริ่มใช้งาน Features ต่าง ๆ ที่กล่าวถึงข้างต้น กับ Projects ในปัจจุบันหรือ Projects ที่คุณจะทำในอนาคตได้

ที่มา:  https://levelup.gitconnected.com/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

เพิ่มเพื่อน

 

บทความล่าสุด

ประเภทบทความ