เกิดอะไรขึ้นถ้าเราประกาศตัวแปรซ้ำใน JavaScript?

เมื่อประกาศตัวแปรซ้ำ (re-declare) ใน JavaScript ค่าของตัวแปรยังคงเหมือนเดิม ไม่ถูกรีเซ็ตเป็น undefined

ตัวอย่าง

ลองดูตัวอย่าง ที่นี่เราประกาศตัวแปร age:

<html> 
  <body> 
    <script> 
      <!-- 
        var age = 20; 
        var age; 
        if (age > 18) { 
          document.write("Qualifies for driving"); 
        } 
      //--> 
    </script> 
  </body> 
</html>

คำอธิบาย

• var age = 20; — ประกาศและกำหนดค่า
• var age; — ประกาศซ้ำ แต่ ไม่ได้กำหนดค่าใหม่ ค่าเดิม (20) คงอยู่
• พฤติกรรมนี้เกิดจาก Hoisting — การประกาศทั้งสองถูกรวมเป็นหนึ่งเดียวที่ด้านบนของ scope

ข้อแตกต่างกับ let/const (ES6+)

let x = 1; 
let x = 2; // SyntaxError: Identifier 'x' has already been declared

const y = 1; 
const y = 2; // SyntaxError

let และ const ไม่อนุญาตให้ประกาศซ้ำใน scope เดียวกัน — ช่วยป้องกันบั๊กได้ดีกว่า