Dot Notation เทียบ Bracket Notation ใน JavaScript

ความแตกต่าง

Dot notation และ bracket notation ใช้เข้าถึง object properties ทั้งคู่ Dot notation ใช้บ่อยกว่าเพราะอ่านง่าย เข้าใจง่าย และเขียนสั้นกว่า ความแตกต่างหลักคือ bracket notation อนุญาตให้เข้าถึง properties ผ่านตัวแปรได้

ตัวอย่างโค้ด

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>Document</title> 
  <style> 
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 20px; font-weight: 500; color: blueviolet; }
  </style> 
</head> 
<body> 
  <h1>Dot notation vs Bracket notation in JavaScript</h1> 
  <div class="result"></div> 
  <button class="Btn">CLICK HERE</button> 
  <h3>คลิกที่ปุ่มด้านบนเพื่อเข้าถึง student1 object properties ด้วย dot และ bracket notation</h3> 
  <script> 
    let resEle = document.querySelector(".result"); 
    let BtnEle = document.querySelector(".Btn"); 
    function Student(name, age, standard) { 
      this.name = name; 
      this.age = age; 
      this.standard = standard; 
    } 
    let student1 = new Student("Rohan", 18, 12); 
    BtnEle.addEventListener("click", () => { 
      let str = "name", str1 = "age", str2 = "standard"; 
      resEle.innerHTML ="Using dot notation <br>student1.name = " + student1.name + "<br>"; 
      resEle.innerHTML += "student1.age = " + student1.age + "<br>"; 
      resEle.innerHTML += "student1.standard = " + student1.standard + "<br><br>"; 
      resEle.innerHTML +=" Using bracket notation <br>student1[str] = " + student1[str] +"<br>"; 
      resEle.innerHTML += "student1[str1] = " + student1[str1] + "<br>"; 
      resEle.innerHTML += "student1[str2] = " + student1[str2] + "<br>"; 
    }); 
  </script> 
</body> 
</html>

ผลลัพธ์

เมื่อคลิกปุ่ม 'CLICK HERE':

คำอธิบาย

Dot notation: student1.name - ใช้เมื่อรู้ชื่อ property ล่วงหน้า
Bracket notation: student1[str] - ใช้เมื่อชื่อ property อยู่ในตัวแปร หรือมีอักขระพิเศษ