자바스크립트(Javascript) 객체의 비교(원시값과의 차이점)

객체 간의 비교

 

객체를 다룰 때 가장 많이 실수하는 상황은 객체 간에 비교 연산을 할 때입니다.

{} === {}

//실행결과
false

 

객체가 아닌 숫자, 문자열, 불 값, null, undefined는 모두 true를 반환합니다.

'str' === 'str'
123 === 123;
false === false;
null === null;
undefined === undefined;

//실행결과 모두
true

 

객체는 모양이 같아도 생성할 때마다 새로운 객체가 생성됩니다. 따라서 같은 객체인지 비교하고 싶다면 기존 객체를 변수에 저장해 두어야 합니다.

const a = { name: '홍길동' };
const array = [1, 2, a];

console.log(a === array[2]);

//실행결과
true

 

참조와 복사

 

객체를 사용할 때 반드시 알아야 하는 개념은 참조(reference)입니다.

const a = { name: '홍길동' };
const b = a;
a.name = 'hero';

console.log(b.name);

//실행결과
hero

변수 b에 a를 대입한 상황입니다. a 변수의 name 속성 값을 변경했는데, b 변수도 같이 변경됐습니다.

객체를 저장한 변수를 다른 변수에 대입하면 두 변수 모두 같은 객체를 저장하는 셈이 됩니다.

a 와 b 변수 모두 같은 객첼르 저장하고 있는 것이므로 객체의 속성 값을 바꾸면 변수 a와 b 모두 바뀌는 것처럼 보입니다.

이러한 상황일 때 변수 a와 b가 같은 객체를 참조하고 있다고 표현합니다.

또는 a와 b 그리고 객체 간에 참조 관계까 있다고 표현합니다.

다만, 객체가 아닌 값(문자열, 숫자, 불 값, null, undefined)의 경우는 조금 다릅니다.

let a = '홍길동';
let b = a;
a = 'hero';

console.log(b);

//실행결과
'홍길동'

 

객체 안에 객체가 있을 때, '홍' 값에 접근하는 방법은?

const info = {
  name: {
    first: '길동',
    last: '홍',
  },
  gender: 'm',
};

//정답
info.name.last;
info['name']['last'];