Babel Coder

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

intermediate

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

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

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

const str = '12.11'

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

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

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

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

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

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

let a = 1;
let b = 2;

[a, b] = [b, a]

console.log(a) // 2
console.log(b) // 1

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

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

let a
let b = null
let c = {}
let d = ''
let e = 0

console.log(!!a) // false
console.log(!!b) // false
console.log(!!c) // true
console.log(!!d) // false
// กรณีของ 0 เมื่อแปลงเป็นค่าความจริงจะมีค่าเป็น false
// ต้องระวังเป็นพิเศษเพราะ 0 ไม่ได้มีความหมายว่าไม่มีค่าเสมอไป
console.log(!!e) // false

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

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

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

let gender

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

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

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

// ถ้าอ็อบเจ็กต์ person เราเป็น nil หรือไม่มีค่าจะเกิด error เพราะเรียก name จากสิ่งที่ไม่มีค่าไม่ได้
person.name

// เราจึงต้องเปลี่ยนวิธีเป็น
// เครื่องหมาย && จะตรวจสอบค่าซ้ายก่อน ถ้าเป็น false จะไม่ทำต่อ
// เป็นผลให้ถ้า person ไม่มีค่า (เป็น false) ด้วยพลานุภาพของ &&
// ฝั่งขวาคือ person.name จะไม่ทำ
person && person.name

// แต่ Ruby on Rails ฉลาดกว่านั้น เราสามารถใช้ try
// ถ้ามี person จะเรียก name แต่ถ้าไม่มีก็คืนค่ากลับเป็น nil
person.try(:name)

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

let obj
let obj2 = { name: 'Nuttavut Thongjor' }

//obj.name // แบบนี้ obj ไม่มีค่าจะเกิด error
obj && obj.name // undefined
obj2 && obj2.name // Nuttavut Thongjor

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

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

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

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

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


แสดงความคิดเห็นของคุณ


No any discussions