객체란?

객체는 게임 캐릭터에 비유할 수 있다. 사용자들의 캐릭터는 동일하게 직업과 능력을 가지고 있지만 세부적인 내용은 다르다. 누군가는 JavaScript라는 ID와 마법사라는 직업을 가지고 있지만 다른 누군가는 Java라는 ID와 전사라는 직업을 가지고 있다. 마찬가지로 사용자가 회원가입을 할때 때 입력할 항목은 모두 같지만 입력하는 정보는 사용자마다 다르다. 이렇게 각기 다른 값을 가질 수 있지만 입력해야 하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 수 있다.

객체의 특징

1. JavaScript는 객체 기반 언어이며 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체이다.
2. 객체의 속성(property)은 키(key)와 값(value)로 구성되며 속성의 값이 함수일 경우 이를 메소드(method)라 한다. 객체는 속성과 메서드의 집합이다.
3. 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 형식이며 객체를 만들기 위해서는 변수를 선언한 다음 중괄호로 키-값의 속성쌍으로 묶어준다.
4. 객체와 배열의 가장 큰 차이점은 순서 정보의 유무이다. 배열은 요소에 0부터 순차적으로 접근할 수 있지만 객체는 속성에 순서대로 접근하지 않고 key를 통해서 value에 접근한다.

객체 선언

const cat = {
  name: 'coco',
  age: 3,
  sound: 'meow'
};

• 자바스크립트에서 객체는 변수 이름을 선언한 다음 중괄호{ } 안에 key: values 형태로 선언한다.

객체 조회 및 할당

1. 객체 조회

cat.name  // 'coco'
cat['age'];  // 3

cat[key]

• cat[key] 방식은 key에 사용자의 input을 받을때(무엇이 들어올지 모를때) 사용한다.

2. 속성(property) 할당

cat.country = 'america';

cat.age = 10;
console.log(cat.age);  // 10

• 키가 존재하는 경우 다시 할당을 하면 값이 수정된다.

3. 객체 할당

const cat = {
  name: 'coco',
  age: 3,
  sound: 'meow',
  
  color: {
     eyes: 'black',
     body: 'cheese'
  }
};
console.log(cat.color)  // {eyes: 'black', body: 'cheese'}

• 객체 안에 또 다른 객체를 선언할 수 있다.

4. 함수(메서드) 할당

const cat = {
  name: 'coco',
  age: 3,
  sound: 'meow',
  color: {
     eyes: 'black',
     body: 'cheese'
  },
  
  cry: function(){
    console.log(this.sound);
},
  // key-value 쌍이 아닌 다른 방식
  crying() {
  	console.log(this.sound);
  }
};
console.log(cat.cry());  // meow

• 객체 안에 함수를 선언할 수 있다.
• 화살표 함수 사용 시 this가 무엇인지 알지 못하기 때문에 동작하지 않는다. this는 자신이 속해있는 곳을 가리킨다.

객체 순회

const cat = {
  name: 'coco',
  age: 3,
  sound: 'meow',
  color: {
     eyes: 'black',
     body: 'cheese'
  }
};

l
for(let key in cat) {
    let value = cat[key];
console.log(key);  // name, age, sound, color
console.log(value);  // coco, 3, meow, {eyes: 'black', body: 'cheese'}
}

• 배열을 순회하는 유사한 방법인 for of가 존재하지만 객체는 for in을 사용하여 순회를 한다. (배열과 객체 모두 사용 가능)
• cat의 모든 key들이 key 지역 변수에 할당된다.
• 인덱스의 값으로 무엇을 할당하고 반복문이 몇번 돌아야 할지를 자바스크립트 엔진 내부에서 자동으로 결정한다.

객체 삭제

const cat = {
  name: 'coco',
  age: 3,
  sound: 'meow',
  color: {
     eyes: 'black',
     body: 'cheese'
  }
};
delete cat.color;  // true
delete cat['sound'];  // true

console.log(cat);  // {name: 'coco', age: 3}

• delete를 이용해 객체를 삭제하면 true를 반환하고 key, value 쌍을 삭제한다.

Object.keys(), values(), entries()

const cat = {
  name: 'coco',
  age: 3,
  sound: 'meow',
  color: {
     eyes: 'black',
     body: 'cheese'
  }
};

Object.keys(cat);  // ['name', 'age', 'sound', 'color']

• 객체의 key만 담은 배열을 반환한다.

Object.values(cat);  // ['coco', 3, 'meow', {…}]

• 객체의 value만 담은 배열을 반환한다.

Object.entries(cat);  
// ['name', 'coco'], ['age', 3], ['sound', 'meow'], ['color', {…}]

• 객체의 키, 값 쌍을 담은 배열을 반환한다.