[javascript] 객체 2 / 객체 접근

객체 접근 

---

객체 접근 방법

1. 점 표기법(dot notation)

• 가장 흔히 사용하는 접근 방법
• 키 이름이 유효한 식별자(identifier)이어야 가능
  • 사용 가능 : 문자(A-Z, a-z), _, $로 시작 가능 (ex) name, age, _id, $value ...)
  • 사용 불가 : 공백, 숫자로 시작, 특수문자  (ex) "full name", "123abc", "user-name"..)
• 식별자로 사용할 수 없는 키를 사용할 때는 무조건 대괄호 [] 사용해야 객체 접근 가능
• 장점: 코드 읽기 쉬움
• 단점: 변수로 동적 접근 불가

// [문법 - 값 접근]
객체명.키명

// [문법 - 메서드 호출]
객체명.키명()

console.log(person.name); // "Alice"
person.greet();           // "Hello!"

유효한 식별자가 아닌 경우 사용 불가

const obj = {
  "full name": "Alice Wonderland"
};
// console.log(obj.full name); // ❌ SyntaxError
console.log(obj["full name"]); // ✅

키가 변수일 때 사용 불가

const key = "name";
console.log(person.key); // undefined ❌
console.log(person[key]); // "Alice" ✅

---

2. 대괄호 표기법(bracket notation)

• 키를 문자열로 넣어야 함
• 변수로 키를 지정할 수 있어서 동적 키 접근 가능
• 키에 공백, 특수문자 포함 가능

// [문법 - 값 접근]
객체명["키명"] 
객체명[변수명]

// [문법 - 메서드 호출]
객체명['키명']()
객체명[변수명]()

---

[] 사용 예

1. 키 이름이 동적(변수) 일 때

const key = "name";
const user = { name: "Tom" };

console.log(user[key]); // "Tom"
// user.key는 "name"이 아닌 undefined 반환됨

2. 키 이름에 공백, 숫자 시작, 특수문자가 있을 때

const data = {
  "user name": "Alice",
  "1value": 100,
  "email@domain": "test@example.com"
};

console.log(data["user name"]);     // 가능
console.log(data["1value"]);        // 가능
console.log(data["email@domain"]);  // 가능

// data.user name ← ❌ 문법 오류

 3.객체 속성을 for문 등에서 순회할 때

const obj = { a: 1, b: 2 };

for (const key in obj) {
  console.log(obj[key]); // 동적으로 접근
}

---

3. 중첩 객체 접근

• 객체 안에 객체가 있을 경우, 점 또는 대괄호를 이어서 접근 가능
• 중첩된 객체를 안전하게 접근하려면 옵셔널 체이닝 사용 추천
• 장점 : 구조화된 데이터 접근 가능
• 단점 : 중첩 깊으면 코드가 길어져 가독성 저하

// [문법]
객체명.내부객체명.키명
객체명["내부객체명"]["키명"]

const user = {
  name: "Bob",
  address: {
    city: "Seoul",
    zip: 12345
  }
};

console.log(user.address.city);      // "Seoul"
console.log(user["address"]["zip"]); // 12345

---

4. 옵셔널 체이닝 (Optional Chaining)

• ?.를 사용하면 중첩 객체가 undefined/null일 때 에러 없이 undefined 반환
• ES2020에 추가된 문법으로, 안전하게 접근할 때 필수적
• 옵셔널 체이닝은 왼쪽 값이 null/undefined이면 바로 undefined 반환
• 중첩 객체나 배열이 없을 때도 에러 없이 undefined 반환
• 그렇지 않으면 일반 접근처럼 객체 내부를 계속 조회 
• 장점 : undefined 반환, 에러방지
• 단점 : IE등 구형 브라우저 미지원

// [문법]
객체명?.키명
객체명?.내부객체명?.키명
객체명?.배열명?[인덱스]?.키명

const user = { name: "Charlie" };
console.log(user.address?.city);       // undefined
console.log(user?.address?.city);      // undefined

const data = { users: [] };
console.log(data.users[0]?.name);      // undefined

---

상황에 따라 반환의 차이가 존재

1) 없는 객체의 키를 접근할 때

• 없는 키를 점 표기법이나 대괄호 표기법으로 접근하면 옵셔널체이닝을 사용하지 않아도 undefined 반환
• 에러는 발생하지 x

const person = { name: "Alice" };

console.log(person.age); // undefined
console.log(person["age"]); // undefined

2) 없는 객체 자체를 접근하려고 할 때

• person.address가 undefined인데, 그 안의 city를 접근하려고 하면
• TypeError 발생 → 객체가 없는 상태에서 체인 접근 불가

const person = { name: "Alice" };

console.log(person.address.city);
// ❌ TypeError: Cannot read properties of undefined (reading 'city')

console.log(person.address?.city);
// 옵셔널 체이닝을 사용하여 에러가 아닌 undefined 반환 설정 가능

---

5. 배열과 객체 혼합 (Array + Object)

• 객체 안에 배열, 배열 안에 객체도 접근 가능
• 배열의 인덱스는 숫자이지만, 배열도 객체라 점 표기법과 대괄호 표기법 모두 사용 가능
• 혼합 사용 가능 → 동적 인덱스 접근 가능
• 없는 인덱스 접근 시 undefined

// [문법]
객체명.배열명[인덱스].키명
객체명["배열명"][인덱스]["키명"]

const data = {
  users: [
    { name: "Alice" },
    { name: "Bob" }
  ]
};

console.log(data.users[0].name);      // "Alice"
console.log(data["users"][1]["name"]); // "Bob"

---

6. 동적 키 접근 (Dynamic Key Access)

• 동적으로 키를 만들거나 접근할 때 대괄호 표기법 사용
• 런타임에 키명을 결정할 때 사용
• 템플릿 리터럴과 함께 쓰면 키 이름 동적 생성 가능

// [문법]
객체명[변수명]
객체명[`문자열${변수명}`]

const key = "age";
console.log(person[key]); // 25

const prefix = "full";
const dynamicObj = { [`${prefix}Name`]: "Alice Wonderland" };
console.log(dynamicObj.fullName); // "Alice Wonderland"