# URLSearchParams()

url에 전달된 주소를 url.search를 통해 params라는 변수로 검색한다.
예시는 다음과 같다.

const url = new URL('https://example.com?foo=1&bar=2');
const params = new URLSearchParams(url.search);

// 문자열 리터럴을 전달합니다.
const params2 = new URLSearchParams("foo=1&bar=2");
const params2a = new URLSearchParams("?foo=1&bar=2");

// 일련의 쌍으로 전달합니다.
const params3 = new URLSearchParams([["foo", "1"], ["bar", "2"]]);

// 레코드로 전달합니다.
const params4 = new URLSearchParams({"foo": "1", "bar": "2"});

현재 프로젝트에서 소셜로그인시 params로 전달 받는 code를 다음과 같이 처리해 주었다.

    const query = new URLSearchParams(location.search);
    getAccessToken(query.get('code'));

location.search는 url의 params 문자열 리터럴로 반환한다.
여기에 URLSearchParams에 다양한 메소드를 적용하여 원하는 파라미터를 가져올 수 있다.
예시는 다음과 같다.

url3.searchParams.get('hello'); // zerocho
url3.searchParams.getAll('hi'); // ['world', 'js']
url3.searchParams.append('bye', 'java');
url3.search; // ?hello=zerocho&hi=world&hi=js&bye=java
url3.searchParams.append('bye', 'ruby');
url3.search; // ?hello=zerocho&hi=world&hi=js&bye=java&bye=ruby
url3.searchParams.set('bye', 'python');
url3.search; // ?hello=zerocho&hi=world&hi=js&bye=python
url3.searchParams.delete('bye');
url3.search; // ?hello=zerocho&hi=world&hi=js

###### tags: `tech sharing`