ตัวแปรและฟังก์ชัน

ดีไซเนอร์ทำงานกับสิ่งที่มีชื่อตลอดเวลาอยู่แล้ว ใน Figma คุณอาจสร้าง color token ชื่อ brand-purple แล้วนำไปใช้ซ้ำทุก component เปลี่ยน token เดียว ทุกอย่างอัปเดตตาม ตัวแปรใน JavaScript ทำงานแบบเดียวกัน — คุณตั้งชื่อให้ค่า แล้วใช้ชื่อนั้นทุกที่แทนที่จะพิมพ์ค่าซ้ำๆ

ตัวแปร — กล่องที่มีชื่อ

ตัวแปร (variable) คือกล่องที่มีชื่อสำหรับเก็บค่า มีคีย์เวิร์ดสองคำสำหรับสร้างตัวแปร:

const — ค่าถูกกำหนดครั้งเดียวและไม่มีวันเปลี่ยน (เหมือน color token ที่ล็อกไว้)
let — ค่าสามารถอัปเดตได้ในภายหลัง (เหมือน text layer ที่คุณยังจะแก้ไข)

const brandColor = '#7C3AED'; // จะไม่มีวันเปลี่ยน
let buttonLabel = 'Sign up';  // อาจเปลี่ยนเป็น 'Creating account…'

ใช้ const เป็นค่าเริ่มต้น แล้วหยิบ let มาใช้เฉพาะเมื่อรู้ว่าค่านั้นจะต้องเปลี่ยน

ฟังก์ชัน — การกระทำที่นำกลับมาใช้ซ้ำได้

ฟังก์ชัน (function) คือชุดคำสั่งที่คุณตั้งชื่อให้ เพื่อให้รันชุดคำสั่งนั้นได้ทุกเมื่อที่ต้องการ — เหมือน Figma component ที่ทำงานเมื่อถูก trigger

function greet() {
  var message = 'Hello, ' + name + '!';
  document.querySelector('#output').textContent = message;
}

การเขียนฟังก์ชันยังไม่ได้เป็นการรัน หากต้องการรันจริง คุณต้องเรียกใช้ (call) ฟังก์ชันนั้น โดยพิมพ์ชื่อตามด้วย ():

greet(); // รันคำสั่งทั้งหมดข้างใน greet

คุณเรียกใช้ฟังก์ชันกี่ครั้งก็ได้ นั่นคือหัวใจของตัวเอง — เขียน logic ครั้งเดียว นำไปใช้ซ้ำได้ทุกที่

ลองเลย — ปุ่มทักทาย

ตัวอย่างด้านล่างเก็บชื่อไว้ในตัวแปร กำหนดฟังก์ชัน greet ที่สร้างข้อความโดยใช้ตัวแปรนั้น แล้วเชื่อมต่อฟังก์ชันกับการคลิกปุ่ม กดปุ่มเพื่อดูการทำงานจริง

<button id="runBtn">Say hello</button>
<p id="output">Press the button.</p>

สังเกตว่าฟังก์ชันใช้ตัวแปร name ในการสร้างข้อความ ถ้าคุณเปลี่ยน name เป็น 'world' ทุกครั้งที่เรียก greet() ก็จะพูดว่า 'Hello, world!' โดยอัตโนมัติ — คุณอัปเดตค่าแค่ที่เดียว

สรุป

แนวคิด	ทำหน้าที่อะไร	เทียบกับ Figma
`const`	เก็บค่าที่จะไม่เปลี่ยน	Published color token
`let`	เก็บค่าที่สามารถอัปเดตได้	Editable local override
`function`	รวมคำสั่งไว้ภายใต้ชื่อเดียว	Component ที่มี interaction
เรียก `fn()`	รันคำสั่งภายในฟังก์ชัน	Trigger การทำงานของ component

ข้อผิดพลาดที่นักออกแบบเจอบ่อย

คิดว่า JavaScript “อันตราย” หรือซับซ้อนเกินจะเข้าใจ ทั้งที่แนวคิดพื้นฐานคล้ายกับ Figma variable/component property
มองข้ามว่าการตั้งชื่อตัวแปรที่ดีช่วยให้ developer อ่าน design intent ได้ง่ายขึ้น

มุมมองของ developer

👨‍💻 สิ่งที่ developer เห็นจริง ๆ

Designer เห็น “ปุ่มกดแล้วมีอะไรเกิดขึ้น” แต่ developer เห็น variable ที่เก็บค่า (เหมือน Figma variable) และ function ที่เป็นชุดคำสั่งเรียกซ้ำได้ (เหมือน component ที่เรียกใช้ได้หลายที่)

💡 ตัวอย่างจากของจริง

Figma Variables ที่ใช้กำหนดสี/spacing ข้าม mode (light/dark) ทำงานตามแนวคิดเดียวกับตัวแปรใน JavaScript — ค่าเดียว ใช้ได้หลายที่ เปลี่ยนจุดเดียวกระทบทั้งหมด