Error Handling

SyntaxError คืออะไร

SyntaxError เป็น Error ประเภทหนึ่งที่เกิดเมื่อ JavaScript engine **อ่านโค้ดแล้วเจอ syntax ที่ผิดกฎของภาษา** จุดที่ทำให้ SyntaxError ต่างจาก Error ประเภทอื่นคือ **SyntaxError มักเกิดตอน parsing** — คือตอนที่ JavaScript อ่านและแปลโค้ด ก่อนที่โค้ดจะเริ่มทำงานด้วยซ้ำ คิดง่าย ๆ: ถ้าโค้ด JavaScript เป็นประโยคภาษาอังกฤษ — SyntaxError ก็เหมือนประโยคที่เขียนผิดไวยากรณ์จนอ่านไม่รู้เรื่อง คนอ่าน (JavaScript engine) เลยแปลความหมายไม่ได้ตั้งแต่แรก เมื่อเจอ SyntaxError JavaScript จะ: 1. สร้าง Error object ที่มี `.name` = `"SyntaxError"` 2. แสดง `.message` ที่อธิบายว่าผิด syntax ตรงไหน 3. **หยุดการทำงานของ script ทั้งหมด** — เพราะอ่านโค้ดไม่จบตั้งแต่ต้น ต่างจาก Error ประเภทอื่นที่เกิด**ตอนรัน** (runtime) — SyntaxError เกิด**ก่อนรัน** ทำให้โค้ดทั้งไฟล์ไม่ทำงานเลย

// ❌ โค้ดนี้รันไม่ได้ — SyntaxError เกิดก่อนรัน
console.log("สวัสดี"  // ลืมปิดวงเล็บ )
// SyntaxError: Unexpected end of input
// .name    = "SyntaxError"
// .message = "Unexpected end of input"
// ^ JavaScript อ่านมาถึงท้ายบรรทัดแล้วยังไม่เจอ ) ที่ปิด

• SyntaxError เกิดตอน **parsing** — JavaScript อ่านโค้ดไม่เข้าใจตั้งแต่ก่อนเริ่มรัน
• `.name` = `"SyntaxError"` — บอกว่าเป็น error ประเภท syntax
• เมื่อเกิด SyntaxError — โค้ดทั้ง script หยุดทำงานทันที (ต่างจาก error ประเภทอื่นที่อาจรันต่อได้)
• SyntaxError เกิดได้ทั้งจาก syntax ของภาษา JavaScript และจาก `JSON.parse()`

SyntaxError ที่พบบ่อย

มือใหม่มักเจอ SyntaxError จากความผิดพลาดเล็ก ๆ น้อย ๆ ที่มองข้ามได้ง่าย — มาดูกรณีที่พบบ่อยที่สุดกัน ทุกตัวอย่างด้านล่างนี้**รันไม่ได้** — JavaScript จะแจ้ง SyntaxError ก่อนเริ่มทำงาน พร้อมบอกบรรทัดและตำแหน่งที่เจอปัญหา

// ❌ วงเล็บไม่ปิด — JavaScript มองหา ) ไม่เจอ
console.log("hello"
// SyntaxError: missing ) after argument list

// ✅ แก้ไข: เติม ) ให้ครบ
console.log("hello"); // ทำงานได้ปกติ

// ❌ object ไม่ปิด }
let user = {
  name: "สมชาย",
  age: 25
// SyntaxError: missing } after property list

// ✅ แก้ไข: เติม } ให้ครบ
let user = {
  name: "สมชาย",
  age: 25
}; // ทำงานได้ปกติ

// ❌ string ไม่ปิด — JavaScript มองหา " ตัวปิดไม่เจอ
let greeting = "สวัสดีครับ
// SyntaxError: Invalid or unexpected token

// ✅ แก้ไข: เติม " ปิดให้เรียบร้อย
let greeting = "สวัสดีครับ"; // ทำงานได้ปกติ

// ❌ ใช้ single quote เปิดแต่ใช้ double quote ปิด
let name = 'สมศรี";
// SyntaxError: Invalid or unexpected token

// ✅ ใช้ quote ชนิดเดียวกันทั้งเปิดและปิด
let name = 'สมศรี'; // หรือ "สมศรี"

// ❌ ใช้คำสงวนเป็นชื่อตัวแปร
let for = 5;
// SyntaxError: Unexpected token 'for'

let class = "คณิตศาสตร์";
// SyntaxError: Unexpected token 'class'

// ✅ ใช้ชื่ออื่นที่ไม่ใช่คำสงวน
let count = 5;
let className = "คณิตศาสตร์";

// ❌ array ไม่ปิด ]
let fruits = ["แอปเปิ้ล", "กล้วย", "ส้ม"
// SyntaxError: Unexpected token (หรือ unexpected end)

// ✅ เติม ] ให้ครบ
let fruits = ["แอปเปิ้ล", "กล้วย", "ส้ม"];

// ❌ object ไม่ปิด }
let config = {
  theme: "dark",
  fontSize: 16
// SyntaxError: Unexpected token

// ✅ เติม } ให้ครบ
let config = {
  theme: "dark",
  fontSize: 16
};

• วงเล็บไม่ครบคู่ `()`, `{}`, `[]` — สาเหตุที่พบบ่อยที่สุด
• string ไม่ปิด — เปิด `"` หรือ `'` แล้วลืมปิด
• ใช้ reserved word (`for`, `if`, `class`, `return`, ฯลฯ) เป็นชื่อตัวแปร
• ลืมเครื่องหมาย `,` หรือ `;` ในตำแหน่งที่จำเป็น (หรือใส่เกินมา)
• เวลาลอกโค้ดจากที่อื่น — อาจมีตัวอักษรที่มองไม่เห็นหรือ whitespace ที่ผิดรูปแบบปนมา

SyntaxError กับ JSON.parse

`JSON.parse()` เป็น method ที่ใช้**แปลง JSON string ให้เป็น JavaScript object** — มีประโยชน์เวลารับข้อมูลจาก API หรืออ่านข้อมูลจากไฟล์ **JSON (JavaScript Object Notation)** เป็นรูปแบบข้อความที่ใช้แลกเปลี่ยนข้อมูล — หน้าตาคล้าย JavaScript object แต่**มีกฎที่เข้มงวดกว่า** เมื่อ `JSON.parse()` ได้รับ string ที่ไม่ใช่ JSON ที่ถูกต้อง — มันจะเกิด **SyntaxError** ทันที (เป็น runtime error — เกิดตอนโค้ดรัน ไม่ใช่ตอน parse) กฎสำคัญของ JSON: - **key และ string value ต้องใช้ double quote (`"`) เท่านั้น** — ใช้ single quote (`'`) ไม่ได้ - **ห้ามมี trailing comma** — คือห้ามมี `,` หลัง key-value คู่สุดท้าย - key ต้องอยู่ใน double quote เสมอ (จะละ quote ไม่ได้เหมือน JavaScript object ปกติ)

// JSON ที่ถูกต้อง: ใช้ double quote, ไม่มี trailing comma
const jsonString = '{"name": "John", "age": 30}';

const obj = JSON.parse(jsonString);

console.log(obj);
// output: { name: 'John', age: 30 }

console.log(obj.name); // "John"
console.log(obj.age);  // 30

console.log(typeof obj); // "object"

// ❌ ใช้ single quote ใน JSON — JSON.parse จะเกิด SyntaxError
const badJson1 = "{'name': 'John', 'age': 30}";
JSON.parse(badJson1);
// SyntaxError: Expected property name or '}' in JSON
// .name    = "SyntaxError"
// .message = "Expected property name or '}' in JSON at position 1"

// ❌ มี trailing comma (ลูกน้ำหลัง key-value สุดท้าย)
const badJson2 = '{"name": "John", "age": 30,}';
JSON.parse(badJson2);
// SyntaxError: Unexpected token } in JSON
// .name    = "SyntaxError"
// .message = "Unexpected token } in JSON at position 27"

// ✅ แก้ไข: ใช้ double quote และเอา trailing comma ออก
const goodJson = '{"name": "John", "age": 30}';
const obj = JSON.parse(goodJson);
console.log(obj.name); // "John" — ทำงานได้ปกติ

• JSON ใช้ **double quote (`"`)** เท่านั้น — single quote (`'`) ใช้ไม่ได้
• JSON **ห้ามมี trailing comma** — `{"a": 1,}` ไม่ใช่ JSON ที่ถูกต้อง
• JSON key ต้องอยู่ใน double quote — `{name: "John"}` ใช้ไม่ได้ ต้องเป็น `{"name": "John"}`
• `JSON.parse()` เกิด SyntaxError ตอน runtime — ต่างจาก syntax error ของภาษา JavaScript ที่เกิดตอน parse
• เวลาไม่แน่ใจว่า JSON string ถูกต้องหรือไม่ — ใช้ `JSON.stringify()` สร้าง JSON ให้ (สร้างจาก object ที่ถูกต้องเสมอ)

วิธีป้องกัน SyntaxError

SyntaxError เป็น error ที่ป้องกันได้ — แค่ตรวจสอบโค้ดก่อนรันก็ช่วยลดปัญหาได้มาก นี่คือวิธีปฏิบัติที่ช่วยให้เจอ SyntaxError น้อยลง:

• **เขียนโค้ดทีละส่วนแล้วรันทันที** — อย่าเขียนยาว ๆ ครั้งเดียวแล้วค่อยรัน เพราะจะหาจุดผิดยาก การเขียนทีละ 2-3 บรรทัดแล้วรันบ่อย ๆ ทำให้รู้ทันทีว่าผิดตรงไหน
• **ใช้ editor ที่มี syntax highlighting** — โค้ดที่มีสีช่วยให้เห็นความผิดปกติได้ง่าย เช่น สีของ string ไม่จบ หรือวงเล็บที่ไม่มีคู่ (editor ส่วนใหญ่จะขีดเส้นแดงใต้ syntax ที่ผิด)
• **นับวงเล็บเปิด-ปิดให้ตรงกัน** — ทุก `(` ต้องมี `)`, ทุก `{` ต้องมี `}`, ทุก `[` ต้องมี `]` — editor หลายตัวมีฟีเจอร์ highlight วงเล็บคู่ให้
• **Auto-format โค้ด** — ใช้ Prettier หรือ formatter ในตัว editor จัดรูปแบบโค้ดให้ — ถ้า format ไม่ได้ แสดงว่ามี syntax error
• **สำหรับ JSON — ใช้ `JSON.stringify()` แทนการเขียนมือ** — `JSON.stringify({name: "John"})` จะสร้าง JSON string ที่ถูกต้องให้อัตโนมัติ ไม่ต้องกังวลเรื่อง quote หรือ comma
• **ใช้ JSON validator** — ถ้าต้องเขียน JSON มือ ให้ copy ไปตรวจสอบในเครื่องมือตรวจ JSON online หรือใช้ `JSON.parse()` ทดสอบก่อนใช้จริง
• **อ่าน error message ให้ละเอียด** — SyntaxError มักบอกตำแหน่ง (line, column) ที่เจอปัญหา — ดูบรรทัดนั้นและบรรทัดก่อนหน้า

สรุป — SyntaxError

• **SyntaxError** คือ Error ที่เกิดเมื่อ JavaScript อ่าน syntax ของภาษาไม่เข้าใจ — เกิดตอน **parsing** ก่อนโค้ดจะเริ่มรัน
• **สาเหตุหลัก**: วงเล็บไม่ครบคู่, string ไม่ปิด, ใช้ reserved word ผิดที่, array/object ไม่ปิด, syntax ที่ไม่ถูกต้อง
• **SyntaxError กับ JSON.parse()**: `JSON.parse()` จะเกิด SyntaxError ถ้า JSON string ไม่ถูกต้อง — JSON ต้องใช้ double quote เท่านั้นและห้ามมี trailing comma
• **ป้องกันได้**: เขียนทีละนิดรันบ่อย ๆ, ใช้ editor ที่ดี, ใช้ `JSON.stringify()` แทนการเขียน JSON มือ, อ่าน error message ให้ดี
• SyntaxError **หยุดการทำงานของ script ทั้งหมด** — ต่างจาก Error ประเภทอื่นที่อาจจัดการต่อได้

โจทย์: แก้ไข JSON ที่ไม่ถูกต้อง