치춘짱베리굿나이스
Set, Map 본문
Set 객체
특징
ES6에서 새로 도입한 자료구조이다
일반적인 배열과 비슷하게 원시 값, 객체 참조 모두 담을 수 있으며, 순회가 가능하다
다만 배열과 다른 점은, Set은 같은 값이 단 한 번만 나타날 수 있다 (중복 없음)
중복이 없는 유일한 값들의 집합이라고 생각하자
배열의 중복을 제거하고 싶을 때 잠깐 사용하거나, 처음부터 중복 없는 배열로 사용하고 싶을 때 쓰면 좋다
NaN
과 undefined
도 담을 수 있는데, Set에서 NaN은 여러 개 들어올 수 없다 (원래 NaN === NaN
은 false
이다)
Set 객체에서 +0
과 -0
은 같은 값 취급된다
생성하기
const set = new Set(); // 빈 Set 객체 생성
console.log(set); // Set(0) {}
const setFromArr = new Set([1, 2, 3, 3]);
console.log(setFromArr); // Set(3) {1, 2, 3}
const setFromString = new Set("chichoon");
console.log(setFromString); // Set(5) {"c", "h", "i", "o", "n"}
Set 생성자는 인자로 배열, 문자열 등 iterable 한 값을 넣을 수 있다
배열이나 문자열을 넣으면, 중복이 제거된 채로 저장된다
단순 숫자나 boolean과 같은 원시값, 객체는 순회할 수 없기 때문에 인자로 사용할 수 없다
내장 메서드 사용하기
Set.add()
const set = new Set([1, 2, 3]); // set(3) {1, 2, 3}
set.add(5); // set(4) {1, 2, 3, 5}
set.add(6).add(2).add(8); // set(6) {1, 2, 3, 5, 6, 8}
값을 추가할 수 있다
add()
메서드는 값이 추가된 set의 참조를 반환하기 때문에, 메서드 체이닝이 가능하다
인자로 이미 set에 존재하는 값 (예시에서는 2
) 이 들어올 경우, 아무 것도 하지 않는다
Set.delete()
const set = new Set([1, 2, 3, 5, 6, 8]); // set(6) {1, 2, 3, 5, 6, 8}
set.delete(5); // true
set.delete(0); // false
값을 삭제할 수 있다
delete()
메서드는 삭제 여부를 반환한다
삭제가 잘 되었다면 (인자로 들어온 값이 set 객체 안에 존재했다면) true
를 반환한다
삭제에 실패했을 경우 (인자로 들어온 값이 set 객체 안에 존재하지 않았다면) false
를 반환한다
Set.forEach()
const set = new Set([1, 2, 3, 6, 8]); // set(5) {1, 2, 3, 6, 8}
set.forEach((v) => console.log(v + 5));
// 6
// 7
// 8
// 11
// 13
set 객체 내의 모든 값에 대해 콜백 함수를 실행시킬 수 있다
콜백 함수의 인자로는 set 객체의 값이 들어간다
array.forEach()
와 비슷한 양상을 띄는 대신 콜백 함수의 인자 2개가 set 객체의 값을 받는데, 그 이유는 set 객체에서 순서가 의미없기 때문이다
Set.has()
const set = new Set([1, 2, 3, 6, 8]); // set(5) {1, 2, 3, 6, 8}
console.log(set.has(3)); // true
console.log(set.has(5)); // false
set 객체 안에 해당 값이 존재하는지 여부를 boolean으로 반환한다
Set.keys(), Set.values()
const set = new Set([1, 2, 3, 6, 8]); // set(5) {1, 2, 3, 6, 8}
console.log(set.keys()); // SetIterator { 1, 2, 3, 6, 8 }
console.log(set.values()); // SetIterator { 1, 2, 3, 6, 8 }
여타 객체와 같이 keys, values 메서드를 사용할 수 있고, set 객체의 key와 value를 반환한다
단 set 객체 특성상 key와 value가 같으므로 두 메서드는 같은 값을 반환한다
keys()
, values()
메서드의 반환값은 순회할 수 있다
Set.entries()
const set = new Set([1, 2, 3, 6, 8]); // set(5) {1, 2, 3, 6, 8}
set.entries(); // [Set Entries] { [1, 1], [2, 2], [3, 3], [6, 6], [8, 8] }
set 객체의 모든 값을 배열 형태로 반환한다
배열은 [value, value]
형태로 반환되며, 객체의 특성상 key-value 쌍으로 이루어져야겠지만 set 객체는 key와 value가 동일하므로 두 개가 같은 값으로 반환되는 것이다
Object.entries()
와 정확히 같은 기능을 한다 (set도 객체이므로 해당 메서드를 쓸 수 있다)
entries()
메서드의 반환값은 순회할 수 있다
Set.clear()
const set = new Set([1, 2, 3, 6, 8]); // set(5) {1, 2, 3, 6, 8}
set.clear();
console.log(set); // Set(0) {}
set 객체의 모든 값을 삭제하고 비운다
Set.size
const set = new Set([1, 2, 3, 6, 8]); // set(5) {1, 2, 3, 6, 8}
console.log(set.size); // 5
set의 길이 프롭퍼티이다
Set 객체로 배열 중복 제거하기
const arr = [1, 2, 3, 3, 3, 4, 5, 6, 5, 5, 5, 1, 1, 2];
const newArr = [...new Set(arr)]
console.log(newArr); // [1, 2, 3, 4, 5, 6]
set 객체도 전개 연산자를 사용할 수 있으므로, 이를 이용하여 중복 제거된 내용물을 전개해 새로운 배열로 만들 수 있다
이렇게 생성한 배열은 다시 중복값을 가질 수 있으므로, 일시적으로 중복을 제거하는 역할만을 한다
Map 객체
특징
마찬가지로 ES6에서 새로 도입한 자료구조이다
일반 객체 (Object) 와 유사하지만, 일반 객체는 key 값에 문자열, Symbol
, 정수밖에 올 수 없지만 Map 객체는 어떤 것이든 key가 될 수 있으며, key의 타입을 보존한다
따라서 key로 ‘1’
이 들어올 때 (문자열) 와 1
이 들어올 때 (숫자) 는 다르다
Map은 데이터의 순서를 보존한다
생성하기
const map = new Map();
console.log(map); // Map(0) {size: 0}
const map = new Map([['key', 'value'], ['foo', 'bar'], ...]);
console.log(map);
// Map(2) {'key' => 'value', 'foo' => 'bar', ...}
내장 메서드 사용하기
Map.set()
const map = new Map();
map.set('key', 'value');
map.set(1, 'aaa');
map.set('1', 'bbb');
console.log(map);
// Map(3) {'key' => 'value', 1 => 'aaa', '1' => 'bbb'}
set()
메서드를 사용하여 값을 추가할 수 있다
첫 번째 인자는 key, 두 번째 인자는 value이다
key의 자료형을 구분하므로, 1
과 ‘1’
이 다르게 들어가는 것을 볼 수 있다
Map.get()
const map = new Map([['key', 'value'], [1, 'aaa'], ['1', 'bbb']]);
console.log(map.get(1));
// 'aaa'
console.log(map.get('12345');
// undefined
key를 인자로 받아 그에 대응하는 value를 반환한다
값이 존재하지 않을 경우, undefined
를 반환한다
Map.delete()
const map = new Map([['key', 'value'], [1, 'aaa'], ['1', 'bbb']]);
map.delete('1'); // true
map.delete(5); // false
값을 삭제할 수 있다
set 객체의 delete
와 마찬가지로, delete()
메서드는 삭제 여부를 반환한다
삭제가 잘 되었다면 (인자로 들어온 key가 map 객체 안에 존재했다면) true
를 반환한다
삭제에 실패했을 경우 (인자로 들어온 key가 map 객체 안에 존재하지 않았다면) false
를 반환한다
Map.forEach()
const map = new Map([['key', 'value'], [1, 'aaa'], ['1', 'bbb']]);
map.forEach((value, key) => console.log(`${value} is ${key}'s value`));
// value is key's value
// aaa is 1's value
// bbb is 1's value
map 객체 내의 모든 값에 대해 콜백 함수를 실행시킬 수 있다
콜백 함수의 인자로는 map 객체의 value, key가 들어간다
Map.has()
const map = new Map([['key', 'value'], [1, 'aaa'], ['1', 'bbb']]);
console.log(map.has(1));
// true
console.log(map.has('12345');
// false
key를 인자로 받아 map 객체에 존재하는지 여부를 boolean으로 반환한다
Map.keys()
const map = new Map([['key', 'value'], [1, 'aaa'], ['1', 'bbb']]);
console.log(map.keys()); // MapIterator {'key', '1', 1}
map 객체 내의 모든 key를 반환한다
keys()
메서드의 반환값은 순회할 수 있다
Object.keys()
와 유사하다
Map.values()
const map = new Map([['key', 'value'], [1, 'aaa'], ['1', 'bbb']]);
console.log(map.values()); // MapIterator {'value', 'aaa', 'bbb'}
map 객체의 value를 반환한다
values()
메서드의 반환값은 순회할 수 있다
Object.values()
와 유사하다
Map.entries()
const map = new Map([['key', 'value'], [1, 'aaa'], ['1', 'bbb']]);
console.log(map.entries()); // Map Entries {['key', 'value'], [1, 'aaa'], ['1', 'bbb']}
map 객체의 모든 값을 배열 형태로 반환한다
배열은 [key, value]
형태로 반환되며, 순회할 수 있다
Object.entries()
와 같은 기능을 한다 (map도 객체이므로 해당 메서드를 쓸 수 있다)
entries()
메서드의 반환값은 순회할 수 있다
Map.clear()
const map = new Map([['key', 'value'], [1, 'aaa'], ['1', 'bbb']]);
map.clear();
console.log(map); // Map(0) {size: 0}
map 객체의 모든 값을 삭제하고 비운다
Map.size
const map = new Map([['key', 'value'], [1, 'aaa'], ['1', 'bbb']]);
console.log(map.size); // 3
map의 길이 프롭퍼티이다
참고자료
'Javascript + Typescript > 이론과 문법' 카테고리의 다른 글
자바스크립트에서의 Symbol (0) | 2022.08.20 |
---|---|
자바스크립트에서의 싱글톤 패턴과 static (0) | 2022.08.08 |
자바스크립트에서의 함수형 프로그래밍 (0) | 2022.07.30 |
자바스크립트에서의 객체지향 (2) 프로토타입 (0) | 2022.07.27 |
자바스크립트에서의 객체지향 (1) 객체지향 기본 (0) | 2022.07.26 |