ชื่อตัวแปร ใน JavaScript

#พื้นฐานการเขียนเว็ปไซต์

#variable #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 เป็นหลักสำหรับตัวแปรและฟังก์ชันทั้งหมดในโปรเจกต์ของคุณ เพื่อให้โค้ดดูเป็นระเบียบและง่ายต่อการบำรุงรักษา