[JS] Object 객체

object(객체)는 기본적으로 key와 key value로 이루어져 있다.
그리고 객체의 가장 큰 특징은 아무래도 중괄호 '{ }'가 아닐까 싶다.

나중에 작성할 Array(배열)에서는 대괄호 '[ ]'를 사용하기 때문에 이게 객체인지 배열인지 헷갈린다면
괄호가 어떤 모양이고 어떤식으로 생겨먹었는지를 알면 구분하기 쉽다.

이 구분법은 후술하는것으로 하고... 이번 글에서는 객체에 대한 내용을 정리해 보았다.

Object (객체)

let person = {
    name : '홍길동',
    age : 20,
    gender : '남자'
}

음 처음 봤을때 느낀건 상품 정보가 들어간 느낌이랄까?
제목 : 내용 이런식으로 구조화 되어 있어서 깔끔하고 한눈에 보기 편하다~라는 느낌이 컸다.

1. 접근 방법은?

person.name; // 홍길동
person.age; // 20
person.gender; // 남자

변수명.키 형태로 접근할 수 있다.
항상 올바른 변수명과 키를 적었는지 확인 필수! (이를 방지하기 위해 가급적 복붙을 하는게 좋다❗️)

위 내용까지는 기본적인 객체에 대한 내용이며 이제부터는 객체를 요리할 수 있는 방법에 대해 알아보자.

💡 객체를 병합하고 싶어!

let person1 = {
    name : '홍길동',
    age : 20,
}

let person2 = {
    gender : '남자'
}

위와 같은 2개의 객체가 있다고 치자.
person1은 name과 age가, person2는 gender를 갖고 있다.

여기서 name,age,gender를 병합하고 싶다면 ...이라는 스프레드 오퍼레이터(spread operator) 를 사용해주면 된다.

let perfectMan = {...person1, ...person2};
console.log(perfectMan); // { name: '홍길동', age: 20, gender: '남자' }

새로 합칠 자리를 생성한 후 병합할 객체의 변수명 앞에 ...을 붙여서 이어주면 끝!

2. 객체 안에서 특정 값만 뽑아올 수 있을까?

이 방법으로는 총 3가지 객체 메소드가 있는데 각각 다음과 같다.

2-1. key 만 가져오고 싶어 ⭐️ keys() ⭐️

let keys = Object.keys(person); // [ 'name', 'age', 'gender' ]

2-2. key값 만 가져오고 싶어 ⭐️ values() ⭐️

let values = Object.values(person); // [ '홍길동', 20, '남자' ]

2-3. 난 둘다 가져오고 싶어 ⭐️ entries() ⭐️

let entries = Object.entries(person); // [ [ 'name', '홍길동' ], [ 'age', 20 ], [ 'gender', '남자' ] ]

여기서 공통점을 발견!
모두 s가 붙는다. 아마도 개인적인 생각이지만... 보통 객체 안에는 여러가지 항목들이 들어가기 때문이 아닐까?라는 생각이 들었다.🤔

그리고 놀랍게도 위의 메소드들을 출력하면 배열형태로 반환해준다는 것!
심지어 entries()는 2중 배열문으로 정리되어 반환된다.

아 추가로 공부하다 신기한 점을 발견해서 덧붙이자면 내용이 같은 객체라도 === 이나 == 로 동일하냐? 물어보면 무조건 false!라고 대답한다.

let person1 = {
    name : '홍길동',
  	age : 20,
    gender : '남자'
}

let person2 = {
     name : '홍길동',
    age : 20,
    gender : '남자'
}

console.log(person1 === person2); // false

왜지...? 싶었는데 객체는 크기가 상당하기 때문에 동일한 내용을 갖는 객체라도 false를 뱉는다고...
메모리 주소가 다르다고 한다.😮 역시 컴퓨터는 신기하고 놀랍다.

다만 JSON 으로 확인할 수 있는 방법이 있는데

console.log(JSON.stringify(person1) === JSON.stringify(person2)); // true

JSON.stringify(변수명) 이걸로 비교를 하면 신기하게 true라고 한다.

그러니 객체가 동일한지 비교할때는 단순히 변수명으로 비교하는것이 아닌 위 방법으로 확인하는 것이 좋겠다.