객체의 비교

오늘은 객체를 비교하는 방법에 대해서 익히고자 한다.
객체간의 비교를 할 경우, 객체의 모양이 같다는 이유로 '같다'고 단순히 생각해서는 안된다.

{} === {}

위의 객체가 같다고 볼 수 있을까?

우리의 예상과는 정반대로 답은 false이다.
우리가 봤을때 두 객체는 같다고 생각된다. 하지만 객체들의 모양이 같다고 ===을 사용하여 비교하더라도 위처럼 결과가 true가 나오진 않을 것 이다.

왜냐하면 객체를 비교하기 위해선 객체끼리 혹은 함수끼리 혹은 배열들끼리 변수에 저장해놓고 비교를 해야 하기 때문이다.

이는 '객체'와 '객체가 아닌 것'들은 '값을 저장하는
저장소가 다르기 때문이다'로 이해하면 된다.
객체와 객체가 아닌 값 (문자열, 숫자, 불 값, null, undefined) 의 경우로 비교해 할 수 있는데 간단하게 아래에서 살펴보자.

1) 함수와 배열등 객체를 비교할 경우

예제 1>

const array = [1, 2, 'c'];
console.log (array === [1,2,c]);

정답은 false.

객체 (함수나 배열 등)를 비교할 경우에는 객체의 값이 모두 메모리에 저장되고 그 안에서 값을 비교한다. 따라서, array 와 같다고 비교되는 [1,2,c]는 새로 메모리에 들어오는 이름없는 배열값이다.
따라서 결코 같다고 볼 수 없다.

아래 예제를 통해서 어떻게 비교해야 하는지 쉽게 그림으로 예제를 풀어보자 :)

예제1 >

const a = {color: 'pink'};
const b = a;
a.color = 'blue';
console.log(b.color);
값은 blue이다.

예제1 은 객체들의 비교이다.

객체는 모두 메모리 안에 저장되고 참조 하므로 때문의 b= a;이므로 b는 메모리 안의 a 의 값을 갖게되고, a color의 값이 blue로 변경됨에 따라 당연히 console.log(b.color); 는 blue이다.

다음은 객체가 아닌 변수를 비교한 경우로 앞서 본 객체비교와 다른 점을 볼 수 있다.

예제 2>

let a = 1;
let b = 1;
console.log(a===b);
값은 true.

변수의 경우엔 메모리가 아닌 다른공간에 값을 저장하기 때문이다.
그리고 그 공간의 값을 가져온다.
따라서 a = 1; 이고 b =1 ;이므로 true이다.

QUIZ>
만약 다음과 같이 객체 안에 객체가 있을 경우 '댕댕이' 값에 접근하려면 어떡해야 할까?

const moon = {
  start: {
  one: '냥냥펀치',
  two: '붕어빵',
  three: '제주도'
  four: '댕댕이',
  },
  end: '개복치'
 };

 정답은 moon.start.four; 혹은 moon['start']['four'];

참조> https://www.youtube.com/watch?v=VXVIVblOBK4&list=PLcqDmjxt30RvEEN6eUCcSrrH-hKjCT4wt&index=31