Skip to main content

자바스크립트에서 객체를 비교하는 방법

이 글을 통해 전하고 싶은 메세지

  • 자바스크립트에서는 모든 것은 객체로 다룬다.
  • 객체는 참조 자료형이다.
  • 객체를 비교하는 방법에는 얕은 비교, 깊은 비교가 존재한다.
  • 얕은 비교는 객체의 참조값을 비교한다.
  • 깊은 비교는 객체의 속성을 비교한다.
  • 코드로 구현할 수 있으며, 그게 아닐 경우에는 JS의 기본 기능을 활용하여 비교할 수 있다.

자바스크립트에서의 객체

모던 Javascript 튜토리얼 : 객체

객체에 대한 설명은 위 글보다 잘 쓸 방법을 모르겠다. 그래서 객체란 무엇인지는 위 글을 참고하자.

나는 조금은 다른 관점에서 객체를 이야기해보고자 한다.

자바스크립트에서 모든 것이 객체라고 하는데 이게 도대체 무슨말인가?

객체는 참조 자료형이다. 그러면 이 객체를 어떻게 비교할 수 있을까?

이 두가지를 이야기하고자 한다.

자바스크립트에서 모든 것이 객체다?

엄밀히 말하면 틀린말이다.

자바스크립트에는 7가지의 원시 자료형(primitive type)이 존재하며, 이들은 객체가 아니다.

많이 사용했을, string, number, boolean, null, undefined, symbol, bigint이 바로 원시 자료형이다.

그러나 이들 중 일부는 래퍼 객체(wrapper object)가 존재하며, 이를 통해서 객체처럼 메서드를 사용할 수 있게 된다.

javascript
let str = "hello";
console.log(str.toUpperCase()); // "HELLO"

위의 코드가 바로 그 예시로, 이를 좀 더 풀어서 작성하면 다음과 같다.

javascript
let str = "hello";
let strObj = new String(str);
console.log(strObj.toUpperCase()); // "HELLO"

위 코드에서 확인할 수 있듯이, string은 원시 자료형이지만, String이라는 래퍼 객체를 통해서 toUpperCase()라는 메서드를 사용할 수 있다.

그리고, 위의 두 코드에서 확인할 수 있듯이, wrapper 객체는 선언을 생략할 수 있다.

이때, 래퍼 객체는 원시 자료형을 객체처럼 사용할 수 있게 해주는 것이지, 원시 자료형을 객체로 변환하는 것은 아니다는 것에 주의하자.

원시 자료형래퍼 객체
stringString
numberNumber
booleanBoolean
null-
undefined-
symbolSymbol
bigintBigInt

위와 같은 요소로 인해서 자바스크립트에서는 모든 것이 객체라고 표현하기도 한다.

그러나, 객체와 원시 자료형은 명확하게 다르게 처리되고, 동작하기에 두루뭉실하게 모든 것은 객체다! 라고 표현하는 건 크게 바람직하지 않은 것 같다.

객체를 비교하는 방법

객체 비교에는 두 가지 방법이 존재한다.

  1. 얕은 비교
  2. 깊은 비교