URLSearchParams를 사용하자

velog 블로그에서 tistory로 이전한 데이터 입니다.

도입

옛날에 작성된 코드를 보면 아래와 같이 처리된 코드들이 있다.

function query({name,address,phone}) {
    let arr = [];
    name && arr.push(`name=${name}`);
    address && arr.push(`address=${address}`);
    phone && arr.push(`phone=${phone}`);
    arr = arr.join('&');

    return axios.get(`${URL}/user?${arr}`);
}

의도한 결과는 잘 나올것이다. 하지만 최근에는 URLSearchParams를 사용하면 쉽게 해결할 수 있다.

사용법

function query({name,address,phone}) {
    let q = new URLSearchParams();
    name && q.set(`name`,name);
    address && q.set(`address`,address);
    phone && q.set(`phone`,phone);

    return axios.get(`${URL}/user?${q.toString()}`);
}

1. query({name:'djlee',address:'suwon'})
"name=djlee&address=suwon"
2. query({name:'djlee',address:'suwon',phone:undefined})
"name=djlee&address=suwon"
3. query({name:'djlee',address:'suwon',phone:'010-1234-1234'})
"name=djlee&address=suwon&phone=010-1234-1234"

URLSearchParams에 대한 다양한 사용법은 MDN URLSearchParams 에서 볼 수 있다.

결론

최신의 방법을 사용하는게 좋은 것 같다.
이 URLSearchParams는 explorer를 제외한 나머지 브라우저에서는 전부 호환이 된다.
explorer가 종료를 발표하지 않았다면 아마 범용성을 고려해서 사용못했던 사람도 있을 수도 있다고 본다.

멈추지말고 계속 공부해보는 습관을 가져야 겠다.