Object.is() 개념잡기

배경 

react@18.2.0 의 memo에 관한 문서를 보다가 useMemo는 props가 이전 props와 shallow equal 하지 않을 때 리렌더링 된다고 하고 그 shallow equal를 판단할 때의 결과가 Object.is(prev값,next값) 의 결과와 같다고 나와 있다. 그래서 Object.is()

라는 메서드에 관심을 같게 되어 MDN을 살펴보았다.

 

Object.is()의 개념

Object.is() 정적 메서드는 두 값이 같은지 결정한다.

(참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is )

 

여기서 나는 자바스크립트에서 같은값인지 판별하는 방식 2가지 == 와, ===를 떠올렸지만  두 값이 같은지 결정하는 방식은 하나 더있고 그게 바로 Object.is() 방식이라고 하며 위 2가지와 약간 다른 것 같다. ( 결과론 적으론 일부 예외를 제외하곤  === 와 같다 )

 

참고로 자바스크립트에 두 값이 같은지를 논하는 방식은 3가지가 있다고 한다. (https://developer.mozilla.org/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness)

1. 엄격한 등호 ( 흔히 우리가 아는 === ) 

2. 느슨한 등호 ( 흔히 우리가 아는 == )

3. 그리고 Object.is()   

 

예시

const object ={value:1}

const object2 =object

console.log(Object.is({},{})) // false

console.log(Object.is(object,object)) // true

console.log(Object.is(object,object2)) // true

console.log(Object.is(1,2)); // false

console.log(Object.is("a","A")); // false

console.log(Object.is(null,null)); // true

console.log(Object.is(undefined,null)); // false

console.log(Object.is(undefined,undefined)); // true

console.log(Object.is('',null)); // false

console.log(Object.is(+0,-0)); // false

console.log(Object.is(+0,+0)); // false

 

실제로 위 코드를 확인해보면 === 연산과 거의 비슷한 결과를 나타낸다 ( +0, -0 비교 제외 ) 

특히 주목할 사항은 object ( reference type ) 의 경우 객체가 실제로 가지는 값이 같아도 각각의 객체를 가리키는 메모리주소가 다르면 두 객체는 다르다고 인식한다는 것이다. 

 

여기서 한가지 떠오르는 개념이 있다. JS에서 Shallow Equal 이다.

Shallow Equal은 값이 같은지 비교하는 개념인데 

 

원시타입의 경우 ( undefined, null, string, number, boolean, symbol ) 

실질적으 값 자체를 비교하여 같으면 equal 이라고 판단하고  

 

참조타입의 경우 ( 원시타입을 제외한 모든 타입 - Array, Object 등등 ) 

해당객체를 가리키는 메모리 주소가 같으면 euqal 이라고 판단한다.

 

마치며

react의 useMemo 문서를 확인하면서 js의 Object.is() 메서드에 관심이 생겨 해당 메서드를 확인하고 동시에 shallow equal에 대한 개념을 다시한번 생각하는 기회가 되었다. shallow equal 개념은 react를 하다가 useState에서도 확인할 수 있을 것이다.