คอร์ส IT พื้นฐาน JavaScript 037_ลิเทอรัล ตัวแปร ค่าคงที่

ลิเทอรัล

ลิเทอรัลคือค่าที่ปรากฏโดยตรงในโค้ด เช่น ตัวเลข สตริง ค่าบูลีน เป็นต้น

• ลิเทอรัลตัวเลข: เช่น 5, 3.14
• ลิเทอรัลสตริง: เช่น 'Hello, World!', "JavaScript"
• ลิเทอรัลบูลีน: true และ false
• ลิเทอรัลออบเจ็กต์: เช่น { key: 'value', age: 25 }
• ลิเทอรัลอาร์เรย์: เช่น [1, 2, 3, 4]

ตัวอย่าง:

1
// ลิเทอรัลตัวเลข
2
var age = 18;
3

4
// ลิเทอรัลสตริง
5
var name = "สมชาย ใจดี";
6

7
// ลิเทอรัลบูลีน
8
var isStudent = true;
9

10
// ลิเทอรัลอาร์เรย์
11
var numbers = [1, 2, 3];
12

13
// ลิเทอรัลออบเจ็กต์
14
var person = {name: "สมชาย ใจดี", age: 18};

ตัวแปร

ตัวแปรคือคอนเทนเนอร์สำหรับจัดเก็บข้อมูล สามารถใช้เพื่อ “จัดเก็บ” ลิเทอรัล ลิเทอรัลที่จัดเก็บในตัวแปรสามารถแก้ไขได้อย่างอิสระ ผ่านตัวแปรสามารถอธิบายลิเทอรัลได้ และตัวแปรสะดวกต่อการแก้ไขมากกว่า ตัวแปรสามารถจัดเก็บค่าประเภทใดก็ได้ (จริงๆ แล้วตัวแปรไม่ได้จัดเก็บค่าใดๆ แต่จัดเก็บที่อยู่หน่วยความจำของค่า) รวมถึงลิเทอรัล ค่าที่ส่งคืนจากตัวแปรอื่นๆ เป็นต้น ใช้คีย์เวิร์ด var, let เพื่อประกาศตัวแปร

• ตัวแปรที่ประกาศด้วยคีย์เวิร์ด var เป็นตัวแปรแบบโกลบอลหรือตัวแปรในฟังก์ชันสโคป สามารถประกาศตัวแปร var ซ้ำได้
• ตัวแปรที่ประกาศด้วยคีย์เวิร์ด let เป็นตัวแปรในบล็อกสโคป ไม่สามารถประกาศตัวแปร let ซ้ำได้

ตัวอย่าง:

1
// ใช้ var เพื่อประกาศ(กำหนด)ตัวแปร
2
var age = 18;
3

4
// ใช้ let เพื่อประกาศ(กำหนด)ตัวแปร
5
let name = "สมชาย ใจดี";
6

7
// ประกาศก่อน กำหนดค่าทีหลัง
8
let name;
9
name = "สมชาย ใจดี";
10

11
// ประกาศตัวแปรหลายตัวในบรรทัดเดียว
12
let age = 18, name = "สมชาย ใจดี";

การตั้งชื่อตัวแปร

ชื่อตัวแปรเป็นรูปแบบหนึ่งของตัวระบุ ชื่อตัวแปรคือชื่อที่ใช้ระบุตำแหน่งหน่วยความจำที่จัดเก็บข้อมูล ตัวระบุคือสัญลักษณ์หรือชื่อที่ใช้ในการตั้งชื่อตัวแปร ฟังก์ชัน คลาส เป็นต้น

กฎการตั้งชื่อ

• ชื่อตัวแปรสามารถใช้ได้เฉพาะตัวอักษร (รวมตัวอักษรที่ไม่ใช่ภาษาอังกฤษ) ตัวเลข ขีดล่าง (_) เครื่องหมายดอลลาร์ ($)
• ตัวอักษรแรกของชื่อตัวแปรต้องไม่เป็นตัวเลข
• ชื่อตัวแปรต้องไม่มีช่องว่างหรือสัญลักษณ์พิเศษอื่นๆ
• ชื่อตัวแปรต้องไม่เหมือนกับคีย์เวิร์ดของ JavaScript

มาตรฐานการตั้งชื่อ

• รูปแบบคาเมลเคส: ตัวอักษรแรกของคำแรกเป็นตัวพิมพ์เล็ก ตัวอักษรแรกของคำอื่นๆ เป็นตัวพิมพ์ใหญ่ ตัวอย่าง: userName, firstName
• รูปแบบพาสคาล(อัปเปอร์คาเมล): ตัวอักษรแรกของทุกคำเป็นตัวพิมพ์ใหญ่ ตัวอย่าง: UserName, FirstName
• รูปแบบขีดล่าง: เชื่อมคำด้วยขีดล่าง ตัวอย่าง: user_name, first_name

ตัวอย่างชื่อตัวแปรที่ถูกต้อง:

1
let userName;
2
let hello123;
3
let age;
4
let $width;
5
let _height;
6
let ชื่อ;

ตัวอย่างชื่อตัวแปรที่ไม่ถูกต้อง:

1
let 123abc; // ขึ้นต้นด้วยตัวเลข
2
let user name; // มีช่องว่าง
3
let $#; // มีอักขระพิเศษ
4
let function; // เหมือนกับคีย์เวิร์ด JavaScript

ค่าคงที่

ค่าคงที่คือค่าที่ไม่สามารถ (หรือไม่ต้องการ) แก้ไขได้ ค่าคงที่สามารถประกาศได้โดยใช้คีย์เวิร์ด const ค่าคงที่สามารถกำหนดค่าได้เพียงครั้งเดียว การกำหนดค่าซ้ำจะทำให้เกิดข้อผิดพลาด แนะนำให้ใช้ตัวอักษรตัวพิมพ์ใหญ่และขีดล่างในการตั้งชื่อค่าคงที่เหล่านี้

ตัวอย่าง:

1
// ใช้ const เพื่อประกาศ(กำหนด)ค่าคงที่
2
const PI = 3.14;
3
const COLOR_RED = "#F00";
4

5
// พยายามแก้ไขค่าคงที่
6
PI = 3.15; // Uncaught TypeError: Assignment to constant variable.