Fundamentals
Variables (var, let, const)
อธิบายว่าตัวแปรเก็บค่าไว้ใช้ซ้ำอย่างไร พร้อมแยกแยะความต่างของ const, let และ var และฝึกเลือกคีย์เวิร์ดให้ตรงกับค่าที่ไม่เปลี่ยนกับค่าที่ต้องเปลี่ยน
1) แก้ราคาที่เดียว แต่ต้องตามแก้หลายบรรทัด
ร้านกาแฟร้านหนึ่งมีโปรแกรมพิมพ์ใบเสร็จที่ต้องแสดงราคาลาเต้ซ้ำอยู่หลายบรรทัด ทุกครั้งที่ราคาเปลี่ยน เราต้องตามแก้ทุกบรรทัด และถ้าลืมแก้บรรทัดใดบรรทัดหนึ่ง ใบเสร็จก็จะแสดงราคาไม่ตรงกัน ปัญหาคือค่า 65 ถูกเขียนซ้ำหลายที่โดยไม่มีความหมายร่วมกันเลย ถ้าเราตั้งชื่อให้ค่านั้น แล้วเรียกใช้ชื่อทุกครั้งที่ต้องใช้ ค่าจะถูกแก้จากที่เดียว และทุกบรรทัดอ้างถึงค่าเดียวกันจริง ๆ
เปลี่ยนราคาครั้งต่อไปต้องแก้ทั้งสองบรรทัด ถ้าลืมบรรทัดใดบรรทัดหนึ่ง ผลลัพธ์จะไม่ตรงกัน
ทายก่อน: ถ้าพรุ่งนี้ราคาลาเต้เปลี่ยนจาก 65 เป็น 70 โปรแกรมนี้ต้องแก้กี่บรรทัด และถ้าลืมแก้บรรทัดหนึ่งผลลัพธ์จะเป็นอย่างไร?
2) ตัวแปรคือชื่อที่ผูกกับค่า
ตัวแปร (variable) คือชื่อที่เราใช้แทนค่าในโปรแกรม หลังประกาศแล้ว ทุกที่ที่เขียนชื่อนั้น JavaScript จะอ่านว่า เอาค่าที่ชื่อนี้เก็บไว้มาใช้ การประกาศตัวแปรใช้คีย์เวิร์ดสามตัวคือ `const`, `let` และ `var` ตามด้วยชื่อและค่าเริ่มต้น: - `const courseName = "JavaScript";` — ผูกชื่อ courseName กับข้อความ "JavaScript" - `let score = 0;` — ผูกชื่อ score กับเลข 0 หลักที่ใช้จริงในโค้ดสมัยใหม่คือ เริ่มจาก `const` ก่อน ถ้าค่านั้นต้องเปลี่ยนภายหลังจึงใช้ `let` ส่วน `var` เป็นรูปแบบเก่าที่ควรหลีกเลี่ยง
ตัวแปรคือชื่อที่ช่วยให้เราเรียกใช้ number หรือ string เดิมซ้ำได้โดยไม่ต้องเขียนค่าซ้ำ
3) ประกาศครั้งเดียว ใช้ได้หลายที่
การประกาศคือการสร้างชื่อพร้อมกำหนดค่าเริ่มต้น หลังจากนั้นเราเรียกชื่อเพื่อใช้ค่าได้ทันที และเปลี่ยนค่าได้ถ้าประกาศด้วย `let` - `const` ต้องกำหนดค่าตั้งแต่บรรทัดที่ประกาศ และเปลี่ยนค่าใหม่ไม่ได้ - `let` เปลี่ยนค่าได้ด้วยการกำหนดค่าใหม่ โดยไม่ต้องเขียน `let` ซ้ำ - ชื่อตัวแปรใช้ camelCase เช่น `courseName` หรือ `currentLesson` และควรบอกว่าค่านั้นคืออะไร
ประกาศจากบนลงล่าง แล้วเปลี่ยนค่า score ได้เพราะประกาศด้วย let
4) `const` เปลี่ยนค่าไม่ได้ และ `var` ที่ควรเลี่ยง
ถ้ากำหนดค่าใหม่ให้ตัวแปรที่ประกาศด้วย `const` โปรแกรมจะหยุดด้วยข้อผิดพลาดทันที เพราะ `const` ตั้งใจป้องกันการเปลี่ยนค่าที่ไม่ควรเปลี่ยน ข้อผิดพลาดนี้มีประโยชน์: มันฟ้องตั้งแต่ตอนรันว่ามีที่ไหนแก้ค่าผิด `var` เป็นคีย์เวิร์ดรุ่นเก่าที่ยังเจอในโค้ดเดิม `var` มีพฤติกรรมเรื่องขอบเขต (scope) ที่ทำให้อ่านโค้ดยากและเกิดบั๊กเงียบ ๆ ได้หลายแบบ รายละเอียดเรื่อง scope จะเรียนในบทถัดไป ตอนนี้จำสั้น ๆ ว่า เจอ `var` ให้สงสัยไว้ก่อน แล้วเลือกใช้ `const` หรือ `let` แทน
โปรแกรมจะหยุดทันทีที่บรรทัดที่กำหนดค่าใหม่ และบรรทัดถัดไปไม่ถูกทำ
5) เลือก `const` หรือ `let` ให้ตรงกับความตั้งใจ
ทายก่อน: สองโปรแกรมนี้ โปรแกรมไหนจะทำงานผ่าน และโปรแกรมไหนจะหยุดกลางทาง?
คีย์เวิร์ดต้องตรงกับความตั้งใจ
ประกาศค่าคงที่แต่พยายามเปลี่ยนค่า โปรแกรมจึงหยุดด้วยข้อผิดพลาด
ประกาศด้วย let แล้วเปลี่ยนค่าได้ตามที่ตั้งใจ โดยไม่ต้องมีคีย์เวิร์ดซ้ำ
สามคำถามก่อนเลือกคีย์เวิร์ด
ค่านี้จะถูกเปลี่ยนภายหลังหรือไม่
ถ้าเปลี่ยน → `let`; ถ้าไม่เปลี่ยน → `const`
ชื่อบอกว่าค่านั้นคืออะไรไหม
ใช้ camelCase และตั้งชื่อตามข้อมูล เช่น `courseName` ไม่ใช่ `x`
บรรทัดนี้คือประกาศหรือเปลี่ยนค่า
ประกาศต้องมีคีย์เวิร์ด `const` หรือ `let` ส่วนการเปลี่ยนค่าเขียนแค่ชื่อกับค่าใหม่
Lab 1: ประกาศค่าคงที่ด้วย const
Lab 2: เปลี่ยนค่าด้วย let
Lab 3: ประกาศสองตัวแปรและแสดงตามลำดับ
Lab 4: เติม let หรือ const ตามความตั้งใจ
Lab 5: ซ่อมคีย์เวิร์ดที่ทำให้โปรแกรมหยุด
Lab 6: ใบเสร็จที่ราคาเปลี่ยนได้
Lab 7: ซ่อมคีย์เวิร์ดสองจุดให้ตรงความตั้งใจ
สรุปและก้าวต่อไป
- ตัวแปรคือชื่อที่ผูกกับค่า ใช้ซ้ำได้ทุกที่ และแก้ค่าจากที่เดียว
- `const` สำหรับค่าที่ไม่เปลี่ยน `let` สำหรับค่าที่ต้องเปลี่ยน และเริ่มจาก `const` ก่อนเสมอ
- เปลี่ยนค่าใช้ชื่อเดิมโดยไม่ต้องมีคีย์เวิร์ดซ้ำ และทำได้เฉพาะตัวที่ประกาศด้วย `let`
- `var` เป็นรูปแบบเก่าที่ควรเลี่ยง เพราะอ่านขอบเขตการทำงานได้ยากกว่า
- ก้าวต่อไป: เรียน Block Scope (block-scope) เพื่อเข้าใจว่า `const` และ `let` มองเห็นได้แค่ไหนในแต่ละช่วงของโค้ด