Variables + Types

เขียนโปรแกรมก็คือการบอกคอมพิวเตอร์ว่า “เก็บค่านี้ไว้ก่อน เดี๋ยวจะใช้” เช่น เก็บอายุ เก็บชื่อ เก็บคะแนน ที่เก็บพวกนี้เรียกว่า variable หรือ ภาษาไทยเรียก ตัวแปร

คิดง่ายๆ ว่า variable คือ กล่องที่มีชื่อ เราตั้งชื่อกล่อง แล้วใส่ของลงไป ตอนต้องการของก็เรียกชื่อกล่องออกมาดู

สร้างตัวแปรใน JS

ใน JS การประกาศตัวแปรใช้ keyword (คำสั่งพิเศษของภาษา) 3 ตัว คือ let, const, var แต่ในงานจริงทุกวันนี้จะใช้แค่ let กับ const เท่านั้น (จะอธิบายเหตุผลของ var ที่ปลายบท)

วิธีเขียนพื้นฐาน

let age = 20
const name = "Top"
const pi = 3.14

ฝั่งซ้ายของ = คือชื่อกล่อง ฝั่งขวาคือของที่ใส่ลงกล่อง อ่านว่า “ให้ตัวแปร age เก็บค่า 20”

JS เป็น dynamic typed

ถ้าเคยเขียน Python มา จะคุ้นกับวิธีเขียนนี้ เพราะ Python ก็ไม่ต้องบอก type ก่อน JS เหมือนกัน ใส่ค่าอะไรก็ได้ JS ตัดสิน type จากค่าที่ใส่เอง เรียกว่า dynamic typed (ภาษาที่ตัดสิน type ตอนรัน)

ลองคลิกค่าด้านล่างดูว่า JS ตัดสินว่ามันเป็น type อะไร

8 types ของ JS

JS มี type ทั้งหมด 8 ตัว แบ่งเป็น primitive 7 ตัว (ค่าธรรมดา) และ object 1 ตัว (โครงสร้างซับซ้อน)

ความต่างที่ต้องรู้ตอนนี้คือ primitive เก็บค่าเดียว เปลี่ยนค่าแล้วได้ของใหม่ ส่วน object เก็บได้หลายค่ารวมกัน และเปลี่ยนข้างในได้

let vs const vs var ใช้อันไหนดี

คำถามแรกที่คนเริ่มเรียน JS มักถามคือ “ใช้อันไหน?” ลองกดปุ่มในแต่ละ keyword ดูว่าเกิดอะไรขึ้นเมื่อพยายามเปลี่ยนค่า

let x = 5

const y = 5

var z = 5

จะเห็นว่า const ห้ามเปลี่ยนค่า ส่วน let และ var เปลี่ยนได้ คำถามคือทำไมต้องห้าม

คำตอบคือ โค้ดที่เปลี่ยนค่าได้น้อย bug ก็น้อยกว่า ถ้าประกาศเป็น const เพื่อนร่วมทีมจะรู้ทันทีว่าค่านี้จะไม่เปลี่ยน อ่านโค้ดง่ายขึ้น ส่วน let เก็บไว้ใช้ตอนที่จำเป็นต้องเปลี่ยนค่าจริงๆ เช่นตัวนับใน loop

null กับ undefined ต่างกันยังไง

ทั้งสองตัวแปลว่า “ไม่มีค่า” เหมือนกัน แล้วต่างกันยังไง

• undefined คือ JS ใส่ให้อัตโนมัติ เช่นประกาศตัวแปรแล้วยังไม่ assign let x ก็ x จะเป็น undefined
• null คือเรา จงใจ ใส่เอง บอกว่า “ตอนนี้ไม่มีค่า เป็นเรื่องปกติ” เช่น let user = null ก่อน login

จำง่ายๆ คือ undefined = JS เป็นคนตั้งให้, null = เราเป็นคนตั้งให้

ตั้งชื่อตัวแปรยังไงดี

• ใช้ camelCase เช่น userName, totalPrice (ไม่ใช่ user_name หรือ UserName)
• ใช้ภาษาอังกฤษ เป็นคำที่บอกความหมาย ไม่ใช่ x, data, foo
• ตัวแปร boolean เริ่มด้วย is/has/can เช่น isLoggedIn, hasError, canEdit
• ห้ามขึ้นต้นด้วยตัวเลข ห้ามมีช่องว่าง ห้ามใช้ keyword ของ JS เช่น let, function

สรุป

• Variable คือกล่องมีชื่อ ใส่ค่าได้
• JS ใช้ const (default), let (เปลี่ยนค่าได้), ห้ามใช้ var
• JS เป็น dynamic typed คือ type ตัดสินจากค่าที่ใส่ ไม่ต้องบอกก่อน
• มี 8 types คือ number, string, boolean, undefined, null, bigint, symbol, object
• typeof null === “object” เป็น bug ของ JS แก้ไม่ได้แล้ว
• null คือจงใจให้ว่าง, undefined คือยังไม่ได้ใส่ค่า

ใน lesson ถัดไปจะเอาตัวแปรมาทำอะไรซักอย่าง โดยเริ่มด้วย operator หรือเครื่องหมายต่างๆ เช่น +, -, ==, === ซึ่งเป็นเครื่องมือพื้นฐานที่สุด และจะได้เจอ กับดักคลาสสิก == กับ === ที่หลายคนตอบไม่ถูก