url 쿼리값 객채로 만들기 (dom 이용)

URLSearchParams 메소드는 url의 쿼리 스트링 문자열을 받아 파싱하여 iterable한 인스턴스를 반환한다.

즉 아래와 같이 사용 가능하다.

const urlSearchParams = new URLSearchParams('?q=aa&s=bb');
urlSearchParams.get('q'); // aa
urlSearchParams.has('q'); // true

urlSearchParams.append('t', 'ccc')
urlSearchParams.get('t') // ccc

urlSearchParams.delete('t')
urlSearchParams.get('t') // null

 

이를 응용하여 url 쿼리의 key value를 가지고 있는 객채를 아래와 같이 생성할 수 있다.

const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());

Object.fromEntries() 는 key-value 쌍의 목록을 객체로 바꿔주는 메소드이다.