วันนี้คุยเรื่องการประกาศตัวแปรใน JavaScript นิดหน่อย
ซึ่งแนะนำว่าให้ประกาศด้วยการใช้ keyword const เป็นค่า default
เหตุผลคืออะไร ?
จึงทำการอธิบายไว้นิดหน่อย
เนื่องจากปกติการประกาศตัวแปรใน JavaScript นั้นทำอย่างไรก็ได้ สายชิว
ยกตัวอย่างเช่น
[gist id="6fe650451902173cc14789a513fd4952" file="1.js"]แต่แนะนำว่าเราควรใช้ strict mode จะดีกว่า
แน่นอนว่า code ที่เขียนไว้พังแน่นอน ดังนี้
[gist id="6fe650451902173cc14789a513fd4952" file="2.js"]ดังนั้นสิ่งที่ต้องทำคือ ประกาศตัวแปรให้ถูกต้อง ซึ่งประกอบไปด้วย
แต่ละแบบนั้นมีขอบเขตการทำงานดังนี้
- 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