[JavaScript] Object(객체) 란?

객체 란?

1. 객체의 정의
   - 다수의 원시 자료형을 포함하거나 복잡한 개체를 표현할 수 있는 자료형입니다.
   - new Object 또는 {}(중괄호)를 통해 생성합니다.

2. 객체의 특징
   - key-value 형태로 표현하며, 콤마로 객체 내부의 속성들을 구분합니다.
   - Object.key 혹은 Object[key]를 통해 객체 속성에 접근합니다.
   - key는 속성명으로 자동으로 문자열로 변환되기 때문에, 기본적으로는 따옴표를 사용할 필요가 없습니다. 단, 띄어쓰기 혹은 기호가 들어갈 경우에는 반드시 따옴표로 감싸줘야 합니다.
   - value는 속성값으로 모든 형식의 값이 들어올 수 있습니다.
   - 객체 내부에 함수를 정의할 경우에는 속성값이라 하지않고 메서드(method)라고 부릅니다.
   
   

객체 속성에 접근하기

const me = {
  "name": "Chloe Min", // 1번) 띄어쓰기나 기호가 없을때는 따옴표 유무가 상관없지만
  age: 28,
  "first name": "chloe", // 2번) 띄어쓰기나
  "last-name": "min", // 3번) 기호가 들어갈 경우에는 반드시 따옴표로 감싸줘야한다.
};

// 4번) value값에는 2가지 방법으로 접근할 수 있다
console.log(me.name);
console.log(me["age"]);

// 5번) 단, 띄어쓰기나 기호가 들어갈 경우에는, 다음과 같이만 접근할 수 있다
console.log(me["first name"]);
console.log(me["last-name"]);

console.log(typeof me); // object

객체 속성 추가, 수정, 삭제

1. 속성이 들어있는 객체 예시

const me = {
  firstname: "chloe",
  age: 28,
};

// 1번) 추가
me.lastname = "min";

// 2번) 수정
me.firstname = "CHLOE";

// 3번) 삭제
delete me.name; // 단, 객체 안의 속성은 삭제 가능하지만,
delete me; // 객체 자체를 삭제하는 것은 불가능합니다.

2. 빈 객체 예시

const me = {}; // 1번) 빈 객체의 경우에도

me.name = "chloemin"; // 2번) key-value 값을 넣어줄 수 있다.

객체 비교

• 객체를 비교할때는 메모리주소를 비교합니다. 즉, 안에 담긴 key-value값이 같아도 메모리주소가 다르기 때문에, 같지 않다고 판단합니다.
• 단, 객체 안의 속성값은 값 자체를 비교합니다.

const check1 = {
  name: "chloe",
  age: 28,
  location: "korea"
};

const check2 = {
  name: "chloe",
  age: 28,
  location: "korea"
};

console.log(check1 === check2); // false // 1번) 객체 자체를 비교할때는 메모리주소를 비교. 안에 담긴 값이 같아도 메모리주소가 다르다.
console.log(check1.name === check2.name); // true // 2번) 단, 객체 안의 값은 값자체로 비교한다.

객체 -> 배열 (Object -> Array)

1. key 가져오기: Object.keys(객체)

const me = {
  name: "chloe",
  age: 28,
  location: "korea"
};

console.log(Object.keys(me)); // [ 'name', 'age', 'location' ]

console.log(Object.keys(me)[0]); // name

2. value 가져오기: Object.values(객체)

const me = {
  name: "chloe",
  age: 28,
  location: "korea"
};

console.log(Object.values(me)); // [ 'chloe', 28, 'korea' ]

console.log(Object.values(me)[0]); // chloe

3. key, value 모두 가져오기: Object.entries(객체)

const me = {
  name: "chloe",
  age: 28,
  location: "korea"
};

console.log(Object.entries(me)); // [ [ 'name', 'chloe' ], [ 'age', 28 ], [ 'location', 'korea' ] ]

console.log(Object.entries(me)[0]); // [ 'name', 'chloe' ]

spread 연산자 (얕은 객체 복사) 수정, 추가

const me = {
  name: 'chloe',
  age: 28
};

// 1번) 수정
const changeName = { ...me, name: 'CHLOE' };
console.log(changeName); // { name: 'CHLOE', age: 28 }

// 2번) 추가
const addGender = { ...me, gender: 'female' };
console.log(addGender); // { name: 'chloe', age: 28, gender: 'female' }

key 존재 유무 확인하기

1. propertyName

const me = {
  name: 'chloe',
  age: 28
};

console.log('name' in me); // true
console.log('gender' in me); // false

2. hasOwnProperty

const me = {
  name: 'chloe',
  age: 28
};

console.log(me.hasOwnProperty('name')); // true
console.log(me.hasOwnProperty('gender')); // false

메서드(method)

• 객체 내부에 함수를 정의할 경우에는 속성값이라 하지않고 메서드(method)라고 부릅니다.

const myVoca = {
  name: 'chloe',
  addVoca(word, mean) {
    this[word] = mean; // 1번) this를 넣거나
  },
  deleteVoca(word) {
    delete this[word];
  },
  printVoca(word) {
    console.log(`${word}의 뜻은 ${this[word]}입니다.`); // 2번) this를 사용하고 싶을때는
  },
  myInfo() { // this를 사용할 때는 화살표 함수 X
    console.log(this.name);
  },
};

// addVoca 메서드
myVoca.addVoca('parameter', '매개변수');
myVoca.addVoca('element', '요소');
myVoca.addVoca('property', '속성');
console.log(myVoca);

// deleteVoca 메서드
myVoca.deleteVoca('parameter');
myVoca.deleteVoca('element');
console.log(myVoca);

// printVoca 메서드
myVoca.printVoca('property'); // property의 뜻은 속성입니다.

myVoca.myInfo(); // chloe

객체 속성 자동 정렬

• 객체는 정수형 프로퍼티 네임을 오름차순으로 먼저 정렬하고, 나머지 프로퍼티들은 추가한 순서대로 정렬하는 특징이 있습니다.

const myObject = {
  '3': '정수3',
  name: '김무명',
  '1': '정수1',
  birthDay: '2017.5.17',
  '2': '정수2',
};

for (const key in myObject) { // 주의!
  console.log(key); // 결과가 1 2 3 name birthDay 순으로 출력된다
};

console.log(myObject);
/* {
  '1': '정수1',
  '2': '정수2',
  '3': '정수3',
  name: '김무명',
  birthDay: '2017.5.17'
} */