프론트엔드 첫걸음

URLSearchParams, URL 차이 본문

개발 공부/Javascript

URLSearchParams, URL 차이

차정 2024. 2. 2. 11:39

URLSearchParams 객체와 URL 객체는 JavaScript에서 URL과 관련된 작업을 수행하는 데 사용되는 두 가지 다른 객체입니다. 각각의 주요 목적과 차이점은 다음과 같습니다:

URL 객체:

      • URL 객체는 URL을 파싱하고, 생성하며, 조작하는 데 사용됩니다.
      • URL의 다양한 구성 요소(프로토콜, 호스트, 경로 등)에 접근할 수 있습니다.
      • 주로 웹 주소를 다룰 때 사용됩니다
const urlObject = new URL('https://example.com/path?param1=value1&param2=value2');

console.log(urlObject.protocol); // Output: "https:"
console.log(urlObject.host);     // Output: "example.com"

 

 

URLSearchParams 객체:

    • URLSearchParams 객체는 URL 쿼리 매개변수를 처리하는 데 사용됩니다.
    • 쿼리 매개변수를 추가, 제거, 가져오기 및 조작할 수 있는 메서드를 제공합니다.
    • 일반적으로 쿼리 문자열을 다룰 때 사용됩니다.
const params = new URLSearchParams('param1=value1&param2=value2');

params.append('param3', 'value3');
console.log(params.toString()); // Output: "param1=value1&param2=value2&param3=value3"

 

 

따라서, URL을 파싱하고 조작해야 할 때는 URL 객체를 사용하고, 단순히 URL의 쿼리 매개변수를 처리해야 할 때는 URLSearchParams 객체를 사용하는 것이 적절합니다. 두 객체는 서로 보완적으로 사용되어 웹 개발에서 URL과 관련된 작업을 쉽게 수행할 수 있게 합니다.