⏱️ ~11 นาที

ตัวแปรและประเภทข้อมูล

วิธีเก็บค่าและรู้จักชนิดข้อมูลพื้นฐานใน 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ตัวเลข (ทั้งจำนวนเต็มและทศนิยม)
Booleantrue / false

บทหน้า: เราจะเรียน ตัวดำเนินการ เพื่อคำนวณและเปรียบเทียบค่า 🔢

อ่านจบแล้ว? ทำเครื่องหมายว่าเสร็จเพื่อบันทึกความคืบหน้า

🧠

แบบทดสอบ

ตอบให้ครบแล้วกด “ตรวจคำตอบ” เพื่อเช็คความเข้าใจ

  1. 1. คำสั่งใดที่แนะนำให้ใช้ประกาศตัวแปรในยุคใหม่?

  2. 2. ข้อความที่อยู่ในเครื่องหมายคำพูด เช่น "hello" เป็นข้อมูลชนิดใด?

  3. 3. const ต่างจาก let อย่างไร?

กำลังโหลด…