본문 바로가기
프로그래밍/자바스크립트

[자바스크립트] 컬렉션(Collections)

by pentode 2023. 6. 5.

자바스크립트에서 사용할 수 있는 데이터 자료구조는  인덱스(index) 기반의 컬렉션과 키(key) 기반의 컬렉션이 있습니다. 

 

인덱스 기반의 컬렉션

인덱스 기반의 컬렉션은 Array 객체와 TypedArray 객체가 있습니다.

1.  Array 객체

// new 연산자를 이용해서 생성한다.
let arr = new Array();

// 위 코드는 아래와 동일하다.
let arr = [];

 

2. TypedArray는 지정된 타입의 데이터만 저장할 수 있습니다. TypedArray는 실제 생성할 수 있는 타입이 아닙니다. 각 타입별로 객체가 있습니다.

Int8Array, Unit8Array, Unit8ClampedArray, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array, BigInt64Array, BigUint64Array

 

키 기반의 컬렉션

키 기반 컬렉션에는 Map, Set, WeakMap, WeakSet이 있습니다. Map과 Set은 모든 타입을 키로 사용할 수 있고,  WeakMap과 WeakSet은 객체 타입만 키로 사용할 수 있습니다. 객체 타입만 키로 사용하는 것의 이점은 가비지 컬렉션이 잘 되어 메모리 효율이 좋아진다는 것입니다.

1. Map은 키와 값의 쌍으로 데이터를 저장합니다.

// Map 생성
let map = new Map();

// 이차원 배열로 생성 및 초기화
let score = new Map([
    ["수학", 30],
    ["국어", 90],
]);

// 입력(입력은 맵 자체를 반환하므로 체이닝이 가능합니다.)
map.set("name", "sleepy");

// 조회
let name = map.get("name");

// 삭제
map.delete("name");

// 모두 삭제
map.clear();

// 데이트 존재 확인( true/false 반환 )
let isExist = map.has("name");

// 요소의 갯수를 반환
let count = map.size();

// 모든 키값 열거하기 (모든 키를 가지는 이터러블 객체 반환)
let keys = map.keys();

// 모든 값 열거하기 ( 모든 값을 가지는 이터러블 객체 반환 )
let values = map.values();

// 모든 [키, 값]  쌍을 가지는 이터러블 객체 반환
let entries = map.entries();

// 맵은 입력된 순서를 기억합니다. 열거는 입력된 순서대로 이루어집니다.
// 또한, forEach도 사용할 수 있습니다.
map.forEach( (value, key, map) => console.log(key + ":" + value) );

 

2. Set은 중복되지 않는 값을 저장합니다.

// Set 생성하기
let set = new Set();

// 초기값 지정해서 생성하기
let set = new Set( ["pear", "peach"] );

// 요소수 조회하기
let count = set.size();

// 입력하기(Set 자신을 반환하므로 체이닝을 사용할 수 있습니다).
set.add("apple");

// 데이터 존재확인( true/false 반환 )
let isExist = set.has("pear");

// 데이터 삭제
set.delete("pear");

// 모든 데이터 삭제
set.clear();

// 모든 키 값 열거하기( 값이 이터러블로 반환된다.)
let iter = set.keys();

// 모든 값 열거하기( keyes()와 같은 기능.  Map과의 호환성을 위해 제공)
let iter = set.values();

// 키, 값 쌍을 열거하기( [값, 값] 쌍으로 열거. Map과의 호환성을 위해 제공)
let entries = set.entries();

// forEach 사용시 값이 두 번 인자로 제공된다. Map과의 호환성을 위해)
set.forEach( (value1, value2, set) => conosle.log(value1 + ":" + value2) );

 

3. WeakMap

WeakMap은 키로 객체만을 사용하고, 값은 모든 타입을 다 사용할 수 있습니다. 키가 약한참조이므로 WeakMap 이외의 키에 대한 참조가 없어지면 가비지 컬렉션의 대상이 됩니다.

기능들은 Map과 동일하지만, 열거 기능은 없습니다.

 

4. WeakSet

WeakSet은 객체만 저장할 수 있습니다. 약한 참조이므로,  WeakSet 이외의 키에 대한 참조가없어지면 가비지 컬렉션의 대상이 됩니다. 

기능들은 Set과 동일하지만, 열거 기능은 없습니다.

 

이때까지는 인덱스 기반 자료 구조인 배열(Array)만 사용했었는데, 앞으로는 Map과 Set도 사용해 보아야 겠습니다. 최신 마이크로소프트 엣지와 크롬에서 실행이 되는 것을 확인했습니다. ES6에서 도입되었다고 하니, 지원 브라우저는 좀더 확인해 봐야할것 같습니다.

반응형