[Javascript] Set과 Map

 

Set

---

- Set 객체는중복을 허용하지 않는 값들의 집합입니다.

- Set 객체의 특징

• 동일한 값을 중복하여 포함할 수 없음
• 요소 순서에 의미가 없음
• 인덱스로 요소에 접근할 수 없음

* 여러개의 값들을 나열할 수 있는 것은 Array, 중복을 제거한 집합은 Set 임. 또한 조회에 있어서 Set이 Array에 비해 훨씬 빠름.

 

 

 

 

 

 

1.set객체의 생성

---

- set객체는 set 생성자 함수로 생성합니다.

- 인수를 전달하지 않으면 빈 set객체가 생성됩니다.

- set 생성자 함수는 이터러블을 인수로 받아 set객체를 생성합니다.

- 이때 이터러블의 중복된 값은 아래의 예시처럼 set객체에 요소로 저장되지 않습니다.

 

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

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

const set2 = new Set('hello');
console.log(set2); // Set(4) {"h", "e", "l", "o"}

 

 

 

따라서 set을 사용해서 배열에서 중복된 요소를 제거할 수 있습니다.

 

// 배열의 중복 요소 제거
const uniq = array => array.filter((v, i, self) => self.indexOf(v) === i);
console.log(uniq([2, 1, 2, 3, 4, 3, 4])); // [2, 1, 3, 4]


// Set을 사용한 배열의 중복 요소 제거
const ordersSet = new Set([
'Pasta', 
'Pizza', 
'Pizza', 
'Risotto', 
'Pasta', 
'Pizza',
]);

console.log(ordersSet); // Set(3) {'Pasta', 'Pizza', 'Risotto'}

 

 

 

 

 

 

 

2. 요소 개수 확인

---

- set 객체의 요소 개수를 확인할 때는 Set.prototype.size 프로퍼티를 사용합니다.

-  size 프로퍼티는 setter 함수없이 getter 함수만 존재하는 접근자 프로퍼티입니다. 그래서 size 프로퍼티에 숫자를 할당하여 set 객체의 요소개수를 변경할수 없습니다.

 

const ordersSet = new Set([
'Pasta', 
'Pizza', 
'Pizza', 
'Risotto', 
'Pasta', 
'Pizza',
]);

console.log(ordersSet.size); // 3

 

 

 

 

 

 

 

3. 요소 추가

---

-  set 객체에 요소를 추가할때는 Set.prototype.add 메서드를 사용하면 됩니다.

-  add 메서드는 새로운 요소가 추가된 Set 객체를 반환합니다.

 

const ordersSet = new Set([
'Pasta', 
'Pizza', 
'Pizza', 
'Risotto', 
'Pasta', 
'Pizza',
]);

ordersSet.add('Garlic Bread');
ordersSet.add('Garlic Bread');
ordersSet.add('Wine');

console.log(ordersSet); //Set(5) {'Pasta', 'Pizza', 'Risotto', 'Garlic Bread', 'Wine'}

 

 

 

 

-  set 객체는 객체나 배열과 같이 자바스크립트의 모든 값을 요소로 저장할 수 있습니다.

 

const set = new Set();

set
  .add(1)
  .add('a')
  .add(true)
  .add(undefined)
  .add(null)
  .add({})
  .add([]);

console.log(set); // Set(7) {1, "a", true, undefined, null, {}, []}

 

 

 

 

 

 

 

4. 요소 존재 여부 확인

---

- Set 객체에 특정 요소가 존재하는지 확인하려면 Set.prototype.has 메서드를 사용합니다.

-  has는 요소가 있는지 없는지에 따라 불리언값을 반환합니다.

 

const ordersSet = new Set([
'Pasta', 
'Pizza', 
'Pizza', 
'Risotto', 
'Pasta', 
'Pizza',
]);

console.log(ordersSet.has('Bread')); // false

 

 

 

 

 

 

 

5. 요소 삭제

---

- set 객체의 특정 요소를 삭제하려면 Set.prototype.delete 메서드를 사용합니다.

-  delete 메서드는 삭제 성공여부를 나타내는 불리언값을 반환합니다.
- delete 메서드에는 인덱스가 아니라 삭제하려는 요소값을 인수로 전달해야합니다. (set 객체는 인덱스를 갖지않기때문에)

- 또한 delete는 불리언값을 반환하기때문에 add처럼 여러개를 붙여서 사용할수 없습니다.(add는 객체를 리턴하기때문에 여러개를 동시에 사용가능함)

 

const ordersSet = new Set([
'Pasta', 
'Pizza', 
'Pizza', 
'Risotto', 
'Pasta', 
'Pizza',
]);

ordersSet.delete('Risotto');
console.log(ordersSet); // Set(2) {'Pasta', 'Pizza'}

// delete는 불리언 값을 반환합니다.
ordersSet.delete('Pasta').delete('Risotto'); // TypeError: ordersSet.delete(...).delete is not a function

 

 

 

 

 

 

6. 요소 일괄 삭제

---

-  set 객체의 모든 요소를 일괄삭제하려면 Set.prototype.clear메서드를 사용하면 됩니다. 

 

const ordersSet = new Set([
'Pasta', 
'Pizza', 
'Pizza', 
'Risotto', 
'Pasta', 
'Pizza',
]);

ordersSet.clear();
console.log(ordersSet); // Set(0) {size: 0}

 

 

 

 

 

 

 

7. 요소 순회

---

-  set 객체는 이터러블이기 때문에 for ..of문으로 순회할수있고, 스프레드문법과, 배열 디스트럭처링의 대상이 될 수도 있습니다.

 

const ordersSet = new Set([
'Pasta', 
'Pizza', 
'Pizza', 
'Risotto', 
'Pasta', 
'Pizza',
]);

// 이터러블인 Set 객체는 for...of 문으로 순회할 수 있다.
for(const order of ordersSet) 
console.log(order); // Pasta Pizza Garlic Bread

// 이터러블인 Set 객체는 스프레드 문법의 대상이 될 수 있다.
console.log([...ordersSet]); // (3) ['Pasta', 'Pizza', 'Garlic Bread']

// 이터러블인 Set 객체는 배열 디스트럭처링 할당의 대상이 될 수 있다.
const [a, ...b] = [...ordersSet];
console.log(a, b); //Pasta (2) ['Pizza', 'Garlic Bread']

 

 

 

 

 

 

 

 

Map

---

- map 객체는 키와 값의 쌍으로 이루어진 컬렉션입니다.

- map객체는 객체와 유사하지만 차이가있는데

1. 객체는 키로 사용할수 있는 값이 문자열 또는 심벌 값 이지만,
   map은 객체를 포함한 모든 값을 키로 사용할 수 있습니다.
2. 객체는 이터러블이 아니지만 map은 이터러블입니다.
3. 객체는 요소의 개수를 length로, map은 size메서드로 확인할 수 있습니다.

 

 

 

 

 

 

 

1. Map 객체의 생성

---

 

- Map 객체는 Map 생성자 함수로 생성합니다.

- 인수를 전달하지않으면 빈 map객체가 생성됩니다.

- map 생성자 함수는 이터러블을 인수로 전달받아 map 객체를 생성합니다. 이때 인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요소로 구성되야 합니다.

 

const question = new Map([
  ['question', 'What is the best programming lang in the world?'],
  [1, 'C'],
  [2, 'Java'],
  [3, 'JavaScript'],
  ['correct', 3],
  [true, 'Correct'],
  [false, 'Try again'],
])
console.log(question); // Map(7) {'question' => 'What is the best programming lang in the world?', 1 => 'C', 2 => 'Java', 3 => 'JavaScript', 'correct' => 3, …}

const error = new Map([1, 2]); // TypeError: Iterator value 1 is not an entry object

 

 

★ 중복된 키는 map 객체에 요소로 저장되지 않습니다.

 

const map = new Map([['key1', 'value1'], ['key1', 'value2']]);
console.log(map); // Map(1) {"key1" => "value2"}

 

 

 

 

 

 

 

2. 요소 개수 확인

---

- Map.prototype.size 프로퍼티를 사용합니다.(set과 비슷) 

 

- size 프로퍼티는 setter 함수없이 getter 함수만 존재하는 접근자 프로퍼티입니다. 그래서 size 프로퍼티에 숫자를 할당하여 map 객체의 요소개수를 변경할수 없습니다.

 

const question = new Map([
  ['question', 'What is the best programming lang in the world?'],
  [1, 'C'],
  [2, 'Java'],
  [3, 'JavaScript'],
  ['correct', 3],
  [true, 'Correct'],
  [false, 'Try again'],
])

question.size = 10; // 무시된다.
console.log(question.size); // 7

 

 

 

 

 

 

 

 

3. 요소 추가

---

 

- map 객체에 요소를 추가할때는 Map.ptorotype.set 메서드를 사용합니다.
- set 메서드는 새로운 요소가 추가된 Map객체를 반환합니다. 그래서 set메서드를 연속적으로 호출 할 수 있습니다.

 

const rest = new Map();
rest.set('name', 'Classico Italiano');
rest.set(1, 'Firenze, Italy');

console.log(rest); // Map(2) {'name' => 'Classico Italiano', 1 => 'Firenze, Italy'}

 

 

★★★★★객체와 달리 map객체의 key 타입에는 제한이 없습니다.

 

const map = new Map();

const lee = { name: 'Lee' };
const kim = { name: 'Kim' };

// 객체도 키로 사용할 수 있다.
map
  .set(lee, 'developer')
  .set(kim, 'designer');

console.log(map);
// Map(2) { {name: "Lee"} => "developer", {name: "Kim"} => "designer" }

 

 

 

 

 

 

4.요소 취득

---

- 특정요소를 취득하려면 Map.prototype.get메서드를 사용합니다.
- get메서드의 인수로 키를 전달하면 Map 객체에서 인수로 전달한 키를 갖는 값을 반환합니다. 전달한 키를 갖는 요소가 없다면 undefined를 반환합니다.

 

const map = new Map();

const lee = { name: 'Lee' };
const kim = { name: 'Kim' };

map
  .set(lee, 'developer')
  .set(kim, 'designer');

console.log(map.get(lee)); // developer
console.log(map.get('key')); // undefined

 

 

 

 

 

 

5. 요소 존재 여부 확인

---

- 특정 요소를 가지고 있는지 확인하려면 Map.ptorotype.has메서드를 사용합니다.

-  has 메서드는 불리언값을 반환합니다.

 

const lee = { name: 'Lee' };
const kim = { name: 'Kim' };

const map = new Map([[lee, 'developer'], [kim, 'designer']]);

console.log(map.has(lee)); // true
console.log(map.has('key')); // false

 

 

 

 

 

6. 요소 삭제

---

- 특정 요소를 삭제하려면 Map.prototype.delete 메서드를 사용합니다. delete 메서드는 삭제 성공여부를 나타내는 불리언값을 반환합니다.
- delete 메서드에는 삭제하려는 키값을 인수로 전달해야합니다.

- delete는 불리언값을 반환하기때문에 add처럼 여러개를 붙여서 사용할수 없습니다.(add는 객체를 리턴하기때문에 여러개를 동시에 사용가능함)

 

const lee = { name: 'Lee' };
const kim = { name: 'Kim' };

const map = new Map([[lee, 'developer'], [kim, 'designer']]);

map.delete(kim);
console.log(map); // Map(1) { {name: "Lee"} => "developer" }

 

 

 

 

 

7. 요소 일괄 삭제

---

- 모든 요소를 일괄삭제하려면 Map.prototype.clear메서드를 사용하면 됩니다.

- clear는 언제나 undefined를 반환합니다.

 

const lee = { name: 'Lee' };
const kim = { name: 'Kim' };

const map = new Map([[lee, 'developer'], [kim, 'designer']]);

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

 

 

 

 

 

 

 

8. 요소 순회

---

- map 객체는 이터러블이기 때문에 for ..of문으로 순회할수있고, 스프레드문법과, 배열 디스트럭처링의 대상이 될 수도 있습니다.

 

const lee = { name: 'Lee' };
const kim = { name: 'Kim' };

const map = new Map([[lee, 'developer'], [kim, 'designer']]);

// 이터러블인 Map 객체는 for...of 문으로 순회할 수 있다.
for (const entry of map) {
  console.log(entry); // [{name: "Lee"}, "developer"]  [{name: "Kim"}, "designer"]
}

// 이터러블인 Map 객체는 스프레드 문법의 대상이 될 수 있다.
console.log([...map]);
// [[{name: "Lee"}, "developer"], [{name: "Kim"}, "designer"]]

// 이터러블인 Map 객체는 배열 디스트럭처링 할당의 대상이 될 수 있다.
const [a, b] = map;
console.log(a, b); // [{name: "Lee"}, "developer"]  [{name: "Kim"}, "designer"]

 

 

 

* 참고 사이트에 내용을 개인적으로 복습하기 편하도록 재구성한 글입니다.
자세한 설명은 참고 사이트를 살펴보시기 바랍니다.

 https://velog.io/@dolarge/Java-Script-Set-%EA%B3%BC-Map