# 11 객체 (Object)

객체

관련 있는 정보들을 하나로 묶어 관리하기 위한 자료

 

예를 들어, 어떤 사람 '슈퍼맨' 대한 정보(name, age 등) 여러 개라고 치면 각각 따로 변수로 두는 대신 객체 하나로 두어 묶으면 관리가 편리하다.

---

객체 기본 구조

객체는 중괄호 {}로 만들고, 그 안에 키(key)와 값(value) 쌍으로 구성한다. 

 

다음 코드를 예시를 들어보자

const superman = {
  name: 'clark',
  age: 33,
};

• name과 age는 키(key)
• 'clark'과 33은 값(value)
• 이런 key : value 한 묶음이 프로퍼티(property)라고 한다.

---

객체 접근

객체 값에 접근하는 방법은 대표적으로 2가지가 있다 

 

1. 점 표기법

superman.name // 'clark'
superman.age // 33

 

2. 대괄호 표기법

superman['name'] // 'clark'
superman['age']  // 33

• 대괄호 표기법은 키를 문자열로 넣는다

---

객체 추가/수정/삭제

객체는 만들어진 뒤에 프로퍼티를 추가하거나 수정할 수 있고, 필요시 삭제도 가능하다.

 

추가 / 수정

superman.gender = 'male';     // 추가
superman.age = 34;            // 수정

 

삭제

delete superman.gender;		// 삭제

 

---

in 연산자

내가 작성한 코드가 아니라면 안에 키가 있는지 확인이 필요할 경우가 있다.

그럴 때 사용하는 키워드가 in 연산자이다.

'name' in superman  // true
'height' in superman // false

• 값이 undefined 인지 보다는 키 자체의 존재 여부를 확인하는 용도다라고 보면 될 것 같다.

---

for... in 객체 순회

객체에서 키를 기준으로 순회할 때 for ... in을 사용한다.

 

다음 코드를 함께 살펴보겠습니다.

for (let key in superman) {
  console.log(key);           // name, age ...
  console.log(superman[key]); // 'clark', 33 ...
}

• key 변수에 객체의 프로퍼티 키가 하나씩 들어온다
• 값에 접근하려면 superman [key]처럼 대괄호 표기법을 사용

---

객체 안에 함수 넣기

객체 안에 함수를 넣을 수 있다.

이렇게, 객체에 속해 있는 함수를 '메서드(Method)'라고 한다.

 

const superman = {
  name: 'clark',
  age: 33,
  fly: function () {
    console.log('날아갑니다.');
  }
};

superman.fly(); // 날아갑니다.

• fly는 property인데 값이 함수이므로 메서드라고 부른다.
• 호출은 superman.fly()처럼 점 표기법으로 한다.

또한 메서드는 객체가 가질 수 있는 '동작'을 정의한다.

const user = {
  name: 'Mike',
  sayHello() { // 메소드 단축 구문
    console.log(`Hello, I'm ${this.name}`);
  }
};

---

this 이해

메소드 내부에서 자기 자신의 프로퍼티에 접근할 때 this를 사용한다.

 

만약 this 대신 객체 이름은 user.name 을 직접 쓰면 어떻게 될까?

• 만약 const admin = user; 처럼 객체를 복사한 후 user = null; 처럼 원본을 지워버리면,
  admin.sayHello() 를 실행할 때 user.name 을 찾지 못해 에러가 발생한다.
• 하지만 this를 사용하면 메소드를 호출한 '현재 객체' 를 바라보기 때문에 훨씬 안전하고 유연한 코드가 된다.

주의사항

메소드를 작성할 때 화살표 함수(=>)는 일반 함수와 다르게 동작하므로 주의해야 한다.

1. 일반 함수: 메소드 호출 시 this가 해당 객체를 가르킨다.
2. 화살표 함수: 자신만의 this를 갖지 않는다. 화살표 함수에서 this를 사용하면 그 외부 (전역 객체인 window 또는 global)를 가르키게 된다.

const boy = {
  name: 'Tom',
  showName: () => {
    console.log(this); // 여기서 this는 boy가 아니라 window(전역객체)를 가리킴!
  }
};

객체 메서드는 일반 함수 형태로 사용하는 것을 권장