자바스크립트에서 객체를 비교하는 방법
이 글을 통해 전하고 싶은 메세지
- 자바스크립트에서는 모든 것은 객체로 다룬다.
- 객체는 참조 자료형이다.
- 객체를 비교하는 방법에는 얕은 비교, 깊은 비교가 존재한다.
- 얕은 비교는 객체의 참조값을 비교한다.
- 깊은 비교는 객체의 속성을 비교한다.
- 코드로 구현할 수 있으며, 그게 아닐 경우에는 JS의 기본 기능을 활용하여 비교할 수 있다.
자바스크립트에서의 객체
객체에 대한 설명은 위 글보다 잘 쓸 방법을 모르겠다. 그래서 객체란 무엇인지는 위 글을 참고하자.
나는 조금은 다른 관점에서 객체를 이야기해보고자 한다.
자바스크립트에서 모든 것이 객체라고 하는데 이게 도대체 무슨말인가?
객체는 참조 자료형이다. 그러면 이 객체를 어떻게 비교할 수 있을까?
이 두가지를 이야기하고자 한다.
자바스크립트에서 모든 것이 객체다?
엄밀히 말하면 틀린말이다.
자바스크립트에는 7가지의 원시 자료형(primitive type)
이 존재하며, 이들은 객체가 아니다.
많이 사용했을, string
, number
, boolean
, null
, undefined
, symbol
, bigint
이 바로 원시 자료형이다.
그러나 이들 중 일부는 래퍼 객체(wrapper object)
가 존재하며, 이를 통해서 객체처럼 메서드를 사용할 수 있게 된다.
let str = "hello";
console.log(str.toUpperCase()); // "HELLO"
위의 코드가 바로 그 예시로, 이를 좀 더 풀어서 작성하면 다음과 같다.
let str = "hello";
let strObj = new String(str);
console.log(strObj.toUpperCase()); // "HELLO"
위 코드에서 확인할 수 있듯이, string
은 원시 자료형이지만, String
이라는 래퍼 객체를 통해서 toUpperCase()
라는 메서드를 사용할 수 있다.
그리고, 위의 두 코드에서 확인할 수 있듯이, wrapper
객체는 선언을 생략할 수 있다.
이때, 래퍼 객체는 원시 자료형을 객체처럼 사용할 수 있게 해주는 것이지, 원시 자료형을 객체로 변환하는 것은 아니다는 것에 주의하자.
원시 자료형 | 래퍼 객체 |
---|---|
string | String |
number | Number |
boolean | Boolean |
null | - |
undefined | - |
symbol | Symbol |
bigint | BigInt |
위와 같은 요소로 인해서 자바스크립트에서는 모든 것이 객체라고 표현하기도 한다.
그러나, 객체와 원시 자료형은 명확하게 다르게 처리되고, 동작하기에 두루뭉실하게 모든 것은 객체다! 라고 표현하는 건 크게 바람직하지 않은 것 같다.
객체를 비교하는 방법
객체 비교에는 두 가지 방법이 존재한다.
- 얕은 비교
- 깊은 비교