การประกาศตัวแปร JavaScript (const, let) และชนิดข้อมูลที่ต้องรู้

ถ้าเปรียบการเขียนโปรแกรมเป็นการปรุงอาหาร ตัวแปร (Variable) ก็คือถ้วยหรือโหลที่เอาไว้ใส่เครื่องปรุงครับ ส่วน ชนิดข้อมูล (Data Types) ก็คือประเภทของเครื่องปรุงนั้น ๆ ว่าเป็นของเหลว ผง หรือก้อน ใน JavaScript การเลือกใช้ "โหล" ให้ถูกประเภทจะช่วยให้ชีวิตการเขียนโค้ดของคุณง่ายขึ้นมหาศาล

1. ลืม var ไปได้เลย! รู้จัก const และ let

ในยุคก่อน เราใช้ var ในการประกาศตัวแปร แต่ปัจจุบัน (และในอนาคตปี 2026) เราจะเหลือตัวเลือกหลัก ๆ แค่ 2 อย่างเพื่อให้โค้ดเราปลอดภัยและไม่อ่านยากครับ

ตารางเปรียบเทียบการเลือกใช้ตัวแปร

ตัวอย่างโค้ด:

const webTitle = "DevHub SEO Tools"; // ห้ามเปลี่ยนชื่อเว็บ
let userScore = 100;

userScore = 150; // ทำได้: เพราะเป็น let
// webTitle = "New Name"; // Error!: เพราะ const ห้ามเปลี่ยนค่า

💡 Pro Tip: กฎเหล็กของโปรแกรมเมอร์ JS คือ "ใช้ const ให้มากที่สุดเท่าที่จะทำได้" ถ้าตัวแปรนั้นไม่จำเป็นต้องเปลี่ยนค่าจริง ๆ ให้ใช้ const ไว้ก่อน เพื่อลดโอกาสเกิด Error โดยไม่ตั้งใจครับ

2. ชนิดข้อมูลพื้นฐาน (Primitive Types)

สำหรับสาย Data และ Web Dev ข้อมูลที่คุณจะเจอ 90% ในชีวิตการทำงานคือ 4 ประเภทนี้ครับ:

1. String (ข้อความ): ใช้เครื่องหมาย "...", '...' หรือที่นิยมที่สุดตอนนี้คือ Backtick (```)
2. Number (ตัวเลข): เป็นได้ทั้งจำนวนเต็มและทศนิยม (ไม่ต้องแยกเหมือน Python)
3. Boolean (ค่าความจริง): มีแค่ true หรือ false
4. Null & Undefined: ค่าว่าง หรือค่าที่ยังไม่ได้กำหนด (สายดึงข้อมูลจาก API ต้องระวังตัวนี้!)

const productName = "SEO Analyzer Pro"; // String
const price = 499.50;                   // Number
const isPremium = true;                  // Boolean
let expiryDate;                          // Undefined (เพราะยังไม่ใส่ค่า)

3. Object & Array: หัวใจของ JSON และ SEO

นี่คือสิ่งที่สาย SEO และ Data ต้องสนใจเป็นพิเศษครับ เพราะมันคือรูปแบบเดียวกับ Structured Data (Schema.org) ที่เราใช้ส่งข้อมูลให้ Google

Array (ข้อมูลแบบรายการ)

ใช้เก็บข้อมูลประเภทเดียวกันเรียงต่อกัน

const keywords = ["SEO", "JavaScript", "Python"];
console.log(keywords[0]); // Output: SEO

Object (ข้อมูลแบบระบุคุณลักษณะ)

ใช้เก็บข้อมูลที่ซับซ้อนในรูปแบบ Key: Value

const pageMetadata = {
    title: "Home Page",
    description: "Welcome to my site",
    wordCount: 1500
};
console.log(pageMetadata.title); // Output: Home Page

4. ทำไมเรื่องนี้ถึงสำคัญกับ SEO และ Data?

• สำหรับสาย SEO: การประกาศตัวแปรประเภท Object คือพื้นฐานของการสร้าง JSON-LD เพื่อทำ Schema Markup ถ้าคุณประกาศ Syntax ผิดแม้แต่นิดเดียว Google จะมองไม่เห็นข้อมูลที่คุณต้องการเน้น
• สำหรับสาย Data: ข้อมูลที่ดึงมาจาก API ส่วนใหญ่จะเป็น Array ของ Object การเข้าใจวิธีเข้าถึงข้อมูล (เช่น data[0].price) จะช่วยให้คุณประมวลผลข้อมูลได้รวดเร็ว

Workshop: ลองสร้าง Metadata ของบทความ

ลองก๊อปปี้โค้ดนี้ไปรันใน Console ของ Chrome ดูครับ:

const articleTitle = "วิธีเรียน JavaScript 2026";
let viewCount = 0;
const tags = ["Education", "Coding", "WebDev"];

// ลองอัปเดตยอดวิว
viewCount += 1;

console.log(`บทความเรื่อง: ${articleTitle}`);
console.log(`ยอดชมปัจจุบัน: ${viewCount} ครั้ง`);
console.log(`แท็กที่เกี่ยวข้อง: ${tags.join(", ")}`);

สรุป

ใน EP 2 นี้ เราได้รู้วิธีการเลือกใช้โถใส่ข้อมูลอย่าง const และ let รวมถึงทำความรู้จักกับเครื่องปรุงประเภทต่าง ๆ โดยเฉพาะ Object และ Array ที่เป็นหัวใจสำคัญของการทำงานร่วมกับข้อมูลบนเว็บไซต์ครับ