본문 바로가기
Typescript

Map 자료구조를 사용하는 방법

by shinbian11 2022. 11. 5.

회사에서 Map 자료구조를 사용할 기회가 있어서 사용해보았습니다.

 

불필요한 연산을 피하는데 중요한 역할을 하는 것 같아, 잊어먹고 싶지 않아 정리하려고 합니다.

 

(아래 예시는 회사에서 만든 코드가 아닙니다. 그저 예시일 뿐입니다.)


3개의 영어 이니셜을 이어서 하나의 영어이름으로 만드는 예시 코드입니다.

 

const nameInitialMap : Map<string, string> = new Map();

const nameInitialItems = [
	{first : 'K', second : 'J', third : 'H'},
	{first : 'J', second : 'S', third : 'K'},
	{first : 'P', second : 'S', third : 'S'},
	{first : 'L', second : 'J', third : 'S'},
	{first : 'S', second : 'H', third : 'M'},
	{first : 'Y', second : 'J', third : 'K'},
	{first : 'L', second : 'J', third : 'S'}, // 중복된 아이템. 값을 맵에서 바로 가져오면 됨
	{first : 'Y', second : 'J', third : 'K'}, // 중복된 아이템. 값을 맵에서 바로 가져오면 됨
	{first : 'P', second : 'S', third : 'S'}, // 중복된 아이템. 값을 맵에서 바로 가져오면 됨 
]

nameInitialItems.forEach((nameInitialItem, index) => {

	const {first, second, third} = nameInitialItem;
    
	const nameInitialKey = `${first}-${second}-${third}`; // 키를 만듦

	// 맵에 없는 정보라면, 값을 만들어서 (키, 값)을 맵에 저장함
	if(!nameInitialMap.has(nameInitialKey)){ 
		const nameInitialValue = `Your Name Initial is ${first}${second}${third}`;
        
		nameInitialMap.set(nameInitialKey, nameInitialValue); // set을 이용하여 맵에 저장
	} else {
		// 맵에 이미 있는 정보라면, 있다는 메세지를 콘솔에 출력
		console.log(`${index+1}번째 아이템은 이미 Map에 존재하는 아이템 입니다. Map에 저장된 것을 바로 사용하겠습니다.`);
	}

	console.log(nameInitialMap.get(nameInitialKey)); // 키를 이용하여 get으로 맵에서 값을 조회함
})

세 개의 영어 글자는 하나의 객체로 묶여있고, 세 개의 영어 글자가 중복된 경우엔 맵에서 가져오도록 만들었습니다.

 

물론, 위 코드에서 nameInitialValue를 만드는 작업은 매우 간단하기 때문에 굳이 맵을 사용할 필요는 없습니다.

 

하지만 이는 예시일뿐이고, 만약 nameInitialValue를 만드는 것이 아닌 매우 복잡한 함수를 호출해야 한다면 맵을 사용하는 것이 큰 도움이 될 수 있습니다.

 

중복된 입력이 들어올때마다 함수를 호출하는 것은 비효율적이니까요.

이미 예전에 반환된 결과값을 어딘가에다 저장해놨다가, 그것을 사용하는 것이 더 효율적입니다.


참고

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Keyed_collections

 

키기반의 컬렉션 - JavaScript | MDN

이번 장에서는 입력된 키값을 기준으로 정렬되는 데이터의 집합(자료 구조)에 대해 소개 할 것이다. Map과 Set은 입력된 순서대로 반복적으로 접근 가능한 요소들을 포함하고 있다.

developer.mozilla.org

https://ko.javascript.info/map-set

 

맵과 셋

 

ko.javascript.info