การควบคุมเงื่อนไขด้วย If-Else และ Ternary Operator - JavaScript Tutorial

ถ้าโปรแกรมของเราทำงานแค่จากบนลงล่างอย่างเดียว มันก็คงเป็นได้แค่เครื่องคิดเลขโง่ ๆ ครับ แต่ด้วย Control Flow เราจะสามารถสร้างเงื่อนไขให้เว็บไซต์ตอบสนองตามพฤติกรรมผู้ใช้ได้ เช่น "ถ้าผู้ใช้ล็อกอินแล้ว ให้แสดงชื่อสมาชิก แต่ถ้ายังไม่ล็อกอิน ให้แสดงปุ่มสมัคร" เป็นต้น

1. พื้นฐาน If-Else (Classic Logic)

ใน JavaScript เราใช้ if, else if และ else คล้ายกับ Python ครับ แต่สิ่งที่ต่างกันคือเราต้องใช้ วงเล็บ ( )** ครอบเงื่อนไข และใช้ ปีกกา { }** คุมขอบเขตของคำสั่งครับ

const userScore = 85;

if (userScore >= 80) {
    console.log("Grade: A");
} else if (userScore >= 70) {
    console.log("Grade: B");
} else {
    console.log("Grade: F");
}

2. Ternary Operator: การเขียน If-Else บรรทัดเดียว

นี่คือสิ่งที่สาย Web Dev และคนเขียน React ต้องทำให้คล่องครับ! เพราะมันช่วยลดความเยิ่นเย้อของโค้ดลงได้มหาศาล

รูปแบบ: เงื่อนไข ? ทำถ้าเป็นจริง : ทำถ้าเป็นเท็จ

รูปแบบ	ตัวอย่างโค้ด	ผลลัพธ์
แบบเดิม (5 บรรทัด)	`let status; if (isLogin) { status = "Welcome"; } else { status = "Login"; }`	ยาวและอ่านยาก
Ternary (1 บรรทัด)	`const status = isLogin ? "Welcome" : "Login";`	สั้น คลีน และสวยงาม

3. Logical Operators (ตัวช่วยเชื่อมเงื่อนไข)

บางครั้งเรามีเงื่อนไขมากกว่าหนึ่งอย่างที่ต้องเช็กพร้อมกัน:

&& (And): ต้องจริง "ทุกอย่าง" ถึงจะทำงาน
|| (Or): จริง "อย่างใดอย่างหนึ่ง" ก็ทำงานแล้ว
! (Not): กลับค่าจากจริงเป็นเท็จ (เช่น เช็กว่า "ถ้าไม่ว่าง")

const isAdmin = true;
const hasPremium = false;

// ถ้าเป็นแอดมิน หรือ มีพรีเมียม ก็เข้าถึงได้
if (isAdmin || hasPremium) {
    console.log("Access Granted ✅");
}

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

สำหรับสาย SEO: คุณอาจจะใช้ JS เช็กว่าหน้าเว็บนี้มีคำสั่ง Canonical หรือไม่ ถ้าไม่มีให้ใส่เพิ่มเข้าไปโดยอัตโนมัติ เพื่อป้องกันปัญหาเนื้อหาซ้ำ (Duplicate Content)
สำหรับสาย Data: ใช้ในการคัดกรองข้อมูล (Filter) เช่น ถ้าข้อมูลที่ดึงมาจาก API มีค่าเป็น null ให้แสดงข้อความว่า "ไม่พบข้อมูล" แทนที่จะปล่อยให้หน้าเว็บว่างเปล่า

5. Workshop: ระบบตรวจสอบสถานะหน้าเว็บ (SEO Check)

ลองเขียน Script จำลองการเช็กความยาวของ Meta Description ดูครับ:

const metaDescription = "เรียนรู้ JavaScript ตั้งแต่พื้นฐานจนถึงขั้นสูงกับเราที่นี่...";
const descLength = metaDescription.length;

// ใช้ Ternary Operator ในการตัดสินใจ
const seoStatus = descLength > 160 ? "🔴 ยาวเกินไป" : "🟢 กำลังดี";

console.log(`ความยาวคำอธิบาย: ${descLength} ตัวอักษร`);
console.log(`สถานะ SEO: ${seoStatus}`);

สรุป

การใช้งาน If-Else และ Ternary Operator คือหัวใจของการสร้าง Dynamic Website หากคุณฝึกใช้ Ternary Operator จนคล่อง โค้ดของคุณจะดูเป็นมืออาชีพขึ้นมาก และง่ายต่อการนำไปใช้ร่วมกับ Modern Frameworks ในอนาคตครับ

สรุปบทเรียนสำหรับใส่ Description หน้าเว็บ

บทเรียนนี้ครอบคลุมการควบคุมทิศทางโปรแกรมด้วยเงื่อนไข ตั้งแต่การใช้ If-Else รูปแบบมาตรฐาน ไปจนถึงการใช้งาน Ternary Operator ที่ช่วยให้การเขียนโค้ดสั้นและมีประสิทธิภาพมากขึ้น พร้อมตัวอย่างการประยุกต์ใช้ในงาน SEO และ Web Development เพื่อสร้างการตัดสินใจที่ซับซ้อนให้กับเว็บไซต์