ชื่อตัวแปร ใน JavaScript
การตั้งชื่อตัวแปรในภาษา JavaScript มีกฎและข้อควรปฏิบัติ (Conventions) ที่สำคัญดังนี้ครับ:
## กฎการตั้งชื่อตัวแปรใน JavaScript
กฎเหล่านี้เป็นสิ่งที่ต้องปฏิบัติตามเพื่อให้โค้ดทำงานได้และไม่เกิดข้อผิดพลาด:
1. **ต้องข ึ้นต้นด้วย:** ตัวอักษร (A-Z, a-z), เครื่องหมายดอลลาร์ (**$**), หรือขีดเส้นใต้ (**\_**).
* **ตัวอย่างที่ถูกต้อง:** `myVariable`, `_total`, `$price`
* **ตัวอย่างที่ผิด:** `1stValue` (ขึ้นต้นด้วยตัวเลข)
2. **สามารถมีได้:** ตัวอักษร, ตัวเลข (0-9), เครื่องหมายดอลลาร์, และขีดเส้นใต้
* **ตัวอย่างที่ถูกต้อง:** `itemCount10`, `user_name`
3. **ห้ามใช้คำสงวน (Reserved Keywords):** คุณไม่สามารถใช้คำที่ JavaScript ใช้สำหรับวัตถุประสงค์เฉพาะ เช่น `for`, `while`, `if`, `else`, `function`, `let`, `const`, `var`, `class`, `return`, ฯลฯ เป็นชื่อตัวแปรได้
4. **JavaScript มีความอ่อนไหวต่อตัวพิมพ์ใหญ่-เล็ก (Case-Sensitive):** นั่นหมายความว่า `myVariable` และ `MyVariable` ถือว่าเป็นตัวแปรคนละตัวกัน
---
## ข้อควรปฏิบัติ (Naming Conventions) ที่แนะนำ
ถึงแม้ว่าจะเป็นชื่อที่ถูกต้องตามกฎไวยากรณ์ แต่เพื่อให้โค้ดอ่านง่ายและเป็นมาตรฐาน ชุมชนนักพัฒนา JavaScript ส่วนใหญ่แนะนำให้ใช้รูปแบบการตั้งชื่อเหล่านี้:
### 1. Camel Case (สำหรับตัวแปรและฟังก์ชัน) 🐫
นี่คือรูปแบบที่ใช้กันมากที่สุดใน JavaScript สำหรับตัวแปรและชื่อฟังก์ชัน:
* เริ่มต้นด้วยตัวอักษรพิมพ์เล็ก
* คำถัดไปทุกคำให้เริ่มต้นด้วยตัวอักษรพิมพ์ใหญ่
| รูปแบบ | ตัวอย่าง | เหตุผล |
| :--- | :--- | :--- |
| **Camel Case** | `firstName`, `calculateTotalPrice`, `isLoggedIn` | **มาตรฐานหลัก:** ทำให้อ่านง่ายเมื่อมีหลายคำต่อกัน และเป็นที่ยอมรับในชุมชน JavaScript |
### 2. Pascal Case (สำหรับคลาส) 📐
ใช้สำหรับตั้งชื่อ **Class** (คลาส) หรือ **Constructor** (ฟังก์ชันสร้างวัตถุ):
* ทุกคำจะขึ้นต้นด้วยตัวอักษรพิมพ์ใหญ่ รวมถึงคำแรกด้วย
| รูปแบบ | ตัวอย่าง | เหตุผล |
| :--- | :--- | :--- |
| **Pascal Case** | `UserModel`, `CarFactory`, `HttpRequest` | **มาตรฐานรอง:** แยกความแตกต่างระหว่างตัวแปร/ฟังก์ชันทั่วไปกับคลาส |
### 3. All Caps (สำหรับค่าคงที่ที่ไม่เปลี่ยนแปลง) 💎
ใช้สำหรับตั้งชื่อค่าคงที่ที่กำหนดไว้และจะไม่เปลี่ยนแปลงตลอดการทำงาน (เช่น ค่าทางคณิตศาสตร์, URL ที่ไม่เปลี่ยน)
* ทุกตัวอักษรเป็นตัวพิมพ์ใหญ่
* คั่นคำด้วยขีดเส้นใต้ (**\_**)
| รูปแบบ | ตัวอย่าง | เหตุผล |
| :--- | :--- | :--- |
| **All Caps** | `MAX_USERS`, `PI`, `API_KEY` | **มาตรฐานรอง:** แสดงให้เห็นอย่างชัดเจนว่าเป็นค่าคงที่ระดับทั่ว (Global Constant) |
---
## สรุปหลักการตั้งชื่อที่ดี
* **เน้นความหมาย:** ชื่อตัวแปรควรสื่อความหมายที่ชัดเจนว่าตัวแปรนั้นเก็บข้อมูลอะไร เช่น แทนที่จะใช้ `x`, ให้ใช้ `studentAge` หรือ `dataCount`
* **หลีกเลี่ยงชื่อตัวย่อที่ไม่ชัดเจน:** อย่าใช้ตัวย่อที่ไม่เป็นที่รู้จักกันโดยทั่วไป เช่น แทนที่จะใช้ `clc`, ให้ใช้ `calculate` หรือ `computation`
* **ใช้รูปแบบที่สอดคล้องกัน:** เลือกใช้ Camel Case เป็นหลักสำหรับตัวแปรและฟังก์ชันทั้งหมดในโปรเจกต์ของคุณ เพื่อให้โค้ดดูเป็นระเบียบและง่ายต่อการบำรุงรักษา
จากประสบการณ์การเรียนรู้และใช้งาน JavaScript ผมพบว่าการตั้งชื่อตัวแปรให้ถูกต้องตามกฎและนิยามที่ชุมชนนักพัฒนาคอนเฟิร์ม จะช่วยลดข้อผิดพลาดและทำให้โค้ดสามารถบำรุงรักษาได้ง่ายขึ้น หลายครั้งที่ผมเห็นนักพัฒนาใหม่ตั้งชื่อตัวแปรแบบไม่สอดคล้องกัน เช่น ใช้ตัวพิมพ์ใหญ่เล็กสลับกัน หรือตั้งชื่อตัวแปรที่ไม่สื่อความหมาย ส่งผลให้เวลาอ่านโค้ดยากและแก้ไขทีหลังสับสน จึงอยากแนะนำให้ใช้ Camel Case กับตัวแปรและฟังก์ชัน เพราะเป็นมาตรฐานที่ยอมรับอย่างกว้างขวางใน JavaScript และช่วยให้ชื่อดูสวยงาม อ่านง่าย เช่น userName หรือ calculateSum การแยกความแตกต่างให้ชัดเจนกับคลาสโดยใช้ Pascal Case อย่างเช่น UserModel ก็เป็นอีกวิธีที่ดี สำหรับค่าคงที่จะต้องเขียนตัวอักษรใหญ่ทั้งหมดและใช้ขีดเส้นใต้ เช่น MAX_SIZE หรือ API_KEY เพื่อแสดงว่านี่คือค่าที่ไม่ควรแก้ไขในโค้ด นอกจากจะช่วยให้โค้ดสะอาดแล้ว การตั้งชื่อที่ดีทำให้ทีมงานทำงานร่วมกันได้รวดเร็วและลดความผิดพลาดจากการเข้าใจผิดเกี่ยวกับข้อมูลที่เก็บในตัวแปรอีกด้วย อีกเรื่องที่ผมพบเวลาทำงานกับตัวแปรใน JavaScript คือการระวังไม่ใช้คำสงวนที่ JavaScript กำหนดไว้ เช่น for, if, function เพราะจะทำให้โค้ดเกิดข้อผิดพลาดทันที สุดท้าย อยากแนะนำให้ตั้งชื่อตัวแปรที่สื่อความหมายดี เพราะช่วยให้เรากลับมาอ่านโค้ดในอนาคตได้เข้าใจอย่างรวดเร็วว่าแต่ละตัวแปรนั้นเก็บข้อมูลอะไรอยู่ เช่น แทนที่จะใช้ x หรือ data1 ควรใช้ studentAge หรือ userCount ที่บอกชัดเจนไปเลยครับ
🥰❤️❤️❤️❤️