วันนี้คุยเรื่องการประกาศตัวแปรใน JavaScript นิดหน่อย
ซึ่งแนะนำว่าให้ประกาศด้วยการใช้ keyword const เป็นค่า default
เหตุผลคืออะไร ?
จึงทำการอธิบายไว้นิดหน่อย

เนื่องจากปกติการประกาศตัวแปรใน JavaScript นั้นทำอย่างไรก็ได้ สายชิว

ยกตัวอย่างเช่น

แต่แนะนำว่าเราควรใช้ strict mode จะดีกว่า

แน่นอนว่า code ที่เขียนไว้พังแน่นอน ดังนี้

ดังนั้นสิ่งที่ต้องทำคือ ประกาศตัวแปรให้ถูกต้อง ซึ่งประกอบไปด้วย

แต่ละแบบนั้นมีขอบเขตการทำงานดังนี้

  • var มีขอบเขตการทำงานในระดับ function และ global แก้ไขค่าได้ และสามารถอ้างอิงหรือใช้งานก่อนการประกาศได้ !!
  • let มีขอบเขตการทำงานในระดับ block แก้ไขค่าได้ ไม่สามารถอ้างอิงก่อนการประกาศได้
  • const จะมีลักษณะเดียวกับ let แต่ const ไม่สามารถเปลี่ยนแปลงค่าได้ ยกเว้นเป็น object เช่นพวก array/map เป็นต้น สามารถแก้ไขค่าได้ แต่ไม่สามารถ initial ใหม่ได้

ตัวที่แปลกประหลาดกว่าตัวอื่นคือ var

ไม่แนะนำให้ใช้เลย
มาดูตัวอย่างที่มักจะพบเจอคือ


ใช้งานก่อนการประกาศได้ด้วย แต่ค่าที่ได้คือ undefined ซึ่งไม่ error ด้วย !!
แถมตัวแปรที่ประกาศด้วย var คือ i นั้น
สามารถถูกใช้งานนอก for loop ได้อีกด้วย
เนื่องจาก var นั้นจะมีขอบเขตการทำงานในระดับ function นั่นเอง !!
งงดีไหมละ ?
ดังนั้น var ก็ไม่ควรใช้ ถ้าไม่เข้าใจหรือรู้จักมันดีพอ !!
หรืออย่าใช้เลยดีกว่า

ส่วน let นั้นเพิ่มเข้ามาใน ES6

เพื่อแก้ไขความมึนงงของ var และลดขอบเขตการทำงานอยู่ใน block scope เท่านั้น
และไม่สามารถใช้งานก่อนทำการประกาศได้

ส่วน const นั้นก็เพิ่มเข้ามาใน ES6 เหมือนกับ let นั่นเอง

โดยที่ const ย่อมาจาก constant หรือค่าคงที่
แต่ไม่สามารถ reassign ค่าได้เท่านั้นเอง

แต่ความแปลกของ const คือ เราสามารถแก้ไขได้

ถ้าตัวแปรที่ประกาศมี data type เป็น array หรือ object แล้ว
สามารถเข้าไปแก้ไขค่าได้ เช่นการเพิ่มหรือลบ element ต่าง ๆ
เนื่องจาก const จะอ้างอิงตำแหน่งใน memory ของตัวแปรนั้น ๆ เท่านั้น
แต่ถ้าเอาตัวแปรมา reassign ให้กัน จะทำไม่ได้นะ !!
ยกตัวอย่างเช่น

จะสังเกตได้ว่า var นี่ไม่ควรใช้อย่างยิ่ง

ส่วนถ้าให้แนะนำควรใช้ const เป็นค่าเริ่มต้นเลย
เพื่อลดปัญหาหรือ side effect ต่าง ๆ 
ส่วน let ใช้เมื่อจำเป็นเท่านั้น

ไปเจอรูปนี้มา อธิบายได้ชัดเจนและเข้าใจง่ายดี


https://www.freecodecamp.org/news/the-visual-guide-to-javascript-variable-definitions-scope-2717ad9f0169/

Reference Websites