Hackforge Academy

Category: javascript

Handle query param in JavaScript

Published on 17 Jun 2026

Explanation

Get a single query parameter from the current URL using URLSearchParams.

Code:

const params = new URLSearchParams(
window.location.search);
const name = params.get('name');
console.log(name);

// URL: /index.html?name=Praveen
// Output: Praveen

Explanation

Get multiple query parameters from the URL.

Code:

const params = new URLSearchParams(
window.location.search);
const name = params.get('name');
const age = params.get('age');

console.log(name);
console.log(age);

// URL: /index.html?name=Praveen&age=33

Explanation

Check whether a query parameter exists.

Code:

const params = new URLSearchParams(
window.location.search);

if (params.has('name')) {
    console.log('Name parameter exists');
}

Explanation

Provide a default value when a query parameter is missing.

Code:

const params = new URLSearchParams(
window.location.search);
const name = params.get('name') || 'Guest';

console.log(name);

// URL: /index.html
// Output: Guest

Explanation

Convert all query parameters into a JavaScript object.

Code:

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

console.log(queryParams);

// URL: /index.html?name=Praveen&age=33
// Output: { name: 'Praveen', age: '33' }

๐Ÿš€ Learn Spring Boot with real-world projects

๐Ÿ’ก Build REST APIs step by step

๐Ÿง  Improve backend development skills

๐ŸŽฏ Get career-ready practical training

Join Our Free WhatsApp Community

Direct access to niche-specific mentors and peers on WhatsApp.

๐Ÿ

Python Community

Discuss Django, FastAPI, AI integration, and automation scripts with 15k+ developers.

Join Python Community
โš›๏ธ

React Community

Master Next.js, Framer Motion, and State Management. Share your latest UI components.

Join React Community
โ˜•

Java Community

Deep dives into Spring Boot, Microservices architecture, and high-performance backend ops.

Join Java Community