ตัวแปรและประเภทข้อมูล
วิธีเก็บค่าและรู้จักชนิดข้อมูลพื้นฐานใน JavaScript
ตัวแปรคือ "กล่องเก็บของ"
ตัวแปร (variable) เปรียบเหมือนกล่องที่เรา ติดป้ายชื่อ แล้ว ใส่ของ (ค่า) ไว้ข้างใน เวลาจะใช้ค่านั้น เราแค่เรียกชื่อป้าย
let name = "สมชาย";
console.log(name); // สมชาย
let= คำสั่งสร้างตัวแปรname= ชื่อตัวแปร (ป้าย)"สมชาย"= ค่าที่เก็บ== กำหนดค่า (ไม่ใช่เครื่องหมาย "เท่ากับ" ทางคณิตศาสตร์)
ประกาศตัวแปร 3 แบบ
let age = 25; // เปลี่ยนค่าได้
age = 26; // ✅ ตั้งค่าใหม่ได้
const pi = 3.14; // ค่าคงที่ เปลี่ยนไม่ได้
// pi = 3.15; // ❌ Error!
var old = 1; // ของเก่า ไม่แนะนำ ใช้ let แทน
💡 กฎเท้าความ: ใช้
constเป็นค่าเริ่มต้น ถ้าต้องเปลี่ยนค่าภายหลังค่อยเปลี่ยนเป็นletหลีกเลี่ยงvarทั้งหมด
ตั้งชื่อตัวแปรอย่างไร?
สื่อความหมาย สำคัญที่สุด:
// ✅ ดี
let userAge = 20;
let totalPrice = 1500;
let isLoggedIn = true;
// ❌ ไม่ดี (ไม่รู้ว่าคืออะไร)
let x = 20;
let a = 1500;
let flag = true;
กฎการตั้งชื่อ:
- ใช้ได้: ตัวอักษร, ตัวเลข,
$,_ - ตัวแรกห้ามเป็นตัวเลข
- แนะนำรูปแบบ camelCase:
firstName,totalPrice(ตัวแรกของคำหลังเป็นตัวใหญ่)
ประเภทข้อมูล (Data Types)
JS มีข้อมูลหลายชนิด สำคัญที่ต้องรู้ตอนนี้:
1. String — ข้อความ
let greeting = "สวัสดี";
let name = 'John'; // ใช้ ' ก็ได้
let msg = `ชื่อ ${name}`; // template literal (ใช้ `)
2. Number — ตัวเลข
let age = 25;
let price = 99.50; // ทศนิยมได้
let negative = -10;
3. Boolean — จริง/เท็จ
let isLoggedIn = true;
let hasError = false;
มีแค่ 2 ค่าคือ true และ false
4. null และ undefined — "ว่าง"
let nothing = null; // กำหนดให้เป็นค่าว่างเอง
let notAssigned; // undefined (ยังไม่ได้กำหนดค่า)
5. Array และ Object — ข้อมูลแบบกลุ่ม (เรียนในบทถัดไป)
ตรวจสอบชนิดข้อมูล
ใช้ typeof:
console.log(typeof "hello"); // string
console.log(typeof 42); // number
console.log(typeof true); // boolean
console.log(typeof undefined); // undefined
การแปลงชนิดข้อมูล
บางครั้งต้องแปลงชนิด เช่น รับค่าจากผู้ใช้ (มักเป็น string) แล้วต้องการคำนวณ:
let input = "25";
let num = Number(input); // string → number
console.log(num + 5); // 30
let backToString = String(100); // number → string
⚠️ ถ้านำ string กับตัวเลขมาบวกกัน JS อาจตีความเป็น "ต่อข้อความ":
"3" + 4ได้"34"(ไม่ใช่ 7) — ระวัง!
ลองเขียนเอง
const productName = "กาแฟ";
let quantity = 2;
const pricePerItem = 80;
let total = quantity * pricePerItem;
console.log(`สินค้า: ${productName}`);
console.log(`จำนวน: ${quantity}`);
console.log(`รวมทั้งหมด: ${total} บาท`);
สรุป
| แนวคิด | สรุป |
|---|---|
let | ตัวแปรที่เปลี่ยนค่าได้ |
const | ค่าคงที่ เปลี่ยนไม่ได้ |
typeof | ตรวจสอบชนิดข้อมูล |
| String | ข้อความ ใน ", ', หรือ ` |
| Number | ตัวเลข (ทั้งจำนวนเต็มและทศนิยม) |
| Boolean | true / false |
บทหน้า: เราจะเรียน ตัวดำเนินการ เพื่อคำนวณและเปรียบเทียบค่า 🔢
อ่านจบแล้ว? ทำเครื่องหมายว่าเสร็จเพื่อบันทึกความคืบหน้า
แบบทดสอบ
ตอบให้ครบแล้วกด “ตรวจคำตอบ” เพื่อเช็คความเข้าใจ
1. คำสั่งใดที่แนะนำให้ใช้ประกาศตัวแปรในยุคใหม่?
2. ข้อความที่อยู่ในเครื่องหมายคำพูด เช่น "hello" เป็นข้อมูลชนิดใด?
3. const ต่างจาก let อย่างไร?
กำลังโหลด…