Map() 으로 임시 저장소 만들기

라디오 버튼으로 탭을 만들 때, html 요소의 값만 저장해서 변경할 수 있는 기능을 만들고 싶었다.

<div id="radioLabelBox">
        <input type="radio" class="imageTabRadio" id="imageTab1" name="imageTabs" value="1" checked>
        <label for="imageTab1" class="imageTabLabelL">
            이미지1
        </label>
        <input type="radio" class="imageTabRadio" id="imageTab2" name="imageTabs" value="2">
        <label for="imageTab2" class="imageTabLabelR">
            이미지2
        </label>
    </div>

    <select name="compName" id="companyName">
        <option value="default" selected>회사명 선택</option>
        <option value="a">
            a
        </option>
        <option value="b">
            b
        </option>
        <option value="c">
            c
        </option>
        <option value="d">
            d
        </option>
    </select>
    <textarea class="customerIntro" rows="3" name="customTextContent" id="customTextContent" maxlength="60" placeholder="Place Holder"></textarea>

let radioMap = new Map();
    radioMap.set(1, {
        companyNameIndex: 0,
        content: '',
        placeHolder: "Place Holder"
    });
    radioMap.set(2, {
        companyNameIndex: 0,
        content: '',
        placeHolder: "Place Holder"
    });

    let currentRadioValue = parseInt(document.querySelector('input[type="radio"][name="imageTabs"]:checked').value);

    const imageRadioTabs = document.querySelectorAll('input[type="radio"][name="imageTabs"]');
    imageRadioTabs.forEach(radio => {
        radio.addEventListener('change', function(e) {
            const beforeRadioValue = currentRadioValue;
            const beforeCompanyNameIndex = document.querySelector('#companyName').selectedIndex ?? '';
            const beforeContent = document.querySelector('#customTextContent').value ?? '';
            const beforePlaceHolder = document.querySelector('#customTextContent').placeHolder ?? '';
            radioMap.delete(beforeRadioValue);
            radioMap.set(beforeRadioValue, {
                companyNameIndex: beforeCompanyNameIndex,
                content: beforeContent,
                placeHolder: beforePlaceHolder
            });

            const radioElement = e.target;
            currentRadioValue = parseInt(e.target.value);

            const changedInfo = radioMap.get(currentRadioValue);
            document.querySelector('#companyName').selectedIndex = changedInfo.companyNameIndex;
            document.querySelector('#customTextContent').value = changedInfo.content;
            document.querySelector('#customTextContent').placeHolder = changedInfo.placeHolder ?? '';
        })
    })

 

1. 라디오 버튼을 클릭할 시 , 임의의 버튼을 특정하기 위해서 각 input에 value를 넣었다.

2. Map() 객체를 생성해서 input의 value와 동일한 데이터를 key 값으로 설정하고, 저장하고싶은 값들을 배열 안에 저장했다.

3. 이벤트 발생 시 , 현재 데이터를 배열 안에 저장하고 클릭된 요소의 데이터를 불러온다.

 

라디오 버튼을 누르면 해당 Map() 에 저장된 데이터를 불러온다.

 

Map() 이란?

key - value 쌍을 이루는 집합이다. 한 Map에는 오직 단 하나의 key만 존재하기 때문에 내부의 데이터들은 유일성을 가질 수 있다.

Map을 for 루프로 돌리면 [key, value] 로 이루어진 멤버가 2개인 배열을 반환하며 삽입된 순서대로 진행한다.

 

객체와 Map은 대체로 매우 유사하고, 몇 가지 차이점이 있다

 

1) 우발적 키

 - Map은 기본적으로 키를 포함하지 않고, 명시적으로 입력된 내용만 포함된다

 - Object는 프로토타입이 있기 때문에, 기본키와 자신의 키가 충돌할 수 있다.

 

2) 보안

 - Map은 사용자가 제공하는 키와 값에 대해서 안전하게 사용할 수 있다.

 - Object는 사용자가 제공한 key-value 쌍을 Object에 설정하면 공격자가 객체의 프로토타입을 재정의하여 객체 주입 공격을 발생시킨 수 있다. ( 이는 null 프로토타입 객체를 사용해서 문제를 해결할 수 있다 )

 

3) key 유형

 - Map은 모든 값이 key가 될 수 있다. (함수, 객체, 원시값 포함)

 - Object의 key는 String 또는 Symbol 이어야한다.

 

->   Map은 값의 추가와 제거가 빈번한 상황에서 이용하기 좋고, Object는 튼튼하게 관리된 시스템을 구현하기에 좋다.