Fundamentals

1. ตัวแปรคือชื่อที่เก็บค่าไว้ใช้ซ้ำ

ตัวแปร (Variable) คือชื่อที่เราใช้เก็บค่าในโปรแกรม เมื่อโค้ดเจอชื่อตัวแปร ให้อ่านว่า "เอาค่าที่ชื่อนี้เก็บไว้มาใช้" เช่น score เก็บ 0 หรือ userName เก็บ "Ada" ในบทนี้ใช้ค่าพื้นฐานก่อน: number เช่น 0, 10, 100 และ string เช่น "Ada" หรือ "JavaScript"

ตัวแปรคือชื่อที่ช่วยให้เราเรียกใช้ number หรือ string ซ้ำได้ง่ายขึ้น

ขยายภาพแนวคิด

2. เลือกใช้ var, let, const ให้ถูก

JavaScript มีคีย์เวิร์ดสำหรับประกาศตัวแปร 3 แบบ - `const` ใช้เมื่อค่าไม่ควรเปลี่ยนหลังตั้งครั้งแรก - `let` ใช้เมื่อค่านั้นต้อง reassign ภายหลัง - `var` เป็นแบบเก่า ควรหลีกเลี่ยงในโค้ดใหม่ รายละเอียดเรื่อง Block Scope จะเรียนต่อในบทถัดไป ตอนนี้ให้โฟกัสที่การเลือก `const` หรือ `let` ให้ถูกก่อน

• 1) เริ่มจาก const ก่อน
• 2) ถ้าค่าต้องเปลี่ยนภายหลัง ค่อยใช้ let
• 3) หลีกเลี่ยง var เพราะอ่านผลลัพธ์ยากกว่า

3. ประกาศก่อนใช้ และ reassign เฉพาะ let

เขียนโค้ดให้อ่านจากบนลงล่าง: ประกาศตัวแปรก่อน แล้วค่อยนำไปใช้ ถ้าต้องเปลี่ยนค่า ให้ใช้ `let` แล้ว reassign ด้วยชื่อเดิมโดยไม่ต้องใส่ `let` ซ้ำ `const` เปลี่ยนค่าใหม่ไม่ได้หลังจากกำหนดครั้งแรก

// ควรเขียนแบบนี้
const userName = "Ada";
console.log(userName); // "Ada"

let score = 0;
score = 10;
console.log(score); // 10

4. Hoisting คือเหตุผลที่ควรเลี่ยง var

Hoisting คือพฤติกรรมที่ JavaScript จัดการ declaration ก่อนรันโค้ดจริง สำหรับบทนี้จำแค่ข้อเดียว: อย่าใช้ตัวแปรก่อนบรรทัดที่ประกาศ `var` ยอมให้โค้ดบางแบบรันต่อได้ทั้งที่อ่านยาก ส่วน `let` และ `const` ช่วยให้เจอข้อผิดพลาดชัดกว่า

5. ตั้งชื่อให้สื่อความหมาย

ชื่อตัวแปรที่ดีช่วยให้เข้าใจโค้ดโดยไม่ต้องเดา ใช้ camelCase และเลือกชื่อที่บอกว่าค่านั้นคืออะไร

// const — ค่าที่ไม่ควรเปลี่ยน
const MAX_SCORE = 100;
const userName = "Ada";
const courseName = "JavaScript";

// let — ค่าที่เปลี่ยนได้
let score = 0;
let currentLesson = "Variables";

score = 42;
currentLesson = "Block Scope";

console.log(userName); // "Ada"
console.log(courseName); // "JavaScript"
console.log(score); // 42
console.log(MAX_SCORE); // 100
console.log(currentLesson); // "Block Scope"

6. จุดที่ผู้เริ่มต้นมักสับสน

• ใช้ var เพราะเห็นในตัวอย่างเก่า — ควรเปลี่ยนเป็น let หรือ const เสมอ
• ตั้งชื่อตัวแปรสั้นเกินไป เช่น a, b, x ทำให้โค้ดอ่านยากมากเมื่อโปรแกรมใหญ่ขึ้น
• ใช้ตัวแปรก่อนบรรทัดที่ประกาศ ทำให้อ่านโค้ดย้อนกลับไปมาและเกิด bug ง่าย
• ประกาศตัวแปรซ้ำชื่อเดิมใน scope เดียวกันด้วย let/const — จะได้ SyntaxError
• ใช้ const กับค่าที่ต้องเปลี่ยนภายหลัง — ถ้าค่าต้องเปลี่ยนจริง ๆ ให้ใช้ let
• ลืมว่า const ต้องกำหนดค่าตั้งแต่ตอนประกาศ

Lab 1: ประกาศตัวแปรด้วย let

เป้าหมาย: ประกาศตัวแปร let ชื่อ score และกำหนดค่าเป็น 42 จากนั้นแสดงผลในหน้าเว็บ โจทย์: 1. ประกาศตัวแปร let ชื่อ score มีค่าเป็น 42 2. เรียกใช้ console.log(score) เพื่อแสดงผล แนวทาง: พิมพ์ let score = ... แล้วตามด้วย console.log(score)

Lab 2: ใช้ const กับค่าที่ไม่ควรเปลี่ยน

เป้าหมาย: ประกาศค่าคงที่ด้วย const โดยใช้ค่าแบบง่ายเท่านั้น โจทย์: 1. ประกาศ const ชื่อ courseName มีค่าเป็น "JavaScript" 2. ประกาศ const ชื่อ maxScore มีค่าเป็น 100 3. เรียกใช้ console.log(courseName) 4. เรียกใช้ console.log(maxScore) แนวทาง: ใช้ const เมื่อค่าถูกตั้งไว้แล้วไม่ต้อง reassign

Lab 3: เปลี่ยนค่าตัวแปร let ที่เป็น number

เป้าหมาย: ฝึก reassign ตัวแปร let ด้วยค่า number แบบตรงไปตรงมา โจทย์: 1. ประกาศ let ชื่อ score มีค่าเป็น 0 2. แสดงผล score 3. กำหนดค่าใหม่ให้ score เป็น 10 4. แสดงผล score อีกครั้ง แนวทาง: ตอน reassign ให้เขียน score = 10 โดยไม่ต้องมี let ซ้ำ

Lab 4: เปลี่ยนค่าตัวแปร let ที่เป็น string

เป้าหมาย: เห็นว่า let ใช้กับ string ที่ต้องเปลี่ยนค่าได้เช่นกัน โจทย์: 1. ประกาศ let ชื่อ lessonTitle มีค่าเป็น "Variables" 2. แสดงผล lessonTitle 3. กำหนดค่าใหม่ให้ lessonTitle เป็น "Block Scope" 4. แสดงผล lessonTitle อีกครั้ง แนวทาง: ค่าเป็น string ได้ แต่กฎของ let ยังเหมือนเดิม: reassign ได้

Lab 5: เลือก let หรือ const ให้ถูกต้อง

เป้าหมาย: ฝึกตัดสินใจเลือกระหว่าง let กับ const โดยใช้แค่ number และ string โจทย์: เติมคีย์เวิร์ดที่ถูกต้อง (let หรือ const) ในตำแหน่งที่ comment บอกไว้ - courseName ควรเป็น ___ เพราะชื่อคอร์สไม่เปลี่ยน - currentLesson ควรเป็น ___ เพราะจะเปลี่ยนจาก "Variables" เป็น "Block Scope" - maxScore ควรเป็น ___ เพราะคะแนนเต็มไม่เปลี่ยน แนวทาง: ถ้าค่าไม่ควรเปลี่ยน → const ถ้าค่าต้องเปลี่ยน → let

Lab 6: ประกาศหลายตัวแปรและแสดงผลตามลำดับ

เป้าหมาย: ฝึกประกาศหลายตัวแปรด้วย let และ const แล้วแสดงผลตามลำดับที่กำหนด โจทย์: 1. ประกาศ const courseName มีค่าเป็น "JavaScript" 2. ประกาศ let lessonTitle มีค่าเป็น "Variables" 3. ประกาศ const maxScore มีค่าเป็น 100 4. เรียกใช้ console.log(courseName) 5. เรียกใช้ console.log(lessonTitle) 6. เรียกใช้ console.log(maxScore) แนวทาง: Lab นี้ยังไม่ต้องเปลี่ยนค่า แค่เลือก keyword ให้เหมาะและ console.log ให้ตรงลำดับ

Lab 7: เปลี่ยนค่า number และ string หลายตัว

เป้าหมาย: ฝึก reassign ตัวแปร let มากกว่าหนึ่งตัว โดยใช้ number และ string แบบตรง ๆ โจทย์: 1. ประกาศ let score มีค่าเป็น 0 2. ประกาศ let levelName มีค่าเป็น "Start" 3. เปลี่ยน score เป็น 50 4. เปลี่ยน levelName เป็น "Practice" 5. แสดงผล score แล้วตามด้วย levelName แนวทาง: ตอนเปลี่ยนค่า ไม่ต้องเขียน let ซ้ำ ให้เขียนชื่อตัวแปร = ค่าใหม่

Lab 8: แก้ let และ const ที่เลือกผิด

เป้าหมาย: อ่านโค้ดที่ตั้งใจเขียนผิด แล้วแก้ keyword และการ reassign ให้ถูกต้อง โจทย์: 1. courseName ต้องเป็น const เพราะไม่เปลี่ยน 2. currentLesson ต้องเป็น let เพราะจะเปลี่ยนค่า 3. currentLesson ต้องเริ่มที่ "Variables" 4. จากนั้น reassign currentLesson เป็น "Block Scope" 5. แสดงผล courseName แล้วตามด้วย currentLesson แนวทาง: ห้ามเขียน let currentLesson ซ้ำตอนเปลี่ยนค่า ให้เขียน currentLesson = "Block Scope"

Lab 9: Mini challenge รวม let และ const

เป้าหมาย: รวมทุกอย่างในบทนี้ เลือก keyword ให้ถูก ตั้งค่าเริ่มต้น reassign ค่าที่เปลี่ยนได้ และแสดงผลตามลำดับ โจทย์: 1. ประกาศ const studentName มีค่าเป็น "Ada" 2. ประกาศ const courseName มีค่าเป็น "JavaScript" 3. ประกาศ let lessonTitle มีค่าเป็น "Variables" 4. ประกาศ let score มีค่าเป็น 0 5. เปลี่ยน lessonTitle เป็น "Block Scope" 6. เปลี่ยน score เป็น 100 7. แสดงผล studentName, courseName, lessonTitle, score ตามลำดับ แนวทาง: ค่าที่ไม่เปลี่ยนใช้ const ค่าที่ต้องเปลี่ยนใช้ let