티스토리 뷰

JavaScript

자바스크립트 Set & Map

IT Knowledge Share 2021. 9. 25. 18:30
반응형

자바스크립트 Set는 고유한 값의 모음입니다. 각 값은 Set에서 한 번만 발생할 수 있으며, 중복되지 않습니다.

 

1. Set 생성 방법 및 주요 메소드

 

새로운 Set을 만드려면, new Set( ) 키워드를 통해 생성자를 만들어서 가능합니다.

const names = new Set(["홍길동","아무개","철수"]);
console.log(names); // {'홍길동', '아무개', '철수'}

Set에서 사용되는 주요 메소드는 다음과 같습니다.

new Set() 새로운 Set 생성.
add() Set에 새로운 요소 추가.
delete() Set의 요소 제거.
has() Set에 필요한 값이 있다면 논리값 true를 반환.
forEach() Set의 각 요소에 대한 콜백 호출.
values() Set의 모든 요소를 지닌 새로운 반복자(Iterator) 객체를 반환.
반응형

특히, add( ) 메소드 사용 시, 동일한 값을 여러 번 추가할 수 없습니다. Set에는 중복되는 값이 오지 않기 때문입니다.

values( ) 메소드의 경우, Set의 모든 요소를 가진 새로운 객체를 반환시키고, 이 객체를 이용해서 Set의 요소에 접근할 때 사용합니다. 

forEach( )는 Set의 모든 요소를 루프로 돌리는 경우에 사용됩니다. values( )와 forEach( )에 대한 예문만 살펴보겠습니다.

1. values()
const names = new Set(["홍길동","아무개","철수"]);
names.values(); // SetIterator {'홍길동', '아무개', '철수'} 객체 생성
let text = "";
for (const x of names.values()) {  <-- for..of를 사용하여 객체 요소에 접근
  text += x;
}
console.log(text); // '홍길동아무개철수'

2. forEach()
const names = new Set(["홍길동","아무개","철수"]);
let text = "";
names.forEach (function(value) {
  text += value;
})
console.log(text); // '홍길동아무개철수'

 

2. Map 생성 방법 및 주요 메소드

 

Map은 데이터 유형이 될 수 있는 모든 요소를 '키-값'의 쌍 형태로 보유합니다. Map은 키의 원래 삽입 순서를 기억하게 됩니다.

Map 생성 또한 Set 처럼 간단합니다.

Map에서 자주 사용되는 메소드는 다음과 같습니다.

new Map() Map을 생성.
set() Map의 키-값을 설정.
get() Map의 키-값을 가져옴.
delete() Map 안에서 지정된 키와 대응하는 값을 함께 삭제.
has() Map 안에 찾으려는 키가 존재한다면 true를 반환.
forEach() Map의 각 키-값 쌍에 대한 함수를 호출.
entries() Map에서 키-값 쌍이 있는 반복자를 반환.

Map의 사용법은 Set과 비슷한 부분이 많습니다. 일부 메소드만 살펴보겠습니다.

우선 새로운 쌍을 추가할 때는 set( )을 사용합니다.

people.set("철수", 40)

키에 대응하는 특정 값을 가져올 때는 get( )을 사용합니다.

people.get("홍길동") // 리턴값은 31

Set의 values( )와 마찬가지로, entries( ) 메소드를 이용해서 반복자 개체로 만든 뒤에 Map의 요소에 접근할 수 있습니다.

for (const x of people.entries()) {
  console.log(x)
}

//출력값
"홍길동", 31
"아무개", 25
"영희", 21
"철수", 40

 

반응형
댓글