Short hand JavaScript Techniques you should know in 2021
Short hand JavaScript Techniques you should know in 2021

If Presence

This is one of the common shorthand technique mostly used for
truth, null or undefined checks.

// Longhand
if (x === true) {
// do something
}

// Shorthand
if (x) {
// do something
}

If … else Ternary operator

The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (), then an expression to execute if the condition is truthy followed by a colon (), and finally the expression to execute if the condition is falsy. This operator is frequently used as a shortcut for the statement.

// Longhand
let test: boolean;


Let’s Install Optional Chaining in your project| @thawinwats
Let’s Install Optional Chaining in your project| @thawinwats
Optional Chaining in ES2020 (ES11)

อย่างที่เรารู้กันว่าเจ้าตัว Optional Chaining เนี่ยมันมากับ ES2020 (ES11)
เพราะฉะนั้นใช่ว่า Browser ทุกตัวจะอ่านมันออก

ทีนี้เราลองมา check ดูดีกว่าว่ามี Browser ตัวไหนที่ใช้มันได้บ้าง


Optional Chaining in ES2020 (ES11) |@thawinwats
Optional Chaining in ES2020 (ES11) |@thawinwats
Optional Chaining in ES2020 (ES11)

Optional Chaining หรือ ` ?. ` มันคือ อะไรกัน ?

เรามาลองดูกันนะครับ

ลองจินตนาการถึงการที่เราจะไปดึงค่า `c` จาก Object ต่อไปนี้

const data = { a: { b: { c: 10 } } }

บางทีใน `data` อาจไม่มี `a` อยู่ก็ได้ แม้จะมี `a` อยู่ก็ไม่มีหลักประกันว่า `b` จะมีอยู่เช่นกัน ส่วน `c` นั้นไม่ต้องพูดถึงเลย อยู่ลึกมาก

เพื่อให้เราแสดงผล `c` โดยไม่เกิดข้อผิดพลาด เราจึงต้องตรวจสอบเสียก่อนว่า
ภายใต้ `data` นั้น จะต้องมี `a` อยู่ และใน `a` นั้น จะต้องมี `b` อยู่ และใน `b` จะต้อง มี `c` อยู่

const result = data && data.a && data.a.b && data.a.b.c

เป็นไงครับเราต้อง check กันยาวเลย
มาลองกันดูว่าถ้าเราใช้เจ้า Optional Chaining จะออกมาเป็นยังไง

const result = data?.a?.b?.c // 10

จริงดิ สั้นๆ งี้เลยเอ่อ ? ใช่ครับสั้นๆ งี้เลย

แล้วมันใช้กับการ Chaining แบบ ธรรมดาแบบนี้ได้ไหม ?

ได้เหมือนกันครับผม เราสามารถใช้แบบผสมๆ กันได้อย่างลงตัวเลย

const result = data?.a.b?.c // 10

สามารถอธิบายได้แบบนี้ครับ
มันจะเข้าถึง `a` ได้เฉพาะกรณีที่มี `data` อยู่เท่านั้น และ
จะเข้าถึง `
c`…

Thawinwats

I'm a software engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store