JavaScript Map 구현과 URL 파라미터 파싱 - ES5 시대의 방법

원본 작성일: 2014년경
보완 작성일: 2026.02.14

jQuery만 쓰고 프레임워크 없이 HTML + JavaScript로 개발하던 시절, Java의 Map 같은 자료구조가 필요해서 직접 구현한 코드다. URL의 GET 파라미터를 파싱해서 Map에 담아두고 꺼내 쓰는 패턴이었다.

2026년 기준: ES6부터 Map 객체와 URLSearchParams가 내장되어 있다. 신규 코드에서는 직접 구현할 필요가 없다. 아래는 레거시 코드 이해용 + 현대적 대안을 함께 정리한 것이다.

커스텀 Map 구현 (ES5)

function Map() {
    this.map = {};
}

Map.prototype = {
    put: function(key, value) {
        this.map[key] = value != null ? value.toString() : '';
    },
    get: function(key) {
        return this.map[key];
    },
    containsKey: function(key) {
        return key in this.map;
    },
    containsValue: function(value) {
        for (var prop in this.map) {
            if (this.map[prop] === value) return true;
        }
        return false;
    },
    remove: function(key) {
        delete this.map[key];
    },
    keys: function() {
        return Object.keys(this.map);
    },
    values: function() {
        var values = [];
        for (var prop in this.map) {
            values.push(this.map[prop]);
        }
        return values;
    },
    size: function() {
        return Object.keys(this.map).length;
    },
    isEmpty: function() {
        return this.size() === 0;
    },
    clear: function() {
        this.map = {};
    }
};

Java의 HashMap과 비슷한 인터페이스를 흉내낸 것이다. 내부적으로는 일반 Object를 사용한다.

URL 파라미터 파싱

?page=1&keyword=test 같은 쿼리스트링을 Map에 담는 함수다.

function getParameter() {
    var map = new Map();
    var query = location.search.substring(1);  // "?" 제거

    if (query.length > 0) {
        var pairs = query.split('&');
        for (var i = 0; i < pairs.length; i++) {
            var pair = pairs[i].split('=');
            var key = pair[0];
            var value = decodeURIComponent(pair[1] || '');
            map.put(key, value);
        }
    }
    return map;
}

// 사용
var params = getParameter();
var page = params.get('page') || '1';

ES6 Map - 내장 자료구조

const map = new Map();
map.set('page', '1');
map.set('keyword', 'test');

map.get('page');        // "1"
map.has('keyword');     // true
map.size;               // 2
map.delete('keyword');

// 순회
map.forEach((value, key) => {
    console.log(key, value);
});

ES6 Map은 키 타입에 제한이 없다 (Object는 문자열 키만 가능). 순서도 보장된다.

URLSearchParams - URL 파라미터 전용

// 현재 URL의 파라미터 파싱
const params = new URLSearchParams(location.search);

params.get('page');      // "1"
params.has('keyword');   // true

// 모든 파라미터 순회
params.forEach((value, key) => {
    console.log(key, value);
});

// 파라미터 조작
params.set('page', '2');
params.append('sort', 'date');
params.toString();  // "page=2&keyword=test&sort=date"

비교

항목	커스텀 Map (2014)	ES6 Map	URLSearchParams
용도	범용 key-value	범용 key-value	URL 파라미터 전용
키 타입	문자열만	모든 타입	문자열만
IE 지원	O	11 (부분)	X
추천	레거시 유지보수	범용	URL 파라미터