웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
[자바스크립트] URLSearchParams를 사용하여 쿼리스트링 사용시 falsy 값 제거하는 방법
Last Modified : 2023-03-09 / Created : 2023-03-06자바스크립트에서 쿼리스트링을 사용하면 간단한 웹페이지의 데이터를 유지하는데 사용할 수 있습니다. 대표적으로 페이지 값을 예를들 수 있죠. 아래 주소창 뒤의 쿼리스트링을 봐주세요.
https://webisfree.com/?page=1
이렇게 쿼리스트링을 만드는 데에는 URLSearchParams를 사용하면 매우 편리하게 쿼리스트링 변환이 가능합니다. 만약 { a: 1, b:2 }라는 값을 쿼리스트링 값으로 변환할 경우 아래와 같이 사용합니다.
그런데 쿼리스트링에 불필요한 값이 있는 경우가 있습니다. 예를들어 아래에서 c값은 쿼리스트링에 있을 필요가 없겠죠.
만약 이와 같이 불필요한 값을 URLSearchParams()에서 제외하려면 어떻게 하는게 좋을까요? 쉽고 간단한 방법을 알아봅니다.
아래와 같이 두 가지 방법을 생각할 수 있습니다.
1. lodash의 _.pickBy() 메서드 사용하기
2. URLSearchParams의 이터레이터를 사용하여 불필요 프로퍼티 제거
위 두 가지 방법 중 1번이 가장 간단합니다. 여기서는 둘 모두 알아보겠습니다. 먼저 첫 번째 lodash를 사용하는 방법입니다.
lodash의 pickBy()를 사용하면 객체의 Falsy값을 제거해줍니다. 즉 null, undefined, 0 등의 값을 제외할 수 있습니다. 이 방법을 사용하여 제거하는 간단한 예제를 알아봅니다.
아래는 객체 { a: 1, b: 2, c: null }에서 c를 제외한 쿼리스트링 값을 얻기 위한 예제입니다.
다음은 URLSearchParams의 이터레이터를 사용 방법입니다.
이번 방법은 URLSearchParams의 인스턴스가 가지는 이터레이터를 사용하는 방법입니다. 여기에 for 문을 사용하여 Falsy인 프로퍼티만 delete를 사용하여 삭제합니다. 아래 예제를 보세요.
이 방법 역시 결과는 동일합니다. 반환된 이터레이터를 순회하면서 value가 없는 경우 delete 메서드를 사용하여 해당 프로퍼티를 제외하는 방법입니다.
여기까지 쿼리스트링에서 Falsy를 제거하는 방법에 대하여 알아보았습니다.
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
console.log(queryStr);
// Result
?a=1&b=2
그런데 쿼리스트링에 불필요한 값이 있는 경우가 있습니다. 예를들어 아래에서 c값은 쿼리스트링에 있을 필요가 없겠죠.
{
a: 1,
b: 2
c: null
}
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가 제외된 것을 확인할 수 있습니다.console.log(queryStr)
// Result
'a=1&b=2'
다음은 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'
for(const [key, value] of queryStr.entries()) {
if (!value) {
queryStr.delete(key);
}
}
console.log(queryStr.toString());
// Result
'a=1&b=2'
이 방법 역시 결과는 동일합니다. 반환된 이터레이터를 순회하면서 value가 없는 경우 delete 메서드를 사용하여 해당 프로퍼티를 제외하는 방법입니다.
여기까지 쿼리스트링에서 Falsy를 제거하는 방법에 대하여 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
