객체

• 다양한 데이터와 기능을 담을 수 있는 컨테이너
• 키-값의 쌍으로 이루어진 프로퍼티(property)를 가질 수 있다.
• 프로퍼티는 각각 문자열로 된 이름으로 접근할 수 있다.
• 객체는 중첩되어 구성될 수 있으며, 객체 내부에 함수를 포함할 수도 있다.(메서드)

객체선언

let person = { // person 객체 선언
  name: 'Kim', // name->키, 'Kim'->값
  age: 20, // age->키, 20->값
  city: 'Seoul' // city->키, 'Seoul'->값
};

---

객체의 값을 사용하는 방법

1. 점 표기법(Dot notation)

let person = {
  name: 'Kim',
  age: 20,
  city: 'Seoul'
};

person.name; // 'Kim'
person.age; // 20

1-1. 객체의 값 변경

let person = {
  name: 'Kim',
  age: 20,
  city: 'Seoul'
};

person.name = 'Lee';
person.age = 35;

결과

person = {
  name: 'Lee',
  age: 35,
  city: 'Seoul'
};

1-2. 객체의 키 삭제(delete)

let person = {
  name: 'Kim',
  age: 20,
  city: 'Seoul'
};

delete person.city;

결과

person = {
  name: 'Kim',
  age: 20
};

1-3. 객체의 키 추가

let person = {
  name: 'Kim',
  age: 20,
  city: 'Seoul'
};

person.birthday = '12/12';

결과

person = {
  name: 'Kim',
  age: 20
  city: 'Seoul'
  birthday: '12/12'
};

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

let person = {
  name: 'Kim',
  age: 20,
  city: 'Seoul'
};

person['name']; // 'Kim'
person['age']; // 20

2-1. 객체의 값 변경

let person = {
  name: 'Kim',
  age: 20,
  city: 'Seoul'
};

person['name'] = 'Lee';
person['age'] = 35;

결과

person = {
  name: 'Lee',
  age: 35,
  city: 'Seoul'
};

2-2. 객체의 키 삭제(delete)

let person = {
  name: 'Kim',
  age: 20,
  city: 'Seoul'
};

delete person[city];

결과

person = {
  name: 'Kim',
  age: 20
};

2-3. 객체의 키 추가

let person = {
  name: 'Kim',
  age: 20,
  city: 'Seoul'
};

person['birthday'] = '12/12';

결과

person = {
  name: 'Kim',
  age: 20
  city: 'Seoul'
  birthday: '12/12'
};

---

점 표기법과 대괄호 표기법의 차이

1. 대괄호 표기법은 점 표기법이 할 수 있는 모든 기능을 수행할 수 있다.
2. 점 표기법은 객체의 프로퍼티 이름이 정적이고 유효한 자바스크립트 식별자인 경우에 사용한다.
3. 점 표기법으로는 객체의 프로퍼티 이름이 동적인 경우나 유효한 자바스크립트 식별자가 아닌 경우에는 프로퍼티에 접근할 수 없다.

let person = {
  'front name': 'Kim',
  age: 20,
  city: 'Seoul'
};

let key = 'age';

// 키 이름이 문자열로 한칸 띄어져있는 특수한 경우
person.front name // 에러
person.'front name' // 에러
person['front name'] // 'Kim'

// 변수를 사용하여 키 값을 찾는 경우
person.key // undefined
person[key] // 20 

📌 대괄호 표기법으로 모든 기능을 수행할 수 있다면 점 표기법을 사용하는 이유는 무엇인가?

💡 객체의 프로퍼티 이름이 정적이고 유효한 자바스크립트 식별자인 경우에는 점 표기법을 사용하는 것이 코드의 가독성과 유지보수성을 높일 수 있다.