[JavaScript] Object.entries() 매서드 사용하기

이전에 리액트 카테고리의 포스팅 내용에서 검색 구현 중 검색 조건을 최적화하기 위해 사용한 방법이다. (3번 항목)

 

https://duski96.tistory.com/5

[React] React에서 select box를 활용한 검색 구현

 

사실 대단한 내용은 아니고 단순히 5개의 검색 조건들 중 값이 null이 아닌 조건만 추려서 결과를 반환하겠다는 얘기였다.

아래 코드는 지난 포스팅때 사용한 검색 조건을 담는 코드의 일부이다.

import { useState } from 'react';

const [condition, setCondition]=useState({
    year:null,
    price:null,
    mileage:null,
    fuel:null,
    spot:null,
});

const { year, price, mileage, fuel, spot }=condition;

 

현재 상황에서 검색 조건이 year 속성 하나에만 부여된다 가정하면 나머지 price, mileage, fuel, spot에 의해 네 번의 무의미한 순회를 하게 된다.

당장은 다루는 데이터의 수가 적어 검색 속도의 차이를 체감할 수 없지만 만약 10만개의 데이터를 가룬다 가정하면 최악의 경우 쓸데없이 40만번의 탐색을 추가로 실행하며 리소스를 낭비하게 된다.

 

그럼 값이 null이 아닌 속성을 어떻게 추려야 할까?

처음엔 Array.filter() 매서드를 사용하면 되겠다 생각했지만, 해당 매서드는 배열에만 사용 가능하다.

객체에 비슷하게 적용 가능한 매서드가 있는지 알아봤지만... 없는것 같았다.

그래서 Object.entries() 매서드를 사용해 객체를 [key, value] 쌍의 배열로 변환하고 value 값이 null이 아닌 것들만 남겨두기로 했다.

아래는 필터링된 검색 조건을 구현한 과정이다.

 

let filteredCondition=Object.entries(condition);

// [['year', null], ['price', null], ['mileage', null], ['fuel', 'gasoline'], ['spot', null]]

 

먼저 Object.entries() 매서드를 사용해 filteredCondition 변수에 배열로 반환된 condition 객체를 담는다.

이 때 fuel 속성에 'gasoline' 이라는 값이 들어있다면 위 주석에 해당하는 배열이 만들어질 것이다.

 

let filteredCondition=Object.entries(condition).filter((item)=>item[1]!==null)

// [['fuel', 'gasoline']]

 

이제 Array.filter() 매서드를 활용해 value 값에 해당하는 원소의 값이 null이 아닌 배열만 남기면 된다.

하지만 아직 고려할 것이 남았는데 Object.entries() 매서드는 배열을 문자열 쌍으로만 반환해준다는 것이다.

 

// [['year', '2020'], ['fuel', 'gasoline']]

 

만약 year 속성에 2020 이라는 값이 주어졌다면 위 결과처럼 연도의 value가 문자열로 반환되는 것이다.

 

let filteredCondition=Object.entries(condition).filter((item)=>item[1]!==null).map(
	(item)=>['year','price','mileage'].includes(item[0]) ? [item[0], Number(item[1])] : [item[0], item[1]]
);

// [['year', 2020], ['fuel', 'gasoline']]

 

따라서 검색 구현을 위해선 일부 속성의 value에 해당하는 값을 숫자 타입으로 다시 맞춰주는 과정이 필요하다.

year, price, mileage 속성이 이에 해당한다.

Array.map() 매서드를 활용해 반환된 배열의 각 원소 중 첫 번째 속성(key에 해당하는 값)이 year, price, mileage 중 하나인지 판별한 다음 맞다면 value에 해당하는 값을 숫자로 맵핑하고 아니면 문자열 그대로 반환하도록 코드를 짰다.