[JavaScript] JavaScript에서 Map과 Object | 민민의 하드디스크 - 티스토리

JavaScript에서 사용하는 자료구조 Map과 Object

 

두 자료구조는 목적과 사용 방식에 차이가 있습니다.

예를 들어,

물건 창고를 상상해보세요. 그리고 그 창고 안에는 다양한 물건들이 쌓여있다고 상상해보죠. 이때 map과 object는 두 가지 다른 방식으로 물건을 분류하고 관리하는 방법을 나타냅니다.

map은 창고의 관리자가 주어진 물건에 대해 레이블을 붙이는 방식으로 동작합니다. 예를 들어, 빨간색 상자 안에는 사과, 파란색 상자 안에는 파란색 연필, 노란색 상자 안에는 노란색 휴대폰과 같이 특정 키에 연결된 값을 저장합니다. 이렇게 키-값 쌍을 이용하여 데이터를 저장하고 조회할 수 있습니다. 키를 통해 해당하는 값을 찾아내거나 업데이트할 수 있어요. 또한, map은 데이터의 순서가 보장되지 않으며, 동일한 키를 가진 항목은 허용되지 않습니다.

반면 object는 창고 안의 물건들을 이름표를 붙이는 방식으로 관리합니다. 물건마다 고유한 이름표(프로퍼티)를 부여하고 그에 해당하는 값을 저장합니다. 예를 들어, "apple"이라는 이름표에는 사과, "bluePencil"이라는 이름표에는 파란색 연필과 같이 프로퍼티와 그에 연결된 값을 가지고 있습니다. 이렇게 이름표를 사용하여 데이터에 접근하고 업데이트할 수 있습니다. 객체는 프로퍼티를 통해 값을 가져오거나 변경할 수 있고, 객체의 프로퍼티 개수를 확인할 수 있습니다.

창고를 관리하면서 map을 사용하면 키-값 쌍으로 물건을 구분하고 조회하며, object를 사용하면 이름표로 물건을 식별하고 접근합니다. 이러한 방식을 통해 map과 object는 데이터를 구조화하고 관리하는 데 유용한 도구가 됩니다.

 

목적과  사용방식

목적

1. Map

키-값 쌍으로 이루어진 데이터를 저장하고 조회하는 데 사용됩니다. 특정 키에 연결된 값을 가져오거나 업데이트하는 등의 작업에 적합합니다. map은 순서가 보장되지 않으며, 키의 중복을 허용하지 않습니다.

2.Object

object는 속성-값 쌍으로 이루어진 데이터를 저장하고 객체의 상태와 동작을 표현하는 데 사용됩니다. 객체는 프로퍼티와 메서드를 가질 수 있으며, 자바스크립트에서는 객체 지향 프로그래밍의 기본 단위입니다.

사용방식

1. Map

Map은 일반적으로 반복문을 사용하여 데이터를 순회하고, 키에 대한 값을 가져오거나 업데이트하는 데 사용됩니다. map은 get(key), set(key, value), delete(key)와 같은 메서드를 제공하여 키-값 쌍을 다룹니다. key는 어떤 타입이든 사용이 가능합니다.

2. object

Object는 점 표기법이나 대괄호 표기법을 사용하여 프로퍼티에 접근하고 값을 가져오거나 업데이트하는 데 사용됩니다. 객체는 객체 리터럴 {}을 사용하여 생성하거나 생성자 함수, 클래스 등을 통해 생성할 수 있습니다. 객체는 프로퍼티에 접근하기 위해 .을 사용하거나 [ ] 안에 문자열 또는 변수를 사용합니다.

 

JavaScript 예시 코드

// Map
const map = new Map();
map.set("name", "John");
map.set("age", 30);

console.log(map.get("name"));  // "John"
console.log(map.size);         // 2

// Object
const obj = {
  name: "John",
  age: 30
};

console.log(obj.name);         // "John"
console.log(Object.keys(obj).length);  // 2

Map은 set() 메서드를 사용하여 키-값 쌍을 추가하고, get() 메서드를 사용하여 키에 해당하는 값을 가져옵니다. 

반면, 객체는 점 표기법을 사용하여 프로퍼티에 접근하고 값을 가져옵니다. 

또한, Object.keys() 메서드를 사용하여 객체의 키를 배열로 반환하고, 배열의 길이를 통해 객체의 프로퍼티 개수를 확인할 수 있습니다.