내장 지도 객체

지도

지도 객체는 JavaScript ES6 버전에서 도입된 JavaScript 내장 객체입니다. 맵 객체는 키-값 쌍의 컬렉션을 보유하고 키 또는 값이 모든 데이터 유형(객체 및 기본 값 모두)일 수 있는 키의 원래 삽입 순서를 기억하는 데 사용됩니다.

지도 개체 만들기

자바스크립트 지도 객체는 두 가지 방법으로 만들 수 있습니다.

배열을 new Map()에 전달

지도 개체를 만들고 사용Map.set()

새 맵() 사용

JavaScript 맵 객체를 만들려면 배열을 new Map() 생성자에 전달해야 합니다. 예를 들어,

// creating a Map object
const colors = new Map([
    ["red", 120],
    ["green", 90],
    ["blue", 180]
]);

// to access value of a key
console.log(colors.get("green")); // output: 90

여기서 우리는 생성자 즉 new Map() 에 배열을 전달하고 있습니다.

Map.set() 사용

JavaScript 지도 객체를 만드는 또 다른 방법은 new Map() 생성자를 사용하여 지도 객체를 만든 다음 Map.set() 메서드를 사용하여 요소를 추가하는 것입니다. 예를 들어,

// creating a Map object
const colors = new Map();

// adding key-value pairs
colors.set("red", 120);
colors.set("green", 90);
colors.set("blue", 180);

// to access  value of a key
console.log(colors.get("green")); // output: 90

Map.set() 메소드는 두 개의 매개변수를 가져옵니다. 첫 번째는 키이고 두 번째는 값입니다. Map.set() 메서드를 사용하여 기존 요소를 업데이트할 수도 있습니다. 예를 들어,

// creating a Map object
const colors = new Map();

// adding key-value pairs
colors.set("red", 120);
colors.set("green", 90);
colors.set("blue", 180);

// updating element
colors.set("green", 220);

// to access value of a key
console.log(colors.get("green")); // output: 220

개체 속성 가져오기

Map 개체에서 값을 검색하려면 Map.get() 메서드를 사용해야 합니다.

// creating a Map object
const colors = new Map();

// adding key-value pairs
colors.set("red", 120);
colors.set("green", 90);
colors.set("blue", 180);

// to access value of a key
console.log(colors.get("green")); // output: 90

Map 개체의 키를 Map.get() 메서드에 전달해야 하며 그 대가로 해당 키와 관련된 값을 제공합니다.

개체 크기 가져오기

Map.size 속성은 객체의 크기를 반환합니다. 예를 들어,

// creating a Map object
const colors = new Map();

// adding key-value pairs
colors.set("red", 120);
colors.set("green", 90);
colors.set("blue", 180);

// get size of object
console.log(colors.size); // output: 3

Map.size는 속성이므로 아무 것도 전달할 필요가 없습니다.

개체 속성 삭제

Map.delete() 메서드는 지도 개체에서 요소를 삭제하는 데 사용됩니다. 속성의 키를 Map.delete() 메서드에 전달하기만 하면 됩니다. 예를 들어,

// creating a Map object
const colors = new Map();

// adding key-value pairs
colors.set("red", 120);
colors.set("green", 90);
colors.set("blue", 180);

// deleting property
colors.delete("green");

// accessing the property
console.log(colors.get("green")); // output: undefined

모든 개체 속성을 삭제하려면 개체를 비우는 Map.clear() 메서드를 사용할 수 있습니다. 예를 들어,

// creating a Map object
const colors = new Map();

// adding key-value pairs
colors.set("red", 120);
colors.set("green", 90);
colors.set("blue", 180);

// deleting all properties
colors.clear();

// get size of object
console.log(colors.size); // output: 0

존재 확인

요소가 개체에 있는지 여부를 확인하려면 요소의 키를 사용하는 Map.has() 메서드를 사용할 수 있습니다. 출력은 true 또는 false입니다. 예를 들어,

// creating a Map object
const colors = new Map();

// adding key-value pairs
colors.set("red", 120);
colors.set("green", 90);
colors.set("blue", 180);

// checking existence
console.log(colors.has("green")); // output: true

forEach()로 지도 반복하기

지도 개체는 Map.forEach() 메서드를 사용하여 반복할 수 있습니다. Map.forEach() 맵의 각 키/값 쌍에 대한 콜백을 호출합니다. 예를 들어,

// creating a Map object
const colors = new Map();

// adding key-value pairs
colors.set("red", 120);
colors.set("green", 90);
colors.set("blue", 180);

// iterating over map
colors.forEach((value, key) => {
  console.log(`${key} = ${value}`);
});

// output:
// red = 120
// green = 90
// blue = 180

마무리!

이 게시물의 전부입니다. 읽어 주셔서 감사합니다. 다음에 또 봐.


💻 행복한 코딩

모아잠 알리 팔로우

Frontend Developer • Creative Web Developer • Opensource Dev