2. JS의 다양한 값 비교와 얕은 비교, 깊은 비교

👀  목표

1.원시타입과 참조타입의 개념을 이해하기

2.리액트에서 어떤식으로 값과 참조가 쓰이는지 이해하기

3.배열 메소드를 적재적소에 잘 사용하기

 

👀  얕은 비교로 살펴보는 다양한 값 비교

🟣 리액트에서의 얕은 비교

얕은 비교는 객체의 참조주소만 똑같은지 비교한다.

리액트에서 얕은 비교를 사용하는 이유는 상태가 변할때 페이지가 렌더링 되면 다른 상태값들이 일치하는지 체크하는데

깊은 비교를 사용하면 안쪽의 depth까지 똑같은지 둘러보고 오기때문에 연산비용이 더 많이든다.

그래서 빠르게 처리하기 위해서 리액트에서 렌더링할때 얕은 비교를 사용해서 state의 참조값이 다르면

값이 바뀌었구나! 인지하고 재 렌더링 하게된다.

 

그래서 useState에 값을 변경할때 불변성을 지켜주기 위해 ...을 쓰거나 a.concat(atherArr)를 사용한다.

 

 

🟣 다양한 값 비교

export function shallowEquals(target1, target2) {
  // 원시 데이터 타입 비교
  if (Object.is(target1, target2)) return true;

  // 타입이 다를 경우
  if (typeof target1 !== typeof target2) return false;

  // 객체가 아닌 경우
  if (typeof target1 !== 'object' || target1 === null || target2 === null) {
    return false;
  }

  // 익명 class 조건 및 new 생성자 객체 조건
  if ((!target1.constructor.name || !target2.constructor.name) ||
      (target1 instanceof Number || target2 instanceof Number) ||
      (target1 instanceof String || target2 instanceof String)) {
    return false;
  }

  // 배열 비교
  if (Array.isArray(target1) && Array.isArray(target2)) {
    if (target1.length !== target2.length) return false;
    for (let i = 0; i < target1.length; i++) {
      if (!Object.is(target1[i], target2[i])) return false;
    }
    return true;
  }

  // 객체 키 비교
  const target1Keys = Object.keys(target1);
  const target2Keys = Object.keys(target2);

  if (target1Keys.length !== target2Keys.length) return false;

  for (let i = 0; i < target1Keys.length; i++) {
    const currentKey = target1Keys[i];
    if (!Object.hasOwnProperty.call(target2, currentKey) || !Object.is(target1[currentKey], target2[currentKey])) {
      return false;
    }
  }
  return true;
}

 

1. Object.is()

두 값이 같은지 비교한다.

원시타입 객체 타입 모두 비교할 수 있다.

=== 연산자보다 더 엄격하게 비교를 수행한다는 특징이 있다.

1. NaN을 NaN과 같다고 봄
2. -0과 +0은 다르게 본다.

 

console.log(Object.is('foo', 'foo')); // true
console.log(Object.is(window, window)); // true
console.log(Object.is('foo', 'bar')); // false
console.log(Object.is([], [])); // false
console.log(Object.is(null, null)); // true
console.log(Object.is(0, -0)); // false
console.log(Object.is(-0, -0)); // true
console.log(Object.is(NaN, 0/0)); // true

console.log(NaN === NaN); // false
console.log(0 === -0); // true

 

2. Array.isArray

무조건 배열인지만 비교한다.

배열생성자인 new Array()로 만들어진 배열도 js에서는 배열 객체로 취급하기 때문에 true를 반환한다.

Array.isArray([]); // true
Array.isArray(document.querySelectorAll('div')); // false

 

3. Object.keys()

객체의 키들을 문자열 배열로 반환한다.

그리고 열거불가능한 속성은 반환하지 않는다. (enumerable: false)

반대로 Object.value()는 값들을 배열로 반환한다.

const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj);
console.log(keys); // ['a', 'b', 'c']

 

4. Object.hasOwnProperty.call(this, value)

객체의 프로토타입 체인에서 직접 상속된 속성을 무시하고, 해당 객체 자체의 속성만을 확인한다.

객체의 속성을 안전하게 검사하기 위해서 사용한다.

뒤에 call을 붙이면 this를 원하는 것으로 강제할 수 있다.

const parent = { a: 1 };
const child = Object.create(parent);
child.b = 2;

// child 객체 자체의 속성들을 출력합니다.
console.log(Object.keys(child)); // ['b']

// parent 객체의 속성을 포함한 모든 속성들을 출력합니다.
for (let key in child) {
  console.log(key); // 'b', 'a'
}

// child 객체의 속성 중에서 직접적으로 child에 속한 속성인지를 확인합니다.
console.log(child.hasOwnProperty('b')); // true
console.log(child.hasOwnProperty('a')); // false

// Object.hasOwnProperty.call을 사용하여 child 객체의 직접적인 속성인지를 확인합니다.
console.log(Object.hasOwnProperty.call(child, 'b')); // true
console.log(Object.hasOwnProperty.call(child, 'a')); // false
console.log(Object.hasOwnProperty.call(parent, 'b')); // false

 

5. 익명 class 맞는지 비교

아래의 class는 변수명은 있지만 class 이름은 없는 익명 class다.

익명 클래스는 말 그대로 이름이 없기때문에 constructor.name 하면 빈 문자열을 반환하게 된다.

이렇게 익명 클래스인지 아닌지 판별할 수 있다.

const MyClass = class {
  constructor() {
    // constructor 내용
  }
};

 

6. 객체가 맞는지 비교

js는 유명하고 독특한 오류가 있다.

null의 type도 'object'인것.

그래서 객체가 맞는지를 비교할때는 null이 아닌지도 한번 더 조건을 걸어줘야 한다.

if (typeof target1 !== 'object' || target1 === null || target2 === null) {
    return false;
}

 

 

👀  깊은 비교와 재귀

깊은 비교는 객체를 비교할때 안쪽의 depth의 객체의 값까지 완전 똑같은지 비교한다.

안쪽의 depth까지 비교하기 위해서 재귀를 사용한다.

export function deepEquals(target1, target2) {
  // shallowEquals와 유사하지만, 재귀적으로 내부 객체까지 비교

  // 두 값이 정확히 같은 경우 true 반환
  if (target1 === target2) {
    return true;
  }

  // target1과 target2가 모두 배열이고, 길이가 같은 경우 각 요소를 비교
  if (Array.isArray(target1) && Array.isArray(target2) && target1.length === target2.length) {
    return target1.every((v, k) => deepEquals(v, target2[k]));
  }

  // target1과 target2가 모두 객체이고, 각 속성들을 비교
  if (target1.constructor === Object && target2.constructor === Object) {
    const key1 = Object.keys(target1); // target1의 모든 키를 배열로 반환
    const key2 = Object.keys(target2); // target2의 모든 키를 배열로 반환
    
    // 객체 자체가 같거나 (같은 객체를 참조하거나)
    // 속성의 수가 같고 모든 키에 대해 재귀적으로 deepEquals를 호출하여 값 비교
    return target1 === target2 || (key1.length === key2.length && key1.every(key => deepEquals(target1[key], target2[key])));
  }

  // 위 조건에 모두 해당하지 않으면 두 값은 같지 않음
  return false;
}

 

 

👀   new Number과  newString

expect(num1 == 1).toBe(true);

expect(typeof num1 === 'number').toBe(false);

expect(typeof num1 === 'object').toBe(true);

 

expect(num1 == '1').toBe(true);

expect(typeof num1 === 'string').toBe(false);

expect(typeof num1 === 'object').toBe(true);

 

num1이 값은 같은데 엄격한 비교를 하면 숫자나 문자가 아니라고 한다.

그런데 type은 object이다.

/** typeof가 object인게 true니까 들어오는 값을 new Number로 type을 object로 만들기 */
export function createNumber1(n) {
  return new Number(n); // [Number: 1]
}

/** string처럼 붙는데, type이 object. */
export function createNumber2(n) {
  return new String(n); //[String: '1']
}

 

위의 조건들을 모두 충족하는건 new 생성자로 만든 Number 객체과 String 객체이다.

그래서 원시타입이 맞냐고 물어보면 false가 나온다.

 

👀   valueOf, toJSON, toString

/** 객체가 숫자컨텍스트(객체가 숫자로 변환되어야 하는 상황)에서 사용될 때 객체에 valueOf 메서드가 정의되어 있으면
 * 'valueOf'메서드가 자동으로 호출되어 메서드의 return 값으로 연산.
 * 숫자컨텍스트 발생 : 수학 연산, 비교 연산, 단항 연상
 * JSON.stringify로 문자열 변환을 시도하면 toJSON 메소드가 실행되고,
 * 문자열 컨텍스트에서는 toString 메소드가 실행된다.
**/
export function createNumber3(n) {
  return {
    value: n,
    valueOf: function() {
        return this.value;
    },
    toJSON: function() {
        return `this is createNumber3 => ${this.value}`;
    },
    toString: function() {
        return `${this.value}`;
    }
  };
}

 

 

👀   new Map()

같은 참조를 바라봐야 하는 조건을 위해 new Map으로 객체를 캐싱한다.

객체를 생성할때 캐시를 확인해서 이전과 동일한 객체가 있을때 그 객체를 반환한다.

동일한 객체가 없을때는 새로운 객체를 생성하고 Map에 캐싱한다.

export class CustomNumber {
  static cache = new Map();

  constructor(n){
    if (CustomNumber.cache.has(n)) {
      return CustomNumber.cache.get(n);
    }

    this.value = n;
    CustomNumber.cache.set(n, this);
  }

  valueOf() {
    return this.value;
  }

  toJSON(){
    return `${this.value}`;
  }

  toString(){
    return `${this.value}`;
  }
}

 

👀 Object.defineProperty 

js의 객체의 속성을 정의하거나 수정할때 사용되는 메서드.

빈 객체가 아니지면 얕은 복사를 할땐 빈 객체와 같아야 할때 Object.defineProperty로

직접 접근할수는 있지만 각 속성을 루프, 메서드에 의해 열거(객체의 속성을 반복해서 나열)할 수 없게 만들어준다.

const obj = createUnenumerableObject({ a: 1, b: 2 });
it('createUnenumerableObject > ', () => {
  expect(obj.a).toEqual(1);
  expect(obj.b).toEqual(2);
  expect({ ...obj }).toEqual({});
})

 

그럼 위의 객체의 속성값을 직접 확인할 수 있지만

객체를 얕은복사를 하면 enumerable은 false로 했기때문에 열거가능한 속성이 없어 빈 객체가 나온다.

export function createUnenumerableObject(target) {
  const result = {};
  Object.keys(target).forEach(key => {
    Object.defineProperty(result, key, {
      value: target[key],
      enumerable: false,
      writable: true,
      configurable: true
    });
  });
  return result;
}

 

7. Object.getOwnPropertyNames()

for ...in 루프나 앞의 Object.keys()는 열거 가능한 속성만 반환하지만

Object.getOwnPropertyNames()는 열거 가능한 속성과 비열거 가능한 속성 전부 이름을 배열로 반환한다.

const obj = Object.create({}, {
  a: { value: 1, enumerable: true }, // 열거 가능
  b: { value: 2, enumerable: false } // 열거 불가능
});

obj.c = 3; // 열거 가능

console.log(Object.getOwnPropertyNames(obj)); // ["a", "b", "c"]
console.log(Object.keys(obj)); // ["a", "c"]

 

8. Object.getPrototypeOf()

객체의 프로토타입을 반환한다.

객체가 상속받고 있는 프로토타입 체인을 확인할 수 있다.

Object.create()를 통해 생성된 객체의 프로토타입을 확인할 때 유용하다.

 

const obj = {};
const proto = Object.getPrototypeOf(obj);

console.log(proto === Object.prototype); // true

 

---

tmi...

와.. 여기서부터 처음보는 데이터 타입을 이해해야 하고 수많은 테스트코드를 통과해야 하는 로직을 짜야하는데

진짜 머리 쥐어뜯어도 구글링과 gpt를 사용하지 않으면 절대 이해할 수 없었다.

구글링과 gpt를 돌려봐도 이해안되는것도 있다는건 함정..ㅠ

이번주차는 내 생각이 들어가지 못했기 때문에 피드백이 소용이 없었다.. 나 어떡해애 😂