Vue3 computed 적절한 사용 방법과 watch와 차이점

by JerryChu

1. Map 이란 무엇인가요?

JavaScript의 맵 객체는 키-값 쌍의 모음으로, 키는 객체나 함수 등 모든 유형이 될 수 있습니다. 맵 객체를 사용하면 연결된 키를 기반으로 값을 효율적으로 저장하고 검색할 수 있습니다.

맵 객체는 데이터 관계를 관리하고 특정 키와 연관된 값을 추가, 제거 또는 업데이트하는 등의 일반적인 작업을 수행하는 간단하고 직관적인 방법을 제공합니다.

2. Map 만들어보기

const map = new Map();

위 코드에서는 map이라는 이름의 새 Map 객체를 만듭니다. 처음에 이 Map 객체는 키-값 쌍이 없는 비어 있습니다.

또는 생성하는 동안 키-값 쌍의 배열로 Map 객체를 초기화할 수 있습니다.

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3'],
]);

위 코드에서는 세 개의 키-값 쌍이 있는 Map 객체 맵을 만듭니다. 키는 'key1', 'key2', 'key3'이며 해당 값은 각각 'value1', 'value2', 'value3'입니다.

3. 맵 객체로 작업하기

맵 개체가 생성되면 맵 프로토타입에서 제공하는 다양한 메서드를 사용하여 콘텐츠를 조작할 수 있습니다. 몇 가지 일반적인 작업을 살펴보겠습니다.

1) 키-값 쌍 추가 및 업데이트하기

맵 객체에서 특정 키와 연결된 값을 추가하거나 업데이트하려면 set() 메서드를 사용할 수 있습니다.

const map = new Map();

map.set('key1', 'value1');
map.set('key2', 'value2');

console.log(map);
// Output: Map(2) {'key1' => 'value1', 'key2' => 'value2'}

위 코드에서는 맵 객체 맵에 두 개의 키-값 쌍을 추가합니다. 첫 번째 쌍에는 키 'key1'과 값 'value1'이 있고, 두 번째 쌍에는 키 'key2'와 값 'value2'가 있습니다. 맵에 키가 이미 존재하는 경우 set() 메서드는 해당 값을 업데이트합니다.

const map = new Map();

map.set('key', 'value');
map.set('key', 'updated value');

console.log(map);
// Output: Map(1) {'key' => 'updated value'}

2) 값 검색하기

맵 객체에서 키를 기반으로 값을 검색하려면 get() 메서드를 사용하면 됩니다.

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
]);

const value = map.get('key1');
console.log(value); // Output: 'value1'

위 코드에서는 두 개의 키-값 쌍이 있는 Map 객체 맵을 생성합니다. 그런 다음 get() 메서드를 사용하여 키 'key1'과 연관된 값을 검색합니다.

3) 키 존재 여부 확인

맵 객체에 특정 키가 있는지 확인하려면 has() 메서드를 사용하면 됩니다.

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
]);

console.log(map.has('key1')); // Output: true
console.log(map.has('key3')); // Output: false

위 코드에서는 두 개의 키-값 쌍이 있는 Map 객체 맵을 만듭니다. 그런 다음 has() 메서드를 사용하여 키 'key1'과 'key3'의 존재를 확인합니다. 이 메서드는 맵에서 키가 발견되면 참을 반환하고, 그렇지 않으면 거짓을 반환합니다.

4) 키-값 쌍 제거하기

Map 객체에서 키-값 쌍을 제거하려면 delete() 메서드를 사용할 수 있습니다.

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
]);

map.delete('key1');

console.log(map);
// Output: Map(1) {'key2' => 'value2'}

위 코드에서는 두 개의 키-값 쌍이 있는 맵 객체 맵을 만듭니다. 그런 다음 delete() 메서드를 사용하여 'key1' 키가 있는 키-값 쌍을 제거합니다.

5) 맵의 크기 가져오기

Map 객체에서 키-값 쌍의 수를 확인하려면 size 속성을 사용하면 됩니다.

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
]);

console.log(map.size); // Output: 2

위 코드에서는 두 개의 키-값 쌍이 있는 Map 객체 맵을 만듭니다. 그런 다음 size 속성에 액세스하여 맵에서 쌍의 수를 검색합니다.

6) 맵과 표준 객체 비교

표준 JavaScript 객체(예: )가 키-값 저장에 일반적으로 사용되는 반면, Map 객체는 특정 시나리오에서 더 나은 선택이 될 수 있는 몇 가지 이점을 제공합니다:

유연한 키 유형: JavaScript 객체는 숫자, 문자열 또는 기호 키만 허용하는 반면, 맵 객체는 객체, 함수, 프리미티브 등 모든 데이터 유형을 키로 허용합니다.

삽입 순서 유지: 맵 객체는 키-값 쌍이 삽입될 때 키-값 쌍의 순서가 유지되는 반면, JavaScript 객체는 키의 순서를 보장하지 않습니다.

손쉬운 반복: 맵 객체에는 키-값 쌍을 반복하는 forEach() 및 entries() 등의 내장 메서드가 제공되므로 데이터 구조로 작업하기가 더 간단합니다.

효율적인 크기 검색: 맵 객체에는 전용 크기 속성이 있어 키-값 쌍의 수를 빠르게 검색할 수 있는 반면, JavaScript 객체는 정확한 개수를 반환하려면 수동으로 반복하거나 Object.keys() 메서드를 사용해야 합니다.

문자열 키와 간단한 키-값 연산만 필요한 경우에는 JavaScript 객체가 여전히 적합한 선택이 될 수 있습니다.

4. 결론

JavaScript의 맵 객체는 키-값 쌍을 저장하고 조작할 수 있는 강력하고 유연한 방법을 제공합니다. 다양한 키 유형을 처리하고, 삽입 순서를 유지하며, 편리한 반복 방법을 제공하는 맵 객체는 특정 사용 사례에서 일반 JavaScript 객체에 비해 이점을 제공합니다. 지도 객체를 만들고 작업하는 방법을 이해하면 개발자는 지도 객체의 기능을 활용하여 보다 표현력이 풍부하고 효율적인 코드를 작성할 수 있습니다.

https://www.telerik.com/blogs/javascript-map-object

loading...