웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

[자바스크립트] URLSearchParams를 사용하여 쿼리스트링 사용시 falsy 값 제거하는 방법

Last Modified : 2023-03-09 / Created : 2023-03-06
2,841
View Count
자바스크립트에서 쿼리스트링을 사용하면 간단한 웹페이지의 데이터를 유지하는데 사용할 수 있습니다. 대표적으로 페이지 값을 예를들 수 있죠. 아래 주소창 뒤의 쿼리스트링을 봐주세요.

https://webisfree.com/?page=1

이렇게 쿼리스트링을 만드는 데에는 URLSearchParams를 사용하면 매우 편리하게 쿼리스트링 변환이 가능합니다. 만약 { a: 1, b:2 }라는 값을 쿼리스트링 값으로 변환할 경우 아래와 같이 사용합니다.
const queryStr = '?' + new URLSearchParams({ a: 1, b: 2 }).toString();
console.log(queryStr);

// Result
?a=1&b=2

그런데 쿼리스트링에 불필요한 값이 있는 경우가 있습니다. 예를들어 아래에서 c값은 쿼리스트링에 있을 필요가 없겠죠.
{
  a: 1,
  b: 2
  c: null
}

만약 이와 같이 불필요한 값을 URLSearchParams()에서 제외하려면 어떻게 하는게 좋을까요? 쉽고 간단한 방법을 알아봅니다.





# URLSearchParams을 사용한 쿼리스트링에서 Falsy 제거하기


아래와 같이 두 가지 방법을 생각할 수 있습니다.

1. lodash의 _.pickBy() 메서드 사용하기
2. URLSearchParams의 이터레이터를 사용하여 불필요 프로퍼티 제거

위 두 가지 방법 중 1번이  가장 간단합니다. 여기서는 둘 모두 알아보겠습니다. 먼저 첫 번째 lodash를 사용하는 방법입니다.


! lodash _.pickBy() 사용방법


lodash의 pickBy()를 사용하면 객체의 Falsy값을 제거해줍니다. 즉 null, undefined, 0 등의 값을 제외할 수 있습니다. 이 방법을 사용하여 제거하는 간단한 예제를 알아봅니다.
아래는 객체 { a: 1, b: 2, c: null }에서 c를 제외한 쿼리스트링 값을 얻기 위한 예제입니다.
const queryStr = new URLSearchParams(_.pickBy({ a: 1, b: 2, c: null }));
console.log(queryStr)

// Result
'a=1&b=2'
보시는 것처럼 Falsy가 제외된 것을 확인할 수 있습니다.

다음은 URLSearchParams의 이터레이터를 사용 방법입니다.


! URLSearchParams의 이터레이터를 사용하여 불필요 프로퍼티 제거 방법


이번 방법은 URLSearchParams의 인스턴스가 가지는 이터레이터를 사용하는 방법입니다. 여기에 for 문을 사용하여 Falsy인 프로퍼티만 delete를 사용하여 삭제합니다. 아래 예제를 보세요.
const queryStr = new URLSearchParams({ a: 1, b: 2, c: null });
for(const [key, value] of queryStr.entries()) {
  if (!value) {
    queryStr.delete(key);
  }
}
console.log(queryStr.toString());

// Result
'a=1&b=2'

이 방법 역시 결과는 동일합니다. 반환된 이터레이터를 순회하면서 value가 없는 경우 delete 메서드를 사용하여 해당 프로퍼티를 제외하는 방법입니다.


여기까지 쿼리스트링에서 Falsy를 제거하는 방법에 대하여 알아보았습니다.

Previous

[자바스크립트] 배열의 최대 길이의 값을 설정하는 방법

Previous

자바스크립트 utc 시간을 현재 로컬 타임으로 변환하기