กลับไปหน้าบทความ

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

สวัสดีนักพัฒนา JavaScript มือใหม่ทุกคน! ในบทความนี้เราจะมาเรียนรู้เรื่อง ตัวแปร (Variables) และ ประเภทข้อมูล (Data Types) ใน JavaScript กันครับ

📋 เนื้อหา (พื้นฐาน)

  • 🔧 การประกาศตัวแปรใน JavaScript
  • 📊 ประเภทข้อมูลใน JavaScript
  • 🎮 ตัวอย่างการทำงานจริง
  • 🔍 การตรวจสอบประเภทข้อมูล
  • ⚠️ ข้อควรระวังและ Best Practices
  • 🎪 การทดลองเล่นกับตัวแปร

🔧 การประกาศตัวแปรใน JavaScript

ใน JavaScript เรามีวิธีการประกาศตัวแปร 3 แบบหลักๆ คือ:

1. let - แนะนำให้ใช้ในปัจจุบัน

let age = 25;
let name = "สมชาย";
let isStudent = true;

2. const - สำหรับค่าที่ไม่เปลี่ยนแปลง

const PI = 3.14159;
const BIRTH_YEAR = 1998;
const COUNTRY = "ประเทศไทย";

3. var - แบบเก่า (ไม่แนะนำให้ใช้ใหม่)

var oldStyle = "แบบเก่า";

📊 ประเภทข้อมูลใน JavaScript

🔤 Primitive Types (ข้อมูลพื้นฐาน)

String (ข้อความ)

let firstName = "สมชาย";
let lastName = 'ใจดี';
let message = `สวัสดี ${firstName} ${lastName}`;

console.log(message); // สวัสดี สมชาย ใจดี

Number (ตัวเลข)

let age = 25;           // เลขจำนวนเต็ม
let price = 99.99;      // เลขทศนิยม
let temperature = -5;   // เลขติดลบ

console.log(age + price); // 124.99

Boolean (จริง/เท็จ)

let isLoggedIn = true;
let isAdult = false;
let hasPermission = age >= 18;

console.log(hasPermission); // true

Undefined & Null

let undefinedVariable;
console.log(undefinedVariable); // undefined

let emptyValue = null;
console.log(emptyValue); // null

🏗️ Reference Types (ข้อมูลแบบอ้างอิง)

Object (ออบเจกต์)

let person = {
    name: "สมชาย",
    age: 25,
    city: "กรุงเทพฯ"
};

console.log(person.name); // สมชาย

Array (อาร์เรย์)

let fruits = ["แอปเปิ้ล", "กล้วย", "ส้ม"];
let numbers = [1, 2, 3, 4, 5];

console.log(fruits[0]); // แอปเปิ้ล
console.log(fruits.length); // 3

🎮 ตัวอย่างการทำงานจริง

มาลองสร้างโปรแกรมเล็กๆ ที่ใช้ตัวแปรและประเภทข้อมูลกัน!

🎯 โปรแกรมคำนวณเกรดนักเรียน

// ประกาศตัวแปรด้วย const (ค่าคงที่)
const MAX_SCORE = 100;
const PASSING_SCORE = 60;

// ประกาศตัวแปรด้วย let (ค่าที่เปลี่ยนแปลงได้)
let studentName = "นายสมชาย ใจดี";
let score = 85;
let attendance = 95;
let homeworkScore = 90;

// คำนวณเกรด
let finalScore = (score * 0.6) + (attendance * 0.2) + (homeworkScore * 0.2);
let grade;

// กำหนดเกรดตามคะแนน
if (finalScore >= 80) {
    grade = "A";
} else if (finalScore >= 70) {
    grade = "B";
} else if (finalScore >= 60) {
    grade = "C";
} else if (finalScore >= 50) {
    grade = "D";
} else {
    grade = "F";
}

// สร้างออบเจกต์ข้อมูลนักเรียน
let student = {
    name: studentName,
    score: score,
    attendance: attendance,
    homeworkScore: homeworkScore,
    finalScore: finalScore,
    grade: grade,
    passed: finalScore >= PASSING_SCORE
};

🔍 การตรวจสอบประเภทข้อมูล

เราสามารถตรวจสอบประเภทข้อมูลด้วย typeof:

let name = "สมชาย";
let age = 25;
let isStudent = true;
let hobbies = ["อ่านหนังสือ", "เล่นเกม"];
let person = { name: "สมชาย", age: 25 };

console.log(typeof name);        // "string"
console.log(typeof age);         // "number"
console.log(typeof isStudent);   // "boolean"
console.log(typeof hobbies);     // "object"
console.log(typeof person);       // "object"
console.log(typeof undefinedVar); // "undefined"
console.log(typeof null);        // "object" (นี่คือ bug ใน JavaScript!)

⚠️ ข้อควรระวังและ Best Practices

✅ 1. ใช้ const เป็นประเภตถ้าไม่ต้องการเปลี่ยนค่า

// ✅ ดี
const API_URL = "https://api.example.com";
const MAX_ATTEMPTS = 3;

// ❌ ไม่ดี
let API_URL = "https://api.example.com"; // ไม่ได้เปลี่ยนค่าอะไรเลย

✅ 2. ตั้งชื่อตัวแปรให้มีความหมาย

// ✅ ดี
let userAge = 25;
let isLoggedIn = true;
let productList = [];

// ❌ ไม่ดี
let a = 25;
let b = true;
let x = [];

✅ 3. ใช้ camelCase สำหรับชื่อตัวแปร

// ✅ ดี
let firstName = "สมชาย";
let userAge = 25;
let isLoggedIn = true;

// ❌ ไม่ดี
let first_name = "สมชาย";
let userage = 25;
let isloggedin = true;

🎪 การทดลองเล่นกับตัวแปร

ลองทำตามนี้ใน Console ของ Browser หรือ Node.js:

// ทดลองสร้างตัวแปร
let myName = "ชื่อของคุณ";
let myAge = อายุของคุณ; // เปลี่ยนตัวเลขเป็นอายุจริง
let myHobbies = ["งานอดิเรก1", "งานอดิเรก2"];

// สร้างข้อมูลส่วนตัว
let myProfile = {
    name: myName,
    age: myAge,
    hobbies: myHobbies,
    isDeveloper: true
};

// แสดงข้อมูล
console.log("👤 โปรไฟล์ของฉัน");
console.log(myProfile);

🏆 สรุป

ในบทความนี้เราได้เรียนรู้:

  • ✅ การประกาศตัวแปร - let, const, var
  • ✅ ประเภทข้อมูล - Primitive และ Reference Types
  • ✅ ตัวอย่างจริง - โปรแกรมคำนวณเกรด
  • ✅ การตรวจสอบประเภท - typeof
  • ✅ Best Practices - วิธีการเขียนโค้ดที่ดี

ตัวแปรคือหัวใจของการเขียนโปรแกรม! เมื่อเข้าใจแล้ว คุณพร้อมที่จะไปต่อในเรื่อง Functions, Arrays, Objects และอื่นๆ แล้วครับ! 🚀

📝 แบบฝึกหัด

ลองทำแบบฝึกหัดเหล่านี้เพื่อทดสอบความเข้าใจ:

  1. สร้างตัวแปร shoppingCart แบบ Array เก็บรายการสินค้า
  2. สร้างตัวแปร totalPrice คำนวณราคารวม
  3. สร้างตัวแปร userInfo แบบ Object เก็บข้อมูลผู้ใช้
  4. แสดงข้อมูลทั้งหมดใน Console

โชคดีกับการเรียนรู้ JavaScript! 💪