หัวข้อ 2: ชนิดข้อมูล String, Number, Boolean, Array, Object, null, undefined

คำจำกัดความ

ชนิดข้อมูล (Data Type) คือประเภทของค่าที่ JavaScript ใช้ประมวลผล เช่น ข้อความ ตัวเลข ค่าจริงเท็จ รายการข้อมูล และ object

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#458588", "primaryTextColor": "#fbf1c7", "primaryBorderColor": "#fabd2f", "lineColor": "#a89984", "secondaryColor": "#b8bb26", "tertiaryColor": "#d3869b", "background": "#282828", "mainBkg": "#3c3836", "textColor": "#ebdbb2"}}}%%
flowchart LR
  A["JavaScript Values
ค่าข้อมูล"] --> B["Primitive Types
ชนิดพื้นฐาน"]
  A --> C["Reference Types
ชนิดอ้างอิง"]
  B --> D["String, Number, BigInt
ข้อความและตัวเลข"]
  B --> E["Boolean, Symbol
ตรรกะและสัญลักษณ์"]
  B --> F["null, undefined
ค่าว่างและยังไม่กำหนด"]
  C --> G["Array
รายการข้อมูล"]
  C --> H["Object
ข้อมูลแบบ key-value"]

Primitive Types

typeof

typeof ใช้ตรวจสอบชนิดข้อมูล

console.log(typeof "Hello"); // string
console.log(typeof 42); // number
console.log(typeof true); // boolean
console.log(typeof undefined); // undefined
console.log(typeof null); // object (ข้อควรระวังทางประวัติศาสตร์)

String Methods

const course = "Web Programming";

console.log(course.length); // จำนวนตัวอักษร
console.log(course.toUpperCase()); // แปลงเป็นตัวใหญ่
console.log(course.slice(0, 3)); // ตัดข้อความ
console.log(course.split(" ")); // แยกเป็น array
console.log(course.includes("Web")); // ตรวจว่ามีคำนี้ไหม

const week = 4;
console.log(`Week ${week}: ${course}`); // template literal

Number

const ageText = "20";
const priceText = "99.50";

console.log(parseInt(ageText, 10)); // 20
console.log(parseFloat(priceText)); // 99.5
console.log(Number.isNaN(Number("abc"))); // true
console.log(1 / 0); // Infinity

Array

Array คือรายการข้อมูลที่เข้าถึงด้วย index เริ่มจาก 0

const lessons = ["HTML", "CSS", "JavaScript"];

console.log(lessons[0]); // HTML
console.log(lessons.length); // 3

for (const lesson of lessons) {
  console.log(`เรียน: ${lesson}`);
}

Object

Object เก็บข้อมูลแบบ key-value

const user = {
  name: "Ana",
  age: 20,
  active: true
};

console.log(user.name); // Ana
console.log(user["age"]); // 20

สมการจำนวนสมาชิกใน Array

โดยที่ lastIndex คือ index สุดท้ายของ array และ length คือจำนวนสมาชิกทั้งหมดใน array

แบบทดสอบหลังเรียน

1. null และ undefined ต่างกันอย่างไร
2. typeof null ได้ค่าอะไร
3. .split() ใช้ทำอะไร
4. Number.isNaN() ใช้ตรวจอะไร
5. การเข้าถึง object ด้วย . และ [] ต่างกันอย่างไร

กลับสัปดาห์ที่ 4