자바스크립트의 동등 비교

1.1.1 자바스크립트의 데이터 타입

 

자바스크립트의 모든 값은 데이터 타입을 갖고있고, 이 데이터 타입은 크게 원시 타입과 객체 타입으로 나뉜다.

 

원시 타입                              

• boolean : 참(true)과 거짓(false)만을 가질 수 있는 데이터 타입. 주로 조건문에서 많이 쓰인다.                   
• null : 아직 값이 없거나 비어 있는 값을 표현할 때 사용한다.
• undefined : 선언한 후 값을 할당하지 않은 변수 또는 값이 주어지지 않은 인수에 자동으로 할당되는 값.
• number : (2^53-1) 과 2^53-1 사이의 값을 저장할 수 있다.
• string : 텍스트 타입의 데이터를 저장하기 위해 사용된다. ( '' , "" , `` ) 으로 표현할 수 있다.
• symbol : ES6에서 새롭게 추가된 타입, 중복되지 않는 어떠한 고유한 값을 나타내기 위해 만들어졌다. (심벌을 생성하려면 반드시 Symbol() 을 사용해야만 한다.)
• bigint : number가 다룰 수 있는 숫자 크기의 제한을 극복하기 위해 ES2020에서 새롭게 나온 것. 

 

원시타입은 객체가 아닌 다른 모든 타입을 의미한다.

객체가 아니므로 이러한 타입들은 메서드를 갖지 않는다.

 

 

객체 타입

• object

 

앞서 7가지 원시 타입 이외의 모든 것, 즉 자바스크립트를 이루고 있는 대부분의 타입이 바로 객체타입이다. (ex. 배열, 함수, 정규식, 클래스 등 )

 

 

1.1.2 값을 저장하는 방식의 차이

 

원시 타입과 객체 타입의 가장 큰 차이점은 값을 저장하는 방식의 차이이다.

 

원시타입은 불변 형태의 값으로 저장된다. 그리고 이 값은 변수 할당 시점에 메모리 영역을 차지하고 저장된다.

 

반면, 객체는 프로퍼티를 삭제, 추가, 수정할 수 있으므로 원시 값과 다르게 변경 가능한 형태로 저장되고,

값을 복사할 때도 값이 아닌 참조를 전달한다.

 

객체는 값을 저장하는 게 아니라 참조를 저장한다.

이 때문에 동일하게 선언했던 객체라 하더라도 저장하는 순간 다른 참조를 바라보기 때문에 동등비교를 하면 false를 반환한다.

 

따라서 자바스크립트 개발자는 항상 객체 간에 비교가 발생하면,

우리가 이해하는 내부의 값이 같다 하더라도 결과는 대부분 true가 아닐 수 있다는 것을 인지해야 한다.

 

1.1.3 자바스크립트의 또 다른 비교 공식, Object.is

 

Object.is는 두 개의 인수를 받아 이 인수 두 개가 동일한지 확인하고 반환하는 메서드이다.

 

Object.is 가 == 나 === 와 다른 점

• ==비교는 같음을 비교하기 전에 양쪽이 같은 타입이 아니라면 비교할 수 있도록 강제로 형변환을 한 후 비교.
• === 과 Object.is 둘 다 타입이 다르면 false를 반환 하지만 Object.is가 좀 더 개발자가 기대하는 방식으로 정확히 비교한다.

-0 === +0 //true
Object.is(-0, +0) //false

Number.NaN === NaN //false
Object.is(Number.NaN, NaN) //true

NaN === 0 / 0 //false
Object.is(NaN, 0 / 0) //true

 

이러한 몇 가지 특별한 사항에서 동등 비교 ===가 가지는 한계를 극복하기 위해 Object.is가 만들어졌지만 ,

여전히 객체 간 비교에 있어서는 자바스크립트의 특징으로 인해 ===와 동일하게 동작한다.

 

 

1.1.4 리액트에서의 동등 비교

 

리액트에서 사용하는 동등 비교는 Object.is이다.

이 objecIs를 기반으로 동등 비교를 하는 shallowEqual 이라는 함수를 만들어 사용한다.

 

리액트에서의 비교를 요약하자면 Object.is로 먼저 비교를 수행한 다음에 Object.is에서 수행하지 못하는 비교,

즉 객체 간 얕은 비교를 한 번 더 수행한다.

                 ㄴ  객체의 첫 번째 깊이에 존재하는 값만 비교하는 것을 의미

 

//Object.is는 참조가 다른 객체에 대해 비교가 불가능하다.
Object.is({ hello : 'world' }, { hello : 'world' }) //false

//반면 리액트 팀에서 구현한 shallowEqual은 객체의 1 depth까지는 비교가 가능하다.
shallowEqual({ hello : 'world' }, { hello : 'world' }) //true

//그러나 2 depth까지 가면 이를 비교할 방법이 없으므로 false를 반환한다.
shallowEqual({ hello : { hi : 'world' }}, { hello : { hi : 'world' }} //false

 

이렇게 객체의 얕은 비교까지만 구현한 이유는?

먼저 리액트에서 사용하는 JSX props는 객체이고, 여기에 있는 props만 일차적으로 비교하면 되기 때문이다.

리액트는 props에서 꺼내온 값을 기준으로 렌더링을 수행하기 때문에 얕은 비교로 충분하다.