DEV Community

alternativeboy
alternativeboy

Posted on

10 1

Var vs Const vs Let มันต่างกันยังไงนะ ?

TL;DR ความแตกต่างของทั้งสามตัวนี้คือ Scope, Declaration, Update แล้วก็ Re-declaration นั้นเอง

เนื้อหา

หลายคนเคยสงสัยไหมว่า เจ้า var, const, let นั้นมันต่างกันยังไงทั้งๆที่จริงแล้วทั้งสามอย่างที่กล่าวมาสามารถใช้ประกาศตัวแปรได้ทั้งนั้น

จริงๆแล้วมันมีที่มาเป็นอย่างงี้ครับ คือในช่วงแรกของ Javascript นั้นการประกาศตัวแปรจะมีแค่ var เท่านั้นแล้ว scope มันเป็น global ทำให้การ implement อะไรต่างๆค่อนข้างที่จำสับสนว่า ตัวแปรที่เรียกใช้นั้นเป็นของ file ที่เรากำลัง implement หรือเป็น file อื่นนั้นเอง

ทำให้ในยุคของ ES6 ได้เพิ่มการประกาศตัวแปรเพิ่มอีก 2 ชนิด คือ const กับ let เจ้าสองตัวนี้เข้าช่วยให้การ development ง่ายขึ้นเพราะ block scope ของทั้งสองตัวนี้เป็น local นั้นเอง แถมการเรียกใช้ก็แบ่งแยกชัดเจน const ใช้สำหรับตัวแปรที่หลังจากที่ initialize ค่าให้แล้วไม่อยากเปลี่ยนแปลงค่าของมันอีก ซึ่งแตกต่างกับ let ที่ เราอยากให้ค่ามันสามารถเปลี่ยนไปได้เรื่อยๆตาม usecase ที่เกิด

คราวนี้หลายๆคนเริ่มสับสนแล้วว่าเราควรที่จะใช้การประกาศตัวแปรแบบไหนดี เดี๋ยวผมจะเอาตารางเปรียบเทียบมาให้ดูนะครับเพิ่อที่จะให้ง่ายต่อการนำไปใช้

Declaration Type Scope Declaration Update value Re-declare
var globally, function Without initialize Yes Yes
const block Need initialize No No
let block Without initialize Yes No

ผมจะอธิบายตารางด้านบนให้นะครับเริิ่มจาก Scope ก่อน

Scope

Scope determines the accessibility (visibility) of variables. หรือก็คือการเข้าถึงของตัวแปรนั้นๆ ว่าสามารถเข้าถึงได้ระดับไหนนั้นเอง

จะประกอบไปด้วย 3 ระดับ

  • Block scope
  • Function scope
  • Global scope

ซึ่งเมื่อก่อน ES6 จะมามันมีแค่ Function scope กับ Global scope เท่านั้น

Declaration

การกำหนดค่าตัวแปรขณะที่ประกาศตัวแปร อย่าง var กับ let ไม่จำเป็นที่จะต้องกำหนดค่าตัวแปรตอนประกาศก็ได้ แต่ว่า const นั้นจำเป็นที่จะต้องกำหนดต่าตัวแปรให้มัน

Update value

ถ้าหากเราอยากเปลี่ยนค่าของตัวแปร เราสามารถใช้ var หรือ let เท่านั้น

Tips

จะสังเกตุได้ว่าแต่ละการประกาศตัวแปรจะมีบางอย่างที่แตกต่างกันขึ้นอยู่กับสถานการ์ที่เราจะนำไปใช้ แต่โดนส่วนตัวแล้วผมอยากแนะนำว่าใช้ const กับ let ดีกว่าเพื่อที่จะหมดปัญหาเรื่อง scope ที่บางทีชื่อตัวแปรของเราอาจจะซ้ำกันได้ทั้งใน file หรือ file อื่นๆ

สามารถพูดคุยกันได้นะครับ บางอย่างผมอาจจะพูดไม่เคลียร์, ไม่เข้าใจ หรืออาจจะผิดพลาดตรงไหนก็ขอโทษด้วยนะครับผม หรืออยากจะเสริมเนื้อหาตรงจุดไหนแชร์มาได้เลยนะครับอยากแลกเปลี่ยนประสบกาณ์กับเพื่อนๆ แล้วเจอกันใหม่ในโพสต์หน้าครับ

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay