Map은 왜 쓰는지에 대한 기본적인 설명

🗺️ 맵(Map) 자료형 완벽 정리

==1. 📌 맵] 기본 개념==

• 키-값 쌍을 저장하는 자료구조로, 객체와 유사
• ==키==에 모든 타입 허용 (객체는 문자열만 가능)

2. 🗝️ 맵(Map) 주요 특징

2.1. ➡️ 입력 순서 유지

– 먼저 삽입된 요소가 먼저 순회되도록 보장

2.2. 🚀 성능(Performance)

– 요소 조회/추가/삭제 시 특정 경우 객체보다 우수한 성능

2.3. 📏 사이즈 확인

– ==size 속성으로 즉시 확인 가능
– 객체는 별도 키 추출 후 길이 계산 필요==

let myMap = new Map();
console.log(myMap.size); // 0
 
myMap.set('key', 'value');
console.log(myMap.size); // 1

3. 💻 맵(Map) 활용 예시

3.1. 💾 유저 정보 캐싱

• ==Map==을 활용하여 유저 정보를 캐싱하고, ID를 키로 사용

const userCache = new Map();
 
function getUser(userId) {
  if (userCache.has(userId)) {
    return userCache.get(userId); // 캐싱된 정보 반환
  }
 
  // 패칭 로직 (예: API 호출)
  const userInfo = fetchUserFromAPI(userId);
  userCache.set(userId, userInfo); // 캐싱 저장
  return userInfo;
}

3.2. 📰 아티클/댓글 캐싱

• 순서대로 데이터를 관리해야 할 때 유용
• 선입선출(FIFO) 방식 구현에 적합

4. 🧩 맵(Map) 고급 활용: 복잡한 구조 표현

4.1. 🗺️ 지역 정보 관리

• 객체를 키로 사용하여 특정 좌표에 빌딩 정보 연결
• 동일 좌표에 여러 빌딩이 중복되는 것을 방지 (참조 무결성)

const locationA = { x: 10, y: 20 };
const buildingA = { name: "A빌딩" };
 
const locationInfo = new Map();
locationInfo.set(locationA, buildingA); // 좌표 객체를 키로 사용

4.2. 🧮 다양한 데이터 타입 활용

– 숫자, 배열, 객체 등 모든 타입 키로 사용 가능

const locationInfo = new Map();
locationInfo.set(2, "B"); // 숫자 키
locationInfo.set([1, 2], "C"); // 배열 키

5. 📈 맵(Map)의 장점

• 키를 자유롭게 설정 가능
• 사이즈 즉시 확인 가능
• 대용량 데이터 처리 시 잠재적 성능 이점

6. 🤔 결론

• 객체 외에 맵(Map)을 사용하는 것이 유리한 구조가 존재
• 키를 자유롭게 설정해야 할 때
• 사이즈를 즉시 확인해야 할 때
• 대용량 데이터 처리 시 성능 이점을 활용하고 싶을 때

대본

안녕하세요. 환사훈입니다. 간만에 제가 하기로 했던 데이터 타입, 기본형 데이터 타입, 뚝배이 부서 버리는 걸로 돌아왔습니다. 요번 주제는 바로 맵입니다. 맵이 그래도 프로덕션에서 많이 사용되는 타입이에요. 상대적으로 다른 좀 마이너한 친구들보다는 많이 사용되는 편이긴 합니다. 그래서 제 생각에는 실제 서비스에서 제일 많이 사용되는게 오브젝트가 거의 1티어고 그다음이 그리고 그다음 뭐 하자면 이제 맵 정도가 되지 않을까 요런 느낌으로 되는데 일단은 맵에 간단한 아마 모르시는 분들이 많을 것 같아서 기본적인 개념 먼저 설명을 드릴게요.이 맵은 어 키하고 값을 저장한다.이 이 점은 오브젝트 객체와 유사합니다. 객체와 유사를 하지만은 여기서 특징 중에 하나는 키가 뭐든 된다는 거예요. 어떤 타입이든. 객체는 언제나 키가 문자열로 들어가야 되잖아요. 예를 들면 뭐 이런 식으로이 키라고 하는게 언제나 문자열 형태로 들어가고이 부분이 이제 밸류 형태로 들어가고 하는데 이게 이제 객체죠. 근데 객체가 아닌 맵은 여기에 그냥 아무거나 다 됩니다. 아무거나 아무거나 말 그대로 말 그대로 다 된다. 일단 요거에 대해선 좀 나중에 더 설명을 하고요. 두 번째 특징은 뭐냐? 입력 순서가 유지된다. 예를 들어서 이제 객체를 순환을 해야 될 때 보통 어떻게 하나? 이제 오브젝트 키스를 한 다음에 그 오브젝트 키스에 들어가는 겟에 대해서 어레이드를 도는 그런 방식으로 구현을 하거나 아니면 이것을 한 다음에 오브젝트 키를 하고서 요거를 이게 배열을 반환하니까이 반환된 배열에 대해서 뭐 맵이나 포리치 함수를 돌리거나 하는 방식을 사용을 하실 겁니다. 네 뭐 이렇게 됐을 때 객체는 우리가 의도했던 것과 순서가 언제나 일치하지 않을 수가 있어요. 이거는 맵은 입력 순서가 유지가 됩니다. 어떤 식으로 유지가 되냐? 먼저 입력된 먼저 삽입된 먼저 삽입된게 이제 먼저 순해하면서 리턴되는 그런게 보장이 됩니다. 그러다 보니까 어 순서를 반환을 받아야 되는 형태의 객체에서도 사용이 유리하겠죠. 굳이 꼭 객체를 쓸 이유가 없겠죠. 그런 경우에 대해서는. 그러다 보니까 맵에 이점이 또 하나 나오고요. 세 번째는 이제 속도입니다. 속도 퍼포먼스. 이제 요소를 이제 조회하거나 어 추가하거나 삭제하거나 이럴 때 특정 경우에 더 좋은 퍼포먼스를 더 좋은 퍼포먼스가 나오는 경우가 있습니다. 그래서 속도에서도이 점이 있을 수 있다. 그리고 이제 사이즈 확인.이 사이즈가 바로 조회가 돼요. 그래서 어떻게 할 수 있냐? 코드로 해 볼까요? 뉴맵 하고서 사이즈라고 하면은 돼요. 사이즈 뒤에 이렇게 그냥 사이즈 넣어 버리면은 됩니다. 그러면은 요거의 사이즈가 바로 반환이 되는 그런 방식이에요. 그래서 만약에 제가 이렇게 맵에서 셋 영역을 해 가지고 키 밸류가 하나 늘어났다 그러면은 지금이 맵에는 사이즈가 변경이 됐겠죠. 그래서 요거를 이렇게 한번 실행을 해 보면은 요거는 당연히 1이 나오게 될 거예요. 네. 이런 식으로 이제 사이즈가 직각적으로 돼요. 근데 반면에 오브젝트는 어떻게 할 수 있을까요? 사이즈를 할 때 뭐 키를 추출한 다음에 그 키에 대해서 랭스를 타겟 오브젝트가 있으면은 그거에 대해서 랭스를 바꾸는 형태로 다시 하는 이런 추가적인 노력이 필요하겠죠. 이런 경우가 방지가 된다. 그리고 그 밖에도 뭐 메서드들이 있는데 오젝트에도 메서드는 있으니까 뭐 메서드적인 측면에서는 큰 뭐 그냥저냥 뭐 괜찮다. 그렇게 말씀을 드릴 수 있겠습니다. 네. 그리고 이제 실제 생 실제 사용 예시를 한번 사용 보죠. 실제 사용 예시에서 그냥 객체랑 거의 유사하게 사용하셔도 큰 문제가 없어요. 만약에 이제 여러분들이음 유저 정보 이런 유저 정보를 캐싱을 해 두고 싶다. 그럴 때 이제 컨스트 유저 캐싱이라고 했을 때 뉴맵 이렇게 선언을 하고요. 그리고 펑션에서겟 유저 해서 유저 아이디 이렇게 받아오고 그리고이 상태에서이 상태에서 이미 유저 아이디가 있는 경우면은 그냥 캐싱해서 바로 리턴을 해 주는 거예요. 이런 식으로 이렇게 유저 캐싱이 캐싱된 여러 명의 유저들을 캐싱을 할 수 있는 그런 맵 객체가 여기 있는 거죠. 그래서이 맵 안에다가 넣어 놨기 때문에 유저 아이디가 있으면은 바로 그냥 개수로 리턴해 주면 됩니다. 비슷한 예로 이거를 이제 아르티클로 변경할 수도 있겠죠. 예를 들면 여러분들이 뭐 아티클이나 아니면은 뭐 댓글 같은 거 코멘트 캐싱에도 사용을 하실 수가 있고요. 여러 가지로 다 쓸 수가 있습니다. 이런 식으로 다 사용을 하실 수가 있다. 그래서 윗단에서이 캐싱 처리가 됐고요. 그리고 이제 패칭 없는 경우에는 패칭한 다음에 이제 셋으로 저장해 주면 됩니다. 그리고 좋은 점은 이제 셋에서 아까 말했죠.이 이 맵은 입출력에서 순서를 저장해 두기 때문에 순서에 따라서 순해하기 때문에 먼저 들어간 거, 먼저 들어간게 먼저 나오는 그런 선입 선출이 되기 때문에 요렇게 구조를 잡아 짜면은 상당히 어 좋을 것이다. 이런 식으로 소프트하게 쓰시면 돼요. 요렇게 이제 소프트하게 사용을 하시면 되고 그 밖에도 또 뭐가 있을까요? 여기서부터 독특한 사용법을 이제 보여 드리도록 할게요. 이제 복잡한 구조입니다. 복잡한 구조. 여러분들은 객체를 주로 사용하셔다 보니까 우리가 객체라고 하면 언제나 키가 문자열이잖아요.이 문자열에 대응되는 어 값 또는 뭐 함수 이런 식으로 객체를 사용을 하셨을 텐데 한번 요런 건 어떤 느낌일까 한번 여러분들이 느껴 보셨으면 좋겠어요.이 지역 정보를 갖고 있는 거를 제가 맵을 한번 해 보도록 하겠습니다. 로케이션 A라고 하는 지점을 제가 선언을 했어요.이 로케이션 A는 이제 X는 10 그리고 이제 Y는 20인 그런 좌표입니다.이 좌표가 갖고 있는 정보를에이 로케이션 A에 정보를 좀 넣어 주고 싶어요. A 빌딩이라고 하는 걸 넣어 주고 싶습니다. 그래서 이름은 A빌드. 그럼 이것도 객체, 이것도 객체니까 어, 이거의 연관성을 어떻게 만들까 해서 보통은 요런 식으로이 로케이션 하고 요렇게 하면은 연관성이 생기겠죠. 근데 맵을 쓰면은 유니크하게 관리가 될 수 있어요. 어떻게 관리가 될 수 있냐?이 이 부분을 제가 좀 줄여 놓을게요.이 부분을 셋 로케이션 A에다가 A 빌딩 이런 식으로 이거 자체를 키로 넣은 거예요.이 객체 자체를 x 좌표 y 좌표를 갖고 있는 어떤 지점을 지도상의 어떤 지점에 대해서 요렇게 빌딩이라고 하는 값을 넣어 놓은 겁니다. 이런 식으로 하면 장점이 뭐가 있을까요? 만약에 A 좌표에 두 개 이상의 빌딩이 들어갈 수 있을까요? 만약에 B 빌딩 이런 식으로 하게 되면은 이건 덮어 쓰기가 되니까 이제 A 빌딩은 로케이션 A에 존재할 수가 없죠. 정합성을 만들 수가 있어요.이 키값에 대해서 지도상에서 동일한 위치에 두 개가 동시에 위치하는 건 말이 안 되잖아요. 그죠? 이런 경우를 이렇게 구현을 할 수가 있는 겁니다. 만약에 이거를 B빌딩이라고 해 가지고 컨스트 B빌딩 하고서 여기도 이제 로케이션을 이렇게 로케이션 A, 여기도 로케이션 A 식으로 하게 되면은 이렇게 객체를 하게 되면 이제 참조값이 이상해지는 상황이 오겠죠. 근데 이렇게 하게 되면은 하나의 좌표에 대해서는 언제나 하나의 빌딩만 선언이 되니까 바인딩이 되니까 참조 무결성이 생길 수 있는 그런 구조가 되는 겁니다. 꽤 흥미로운 접근이죠. 이제 기존에는 이런 식으로 키에다가 객체를 넣는거나 아니면은 뭐 다른 형태를 넣는게 익숙하지 않으셨을 수 있어요. 또 한 가지는 여기에 아무거나 다 된다는 특징을 이용하는 거예요. 물론 객체에도 뭐 숫자 1 이런 식으로 해서 넣을 수가 있기는 하죠. 근데 이건 어쨌든 문자열입니다. 이렇게 하면은 이거는 사실은 숫자는 아니에. 이렇게 문자열로 어 작동이 되는 거거든요. 근데이 로케이션 인포라고 하는 맵을 사용하면은 맵 자료형을 사용하면은 안에다가 아무거나 다 넣을 수 있습니다. 그래서 셋해서 2 그리고 2는 B 이런 식으로 숫자도 원본을 살려 가지고 원본을 살려서 넣어 줄 수가 있다는 거예요. 원본을 이런 것도 충분히 강점으로 활용될 여지가 있겠죠. 그래서 여기 안에 뭐 이런 식으로도 로케이션 A 해서 객체로 넣을 수도 있지만은 배열 형태로도 이런 식으로 넣을 수도 있을 겁니다. 그래서 A라고 하는 거를 이렇게 셋 해 가지고 로케이션 인포 A라고 해서이 AA라고 한 거에다가 뭐 A빌딩 이렇게 연결을 해서 데이터를 삽입시켜 주는 방법도 있을 거예요. 키값에다가 이런 배열 배열 형태 또는 더 깊은 배열도 가능하겠죠. 이렇게 이중으로 된 요런 값들. 그래서이 수학적인 연산 또는 좌표 이런 식으로 그냥 객체를 사용했을 때는 한계가 있는 경우를 뛰어넘을 수가 있어요. 그럴 때 이제 맵의 강점이 발휘가 됩니다. 그래서 이런 경우들이 물론 일반적으로는 안 쓰고도 객체나 배열이나 뭐 다 해 가지고 사용을 하는데 무관하겠죠. 무관하지만 그런 특징이 있고 그리고 맵이 아까 전에 설명드렸던 사이즈를 바로 리턴 받을 수 있다. 이런 특징들.이 이 사이즈를 바로 리턴 받을 수 있기 때문에 데이터가 큰 것들을 처리할 때 매우 좋다고 생각해요. 매우 좋다. 좌표값들을 여러 개를 갖고 있는 엄청나게 큰 지도에 있는 좌표 데이터 좌표에마다 정보를 저장해야 된다든지 하는 그런 구조에서이 해당 데이터의 사이즈를 바로 리턴 받을 수 있고 그리고 데이터가 커지면 커질수록 맵의 강점이 성능상의 강 잠재적 이점들이 발휘가 됩니다. 물론 보편적으로론 객체를 쓰는게 맞고 근데 맵을 쓸 때가 좋은 구조가 분명히 있다. 그게 이제 키를 자유롭게 설정할 때 키를 꼭 문자열로만 하지 않고 이런 배열 또는 뭐 객체, 심볼 뭐 여러 가지 아무거나 다릅니다. 그냥 숫자 이런 거 다 됩니다. 이제 원본, 원시적인 자료형을 다 남기면서 작동을 할 수 있어서 이런 것들을 활용해야 될 때는 맵을 사용하시면