JavaScript พื้นฐาน EP. 2: ตัวแปรและชนิดข้อมูล

JavaScript

บทเรียนตอนที่ 2 ของซีรีส์ JavaScript คืออะไร? เริ่มต้นเขียนโปรแกรม เรียนรู้การประกาศตัวแปรด้วย let และ const ชนิดข้อมูลพื้นฐาน การตรวจสอบชนิดข้อมูล และการแปลงค่าพร้อมตัวอย่างที่นำไปทดลองได้จริง

EP. 2: รู้จักตัวแปรและชนิดข้อมูล

1. ตัวแปรคืออะไร?

let userName = 'Mali';
let age = 12;
const siteName = 'LevelLance';

console.log(userName);
console.log(age);
console.log(siteName);

userName = 'Nina';
age = 13;

console.log(userName);
console.log(age);

ความแตกต่างระหว่าง let และ const

2. ตั้งชื่อตัวแปรอย่างไรให้ถูกต้อง?

• ชื่อตัวแปรสามารถใช้ตัวอักษร ตัวเลข เครื่องหมายขีดล่าง (_) และเครื่องหมายดอลลาร์ ($) ได้ตามกฎของภาษา
• ชื่อตัวแปรไม่สามารถเริ่มต้นด้วยตัวเลขได้
• ห้ามใช้คำสงวนของภาษาเป็นชื่อตัวแปร เช่น const, let หรือ return
• นิยมใช้ camelCase เช่น firstName, productPrice และ totalAmount
• ควรเลือกชื่อที่บอกความหมาย แทนชื่อกว้าง ๆ เช่น x หรือ data เมื่อมีชื่อที่ชัดเจนกว่า

const firstName = 'Mali';
const productPrice = 125;
let totalAmount = 0;

 totalAmount = productPrice * 2;

console.log(firstName);
console.log(totalAmount);

3. ชนิดข้อมูลพื้นฐานใน JavaScript

const name = 'Mali';
const score = 95;
const isPassed = true;
let result;
const emptyValue = null;
const largeNumber = 12345678901234567890n;
const uniqueId = Symbol('id');
const student = { name: 'Mali', score: 95 };
const colors = ['แดง', 'น้ำเงิน', 'เขียว'];

console.log(typeof name);
console.log(typeof score);
console.log(typeof isPassed);
console.log(typeof result);
console.log(typeof emptyValue);
console.log(typeof largeNumber);
console.log(typeof uniqueId);
console.log(typeof student);
console.log(Array.isArray(colors));

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

const values = ['Hello', 42, false, undefined, { id: 1 }, [1, 2, 3]];

for (const value of values) {
    console.log(typeof value);
}

const items = [10, 20, 30];
console.log(Array.isArray(items));
console.log(Array.isArray({ length: 3 }));

const value = null;
console.log(value === null);

5. การแปลงชนิดข้อมูล

const textNumber = '20';
const numberValue = Number(textNumber);

console.log(textNumber + 5);
console.log(numberValue + 5);

console.log(Number('12.5'));
console.log(Number('hello'));
console.log(String(100));
console.log(Boolean(1));
console.log(Boolean(0));

function parseScore(input) {
    const score = Number(input);

    if (input.trim() === '' || Number.isNaN(score)) {
        return 'กรุณากรอกตัวเลขที่ถูกต้อง';
    }

    if (score < 0 || score > 100) {
        return 'คะแนนต้องอยู่ระหว่าง 0 ถึง 100';
    }

    return `คะแนนของคุณคือ ${score}`;
}

console.log(parseScore('85'));
console.log(parseScore('abc'));
console.log(parseScore('120'));

6. การคำนวณด้วยตัวแปร

const productPrice = 250;
const quantity = 3;
const discountRate = 0.10;

const subtotal = productPrice * quantity;
const discount = subtotal * discountRate;
const total = subtotal - discount;

console.log('ราคาก่อนลด:', subtotal);
console.log('ส่วนลด:', discount);
console.log('ราคาสุทธิ:', total);

7. แบบฝึกหัดท้ายบท

โจทย์ที่ 1: ประกาศตัวแปร

โจทย์ที่ 2: ตรวจสอบชนิดข้อมูล

โจทย์ที่ 3: แปลงข้อความเป็นตัวเลข

เฉลยตัวอย่าง

const studentName = 'Mali';
let score = 80;
score = 90;
console.log(studentName, score);

const price = 199.5;
const isAvailable = true;
console.log(typeof price);
console.log(typeof isAvailable);

const quantityText = '4';
const quantity = Number(quantityText);
const unitPrice = 35;
const totalPrice = quantity * unitPrice;
console.log(totalPrice);

สรุปท้ายบท