JavaScript 객체 접근 방식: obj.key vs obj["key"] vs obj[key] 차이

✅ 객체의 기본 구조

const obj = {
key : value,
};

• 객체는 기본적으로 키(key)와 값(value)로 이루어져 있음

---

1️⃣ 점 표기법

const obj = {
key : value,
};

console.log(obj.key); // Expected output: "value"

 

• 가장 일반적인 방식
• 정적인 키를 접근할 때 사용
• 문자열이 아니라 실제 키 이름이어야 함

---

2️⃣ 대괄호 표기법 - 문자열

const obj = {
key : value,
};

console.log(obj["key"]); // expected output: "value"

 

• 키 이름을 문자열로 직접 쓸 때 사용
• 키에 공백, 특수문자가 있거나 숫자로 시작할 때도 사용 가능

 

 

const obj = {
"my key": 123
};

console.log(obj["my key"]); //expected output: 123

---

3️⃣대괄호 표기법 - 변수로 동적 접근

const obj = {
myKey : value,
};

const key = "myKey";

console.log(obj[key]); //Expected output: "value"

 

• 키 이름이 변수로 주어질 때 사용
• 어떤 키를 접근할지 동적으로 정해지는 경우 필수

---

❓여기서 동적으로 사용된다는건 뭘까?

1. 정적키 접근

const user = {
name : "apple",
age : 20
};

console.log(obj.name) //항상 name 키를 접근(고정)

 

2. 동적키 접근

const user = {
  name: "apple",
  age: 20,
};

const key = "age";
console.log(user[key]); //expected output: 20

여기서 "age"라는 키는 변수 key에 담겨있다.
즉, 어떤 키를 접근할지 실행 중에 정해지는 것을 동적 접근 이라고 한다.

 

간단한 예시 보기

const input = prompt("보고 싶은 정보 (name 또는 age)");
console.log(user[input]); // 사용자가 입력한 키에 따라 다른 값을 보여줌

name 입력 -> user[name]  -> "apple"
age 입력  -> user[age]   -> 20

---

⚠️ 주의할 점

const obj = {
myKey : value,
};

const key = "myKey";

console.log(obj.key);   //Expected output: undefined
console.log(obj["key"]); //Expected output: undefined
console.log(obj[key]);   //Expected output: "value"