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

10 เทคนิค เขียน JavaScript แบบสั้น (สำหรับมือใหม่)

19-ต.ค.-17

คัมภีร์เทพ IT

        ในการ Coding Program นั้น เรามักจะพบว่า แม้ผลลัพธ์จะออกมาเหมือนกัน แต่ Programmer/Developer แต่ละคนก็มีรูปแบบการ Coding ที่แตกต่างกัน ขึ้นอยู่กับความถนัดและความเชี่ยวชาญของแต่ละบุคคล วันนี้ทีมงาน TechStar มี 10 เทคนิคการเขียน JavaScript ที่สั้นกระทัดรัด (มีตัวอย่างเปรียบเทียบระหว่างการใช้วิธีปกติกับวิธีสั้นมาให้ด้วย) สำหรับผู้ที่เพิ่งเริ่ม Coding หรือแม้แต่คนที่มีประสบการณ์การ Coding มานานแล้ว ก็สามารถนำเทคนิคเหล่านี้ไปใช้ได้นะครับ

 

  1. Decimal numbers
    หากคุณจำเป็นต้อง Coding โปรแกรม โดยเป็นตัวเลขที่ลงท้ายด้วย “0” เยอะๆ ตอนนี้มีเทคนิคที่จะช่วยให้เขียนได้ง่ายขึ้น โดยใช้ตัวอักษร “e” แทน ส่วนตัวเลขที่อยู่หลังตัว e จะเป็นจำนวนเลข 0 เช่น 16e4 มีค่าเท่ากับ 160000 เป็นต้น

     
  2. Increment / Decrement
    สำหรับกรณี Increment ใช้ในรูปแบบเครื่องหมาย “++” ตามหลังตัวแปร ซึ่งหมายถึง บวกค่าตัวแปรเพิ่มขึ้นอีก 1 ส่วนกรณี Decrement ใช้ในรูปแบบเครื่องหมาย “--“ ตามหลังตัวแปร ซึ่งหมายถึง ลบค่าตัวแปรลงไปอีก 1 โดยทั่วไปมักจะใช้กันบ่อยใน For loop

     
  3. Add / Distract / Multiply / Divide
    สำหรับการดำเนินการทางคณิตศาสตร์พื้นฐานประกอบด้วย +, -, *, / วิธีการใช้จะคล้ายกับ Increment / Decrement แต่ในกรณีนี้จะต่างกันตรงที่ ต้องระบุค่าที่จะ +, -, *, / ไปเลย (เพราะไม่ใช่เพิ่มหรือลดทีละ 1) ในตัวอย่างด้านล่างตัวแปร i จะเพิ่มขึ้น 5, j ลดลง 3, k คูณด้วย 10 และ l หารด้วย 2

     
  4. Determine character position
    Method charAt() นับเป็นอีก 1 วิธีที่มีการใช้กันบ่อยกับตัวแปรประเภท String โดยจะมีการ Return ค่าตัวอักขระในตำแหน่งที่ระบุกลับมาให้ ซึ่งวิธีใช้งานคือ จะรุบะตำแหน่งอักขระที่ต้องการในเครื่องหมาย ”[ ]” แต่อย่าลืมว่า การใช้งาน Method charAt() ตำแหน่งเริ่มต้นจะเป็น “0” ดังนั้น myString [4] จะ Return ตัวอักขระที่ 5 ใน String ซึ่งจากในตัวอย่างก็คือ "y" นั่นเอง
  5. Declare variables in bulk
    ถ้าต้องการ Declare ค่าตัวแปร โดยทั่วไปจะ Declare ทีละ 1 ตัว แต่ด้วยวิธีการแบบสั้น เราสามารถ Declare พร้อมๆ กันทีเดียวได้เลย โดยใช้ “var” (หรือ Let) เพียงครั้งเดียว แล้วประกาศค่าตัวแปรต่อไปได้เลย โดยคั่นด้วย “,” เพียงแค่นั้น ซึ่งวิธีนี้สามารถ Declare ค่าตัวแปรได้ทั้งที่ระบุค่า และ ไม่ระบุค่า

     
  6. Declare an associative array
    การ Declare Array ใน JavaScript เป็นงานที่ค่อนข้างง่าย โดยใช้ไวยากรณ์ var myArray = ["apple", "pear", "orange"] แต่อย่างไรก็ตามการประกาศ Associative Array จะมีความซับซ้อนกว่าเล็กน้อย เนื่องจากคุณไม่เพียงต้องกำหนดค่า(Values) แต่ยังกำหนดคีย์ (Keys) ด้วย (ในกรณีของ Array โดยทั่วไป Key คือ 0, 1, 2, 3,… เป็นต้น) สำหรับใน Associative Array จะเป็นการจับคู่กันระหว่าง Values กับ Keys ถ้าเราใช้แบบวิธีปกติจะ Declare Array ทีละ 1 ค่า แต่ในวิธีแบบสั้น คุณสามารถ Declare Associative Array ได้เลยในครั้งเดียว จากตัวอย่างเป็นการ Declare Associative Array โดยระบุ สถานที่เกิด (Values) ของดาราดัง (Keys)

     
  7. Declare an object
    การ Declare object จะคล้ายกับการ Declare Associative Array แต่อย่างไรก็ตามในที่นี้ไม่ใช้การจับคู่ระหว่าง  Keys กับ Values แต่เป็น Property กับ Values ซึ่งคุณต้องวางระหว่างเครื่องหมาย { } โดยลองดูได้จากตัวอย่าง

     
  8. Use the conditional operator
    สำหรับการดำเนินการที่เป็นเงื่อนไข โดยทั่วไปเราจะใช้ If – Else statement ซึ่งประกอบด้วย 3 ส่วนคือ
    • เงื่อนไข
    • เกิดอะไรขึ้น ถ้าเงื่อนไขเป็น จริง (If)
    • เกิดอะไรขึ้น ถ้าเงื่อนไขเป็น เท็จ (Else)
    ซึ่งจากตัวอย่างเป็นการตั้งเงื่อนไขแบบสั้น เพื่อแสดงข้อความว่าจะ “Allowed” (อนุญาต) หรือ “Denied” (ไม่อนุญาต) สำหรับคนที่จะเข้า Club ว่าถ้าอายุ 18 ปีขึ้นไปเท่านั้น ถึงจะได้รับอนุญาต

     
  9. Check presence
    ถ้าคุณต้องการตรวจสอบว่า ตัวแปรนั้น ถูกกำหนดค่าบางอย่าง อยู่หรือไม่ ซึ่งการใช้ “if presence” รูปแบบสั้นนี้จะช่วยให้คุณลดขั้นตอนการเขียน Code ลงได้เยอะ เหลือเพียงแค่ขั้นตอนเดียว ตามที่เห็นในตัวอย่าง ซึ่งในที่นี้หมายถึง ค่าตัวแปรของคุณจะต้องเข้าเกณฑ์ทั้งหมดตามนี้ คือ มีการ Defined ค่า, ไม่เป็น empty string (เช่น “Hi”), ไม่เป็น null, มีค่าเป็นตัวเลข (เช่น 99) และไม่เป็นค่า false

     
  10. Check absence
    ต่อเนื่องจากข้อ 9 เลย คือให้คุณทำตรงกันข้าม โดยเพียงแค่ใส่เครื่องหมาย “!” ไว้หน้า myVar นั่นหมายถึง ถ้าคุณใช้ if(!myVar) คุณจะสามารถเช็คได้ว่า ตัวแปร myVar ไม่ถูก defined หรือ empty string หรือ null หรือเป็น false

 

ที่มา: hongkiat.com

 

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

เพิ่มเพื่อน

 

 

 

บทความที่เกี่ยวข้อง

 

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