7 เครื่องหมายใน JavaScript ที่จะช่วยให้คุณเขียนโค๊ดสั้นขึ้น

เพียงการใช้เครื่องหมายไม่กี่ตัวก็สามารถทำให้โค๊ดของเราสั้นลงได้ บางเครื่องหมายยังมีประสิทธิภาพสูงกว่าการเรียกคำสั่งใน JavaScript เพื่อจัดการโดยตรง ในบทความนี้เราจะมารู้จัก7เครื่องหมายที่พื้นฐานแล้วดูเหมือนไม่มีอะไร แต่ความเป็นจริงแอบซ่อนไว้ด้วยพลานุภาพระดับระเบิดปรมาณูเลยทีเดียว

1. ใช้ + แปลงเป็นตัวเลข

อยากแปลง string เป็นตัวเลขอย่างรวดเร็วโดยไม่ต้องใช้ parseInt หรือ parseFloat ใช่ไหม? ลองใส่เครื่องหมายบวกเข้าไปข้างหน้าดูซิ

1const str = '12.11'
2
3console.log(str + 7) // 12.117 << ผิดแล้ว เราไม่ได้จะต่อ string จะบวกต่างหาก
4console.log(parseFloat(str) + 7) // 19.11
5console.log(+str + 7) // 19.11 << สั้นกว่าเลย

2. ใช้ | ตัดตอนทศนิยม

ไม่ต้องง้อ Math.floor เพื่อปัดทศนิยม เพียงคุณใส่ | 0 ทศนิยมของคุณจะหายไปทันที

1Math.floor(12.35) // 12
212.35 | 0 // 12

3. สลับค่าตัวแปรด้วยในอาร์เรย์

ES2015 ทำให้ชีวิตเราง่ายขึ้น ตอนนี้เราสามารถ swap หรือสลับที่ค่าของตัวแปรสองตัวได้โดยอาศัย Array Destructuring

1let a = 1
2let b = 2
3
4;[a, b] = [b, a]
5
6console.log(a) // 2
7console.log(b) // 1

4. ตรวจค่าความจริงอย่างง่าย

ปกติถ้าเราจะตรวจสอบว่าตัวแปรนั้นมีค่าหรือไม่เราอาจต้องใช้ถึงสองเงื่อนไขคือ (var === undefined || var === null) ในการตรวจสอบใช่ไหมครับ แต่เรามีวิธีที่ง่ายกว่านั้น ใส่ไปเลย !! ข้างหน้าตัวแปร จบ!

1let a
2let b = null
3let c = {}
4let d = ''
5let e = 0
6
7console.log(!!a) // false
8console.log(!!b) // false
9console.log(!!c) // true
10console.log(!!d) // false
11// กรณีของ 0 เมื่อแปลงเป็นค่าความจริงจะมีค่าเป็น false
12// ต้องระวังเป็นพิเศษเพราะ 0 ไม่ได้มีความหมายว่าไม่มีค่าเสมอไป
13console.log(!!e) // false

สังเกตนะครับอ็อบเจ็กต์เปล่าๆใส่ !! ไม่ได้ให้ค่า false กลับมานะ เช่นกันถ้าเราเรียก !![] ก็ได้ true เช่นกัน เพราะอาร์เรย์ก็คืออ็อบเจ็กต์

5. ใช้ || กำหนดค่า default

เครื่องหมาย || จะตรวจสอบค่าฝั่งซ้ายก่อน ถ้าค่าฝั่งซ้ายเป็น true จะคืนค่ากลับเป็นค่าฝั่งซ้ายทันที ถ้าไม่ใช่จะทำฝั่งขวา จากตัวอย่างข้างล่างเราใช้ || เพื่อกำหนดค่าตั้งต้นให้ gender ถ้าไม่มีการระบุ gender จะให้เป็นค่า male

1let gender
2
3  // ฝั่งซ้ายมือ gender เป็น undefined ซึ่งเทียบเท่ากับ false
4  // จึงทำฝั่งขวาแทน
5;`My gender is ${gender || 'male'}` // My gender is male

6. ป้องกัน error ด้วย &&

ใน Ruby on Rails เรามีเมธอด try เพื่อพยายามเรียกเมธอดภายใต้อ็อบเจ็กต์ที่

1// ถ้าอ็อบเจ็กต์ person เราเป็น nil หรือไม่มีค่าจะเกิด error เพราะเรียก name จากสิ่งที่ไม่มีค่าไม่ได้
2person.name
3
4// เราจึงต้องเปลี่ยนวิธีเป็น
5// เครื่องหมาย && จะตรวจสอบค่าซ้ายก่อน ถ้าเป็น false จะไม่ทำต่อ
6// เป็นผลให้ถ้า person ไม่มีค่า (เป็น false) ด้วยพลานุภาพของ &&
7// ฝั่งขวาคือ person.name จะไม่ทำ
8person && person.name
9
10// แต่ Ruby on Rails ฉลาดกว่านั้น เราสามารถใช้ try
11// ถ้ามี person จะเรียก name แต่ถ้าไม่มีก็คืนค่ากลับเป็น nil
12person.try(:name)

ใน JavaScript ไม่มี try ครับ เราจึงต้องใช้ && ช่วยป้องกันการเกิด error

1let obj
2let obj2 = { name: 'Nuttavut Thongjor' }
3
4//obj.name // แบบนี้ obj ไม่มีค่าจะเกิด error
5obj && obj.name // undefined
6obj2 && obj2.name // Nuttavut Thongjor

7. ปัดเศษทิ้งอย่างมีประสิทธิภาพด้วย ~~

เหมือน | 0 ที่ใช้แทน Math.floor ในการเขียนโค๊ด JavaScript ที่ต้องการประสิทธิภาพสูงเรานิยมใช้ ~ ที่เป็น bitwise operator เพื่อใช้แทน Math.floor

1console.log(~~10.11) // 10
2console.log(~~-9.55) // -9

หมายเหตุ ข้อ2 และ 7 การใช้ | 0 และ ~~ ผลลัพธ์จะอยู่ในช่วงของ int32 (–2,147,483,648 ถึง 2,147,483,647) รวมถึงบรรดา bitwise operators ทั้งหลายแหล่ด้วยครับ (ขอบคุณคุณ Krit Sriyanuwatkul สำหรับการแจ้งเตือนในจุดนี้)

ถึงเราจะมีสารพัดวิธีลัดในการเขียน JavaScript แต่ผมก็ไม่แนะนำให้เพื่อนๆเอาทุกวิธีไปประยุกต์ใช้นะครับ เราต้องไม่ลืมว่าการเขียนโค๊ดเป็นเรื่องสนุก แต่การกลับมาอ่านโค๊ดอีกครั้งเป็นเรื่องสยอง ฉะนั้นถ้าโค๊ดที่เขียนสัญลักษณ์ที่ใช้มันไม่สื่อความ หรืออ่านยาก ทีมไม่เข้าใจ ก็ควรหลีกเลี่ยงและอย่าไปใช้มันครับ