JavaScript-Map 과 Set

치맨·2023년 1월 31일

JavaScript

javascript

목록 보기

12/23

Set

Set객체는 중복되지 않는 유일한 값들의 집합입니다.
Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값(중복X)을 저장할 수 있습니다.
즉 배열을 사용하지 않고, Set을 사용하는 이유는 중복값을 허용하지 않는 부분입니다.

Set 사용법

Set 생성

set 생성자 함수를 호출해서 생성합니다. Ex) new Set()


const set1 = new Set(); // Set(0) {}

const set2 = new Set([1, 2, 3]); // Set(3) { 1, 2, 3 }

const set3 = new Set([1, 1, 2, 2, 3, 3]); // Set(3) { 1, 2, 3 }

Set 요소 개수 확인

size 프로퍼티를 사용 Ex) set.size


const set1 = new Set(); // Set(0) {}
console.log(set1.size); // 0

const set2 = new Set([1, 2, 3]); // Set(3) { 1, 2, 3 }
console.log(set2.size); // 3

const set3 = new Set([1, 1, 2, 2, 3, 3]); // Set(3) { 1, 2, 3 }
console.log(set3.size); // 3

Set 요소 추가

add 메서드를 사용 Ex) set.add


const set1 = new Set(); // Set(0) {}
set1.add(1);
console.log(set1); // Set(1) { 1 }

set1.add(2);
console.log(set1); // Set(2) { 1, 2 }

// 중복된 값 허용X  따라서 2를 추가했지만 기존에 존재했기 때문에 추가 X
set1.add(2);
console.log(set1); // Set(2) { 1, 2 }

Set 요소 존재 여부

has 메서드 사용 Ex) set.has(요소)
존재 여부를 나타내는 불리언 값을 반환합니다(true/false)


const set1 = new Set(); // Set(0) {}
set1.add(1);
console.log(set1); // Set(1) { 1 }

// set에는 2가 존재하지 않기 때문에 false 출력
console.log(set1.has(2));  // false

set1.add(2);
console.log(set1); // Set(2) { 1, 2 }
console.log(set1.has(2));  // true

Set 요소 삭제

delete 메서드 사용 Ex) set.delete(요소)
삭제 성공 여부를 나타내는 불리언 값을 반환합니다. (true/false)


const set1 = new Set(); // Set(0) {}
set1.add(1);
set1.add(2);

console.log(set1); // Set(2) { 1, 2 }
// 만약 console.log(set1.delete(2)) 했다면 true를 return 
set1.delete(2) 	 // set에서 2 삭제 
console.log(set1); // Set(1) { 1 }

Set 요소 전부 삭제

set에 있는 모든 요소를 삭제
clear 메서드를 사용 set.clear()
언제나 undefined를 반환합니다.


const set1 = new Set(); // Set(0) {}
set1.add(1);
set1.add(2);
set1.add(3);
console.log(set1); // Set(2) { 1, 2, 3 }

set1.clear();
console.log(set1); // Set(0) {}

Set 요소 순회

forEach 메서드를 통해 순회할 수 있습니다. set.forEach(v,v2,set)
- 첫번째 인자는(v) 현재 순회중인 요소값
- 두번째 인자는(v2) 현재 순회중인 요소값
- 세번째 인자는 현재 순회중인 set객체 자체

또는 set객체는 이터러블이기 때문에 for...of문으로 순회 가능


  const set1 = new Set([1, 2, 3]); // Set(0) {}
   
  // forEach메서드 사용
  set1.forEach((v, v2, set) => {
    console.log('v : ', v); // 1, 2, 3
    console.log('v2 : ', v2); // 1, 2, 3
    console.log(v === v2); // 실제로 v와 v2는 같다.
    console.log('set : ', set); // set :  Set(3) { 1, 2, 3 }
  });

  // for... of 사용
  for (let set of set1) {
    console.log(set); // 1, 2, 3
  }

Map

키(key)와 값(value)의 쌍으로 이루어진 컬렉션입니다.
객체와 유사하지만 아래와 같은 차이가 있습니다.

구분 객체 Map객체
키로 사용할 수 있는 값 문자열 또는 심벌 값 객체를 포함한 모든 값
이터러블 X O
요소 개수 확인 Object.keys(object).length map.size

구분	객체	Map객체
키로 사용할 수 있는 값	문자열 또는 심벌 값	객체를 포함한 모든 값
이터러블	X	O
요소 개수 확인	Object.keys(object).length	map.size

Map 사용법

Map 생성

Map생성자 함수를 호출해서 생성합니다. new Map() 또는 new Map(키,값)
인수로 전달받는 경우 키와 값의 쌍으로 이루어진 요소로 구성되어야 합니다.


  const map1 = new Map();
  console.log(map1); // Map(0) {}

  const map2 = new Map([
    ['key', 'value'],
    ['key2', 'value2'],
  ]);
  console.log(map2); // Map(2) { 'key' => 'value', 'key2' => 'value2' }

  const map3 = new Map([
    ['name', 'KIM'],
    ['age', 28],
  ]);

  console.log(map3); // Map(2) { 'name' => 'KIM', 'age' => 28 }

Map 요소 개수 확인

size 프로퍼티 사용 Ex) map.size


  const map1 = new Map();

  console.log(map1); // Map(0) {}
  console.log(map1.size); // 0

  const map2 = new Map([
    ['key', 'value'],
    ['key2', 'value2'],
  ]);
  console.log(map2); // Map(2) { 'key' => 'value', 'key2' => 'value2' }
  console.log(map2.size); // 2

Map요소 추가

set 메서드 사용 Ex) map.set(key , value)


  const map1 = new Map();

  console.log(map1); // Map(0) {}

  map1.set('name', 'KIM');
  console.log(map1); //  Map(1) { 'name' => 'KIM' }

  map1.set('age', 28);
  console.log(map1); //  Map(2) { 'name' => 'KIM', 'age' => 28 }

Map요소 취득

get 메서드 사용 Ex) map.get(key)
인수로 전달한 key에 대한 value(값)을 반환합니다.

만약 인수로 전달한 키를 갖는 요소가 존재하지 않으면 undefined를 반환


const map1 = new Map();

console.log(map1); // Map(0) {}

map1.set('name', 'KIM');

// name은 map에 존재하기 때문에, name에 대한 value값 KIM이 return
console.log(map1.get('name'));    // KIM

// age는 map에 존재하지 않기 때문에 undefined가 return
console.log(map1.get('age'));     // undefined

Map 요소 삭제

delete 메서드 사용 map.delete(key)

삭제 성공여부를 나타내는 불리언 값을 반환합니다.


 const map1 = new Map();

 map1.set('name', 'KIM');
 map1.set('age', 28);
 console.log(map1); // Map(2) { 'name' => 'KIM', 'age' => '28' }

 // key값이 name인 요소 삭제 
 // 만약 console.log(map1.delete('name'));을 통해 확인해보면 삭제되었기 때문에 true를 반환합니다.
 map1.delete('name');
 console.log(map1); // Map(1) { 'age' => '28' }

 // key값이 아닌 value값을 인자로 전달하면 값이 삭제되지 않습니다. 
 map1.delete(28);
 console.log(map1); // Map(1) { 'age' => '28' }

요소 전부 삭제

clear 메서드를 사용 map.clear()

clear 메서드는 언제나 undefined를 반환한다.


const map1 = new Map();

map1.set('name', 'KIM');
map1.set('age', 28);
console.log(map1); // Map(2) { 'name' => 'KIM', 'age' => '28' }

map1.clear();
console.log(map1); // Map(0) {}

map1.set('name', 'KIM');
map1.set('age', 28);
console.log(map1); // Map(2) { 'name' => 'KIM', 'age' => '28' }

// clear메서드를 console.log() 해보면 undefined 출력
console.log(map1.clear());    // undefined

Map 요소 순회

forEach 메서드를 통해 순회할 수 있습니다. map.forEach(v,k,map)
- 첫번째 인자는(v) 현재 순회중인 요소값
- 두번째 인자는(k) 현재 순회중인 요소키
- 세번째 인자는 현재 순회중인 Map객체 자체

또는 Map객체는 이터러블이기 때문에 for...of문으로 순회 가능

const map1 = new Map([
  ['name', 'KIM'],
  ['age', 28],
]);

// forEach메서드 사용
  map1.forEach((v, k, map) => {
    console.log('v : ', v); // v : KIM ,    v: 28
    console.log('k : ', k); //k : name,     k: age
    console.log('map : ', map); // map :  Map(2) { 'name' => 'KIM', 'age' => 28 }
  });

  // for... of 사용
  for (let map of map1) {
    console.log(map); // [ 'name', 'KIM' ]    [ 'age', 28 ]
  }

치맨

기본기가 탄탄한 개발자가 되자!

이전 포스트

JavaScript-RegExp

다음 포스트