관리자 페이지에서 메뉴의 권한을 관리하는 기능을 개발 중, 권한을 state 변수에 어떤 구조로 담을 것인가 에 대한 고민을 하게 되었습니다.

메뉴명을 key 로 두고 읽기, 쓰기 등의 권한을 배열에 담아서 value로 넣으면 될까..? 그런데 중복값이 들어가면 어떡하지?

그렇게 자연스럽게 가장 많이 사용하던 Array 와 조금은 낯설었던 Set, 그리고 Map 에 대해 공부하게 되었더랍니다... 셋의 데이터 구조를 알아보자구요 👇👇

Array 🚂

우선, Array는 JavaScript에서 가장 기본적으로 사용되는 데이터 구조입니다. 순서대로 저장되며 각 항목은 고유한 인덱스를 가집니다. 배열의 인덱스는 0부터 시작하며, 0, 1, 2, 3, ...과 같이 순차적으로 증가합니다. 따라서 인덱스를 통해 값에 접근할 수 있습니다.

특정 key 가 없는 값을 순차적으로 넣을 때 많이 쓰곤 하는데요. 순서가 있어 인덱스로 접근이 가능하다는 점이 장점이지만 중복값을 허용하기 때문에 동일한 값이 여러번 들어갈 수 있다는 것이 단점입니다.

💡 Set

Set은 ES6부터 지원되기 시작한 고유한 값만을 저장할 수 있는 데이터 구조로, 중복된 값을 허용하지 않습니다.
순서가 있지만 인덱스로 접근할 수 없으며, 대신 값 자체로 관리할 수 있습니다.

중복된 값을 허용하지 않기 때문에 유니크한 값만 관리할 때 유용하게 사용되지만 인덱스로 접근할 수 없기 때문에 순회하기 위해서는 반복자(iterator) 나 for문을 활용해야 합니다.

Map 🗺️

Map도 ES6부터 도입된 데이터 구조로, key-value 의 쌍을 저장하는 데 사용됩니다. Map은 key의 순서를 기억하며 각 key 가 고유하므로 이의 중복을 허용하지 않습니다.

Object와 비슷해 보일 수 있지만 중요한 차이점이 있습니다. Object는 키로 문자열만 사용할 수 있지만, Map은 어떠한 데이터 타입도 키로 사용할 수 있습니다.

메소드 비교 🧐

그렇다면, 각 메소드는 어떨까요?
Array, Set 그리고 Map 의 주요 메소드들은 다음과 같습니다.

요소 추가

const myArray = [1, 2, 3];
myArray.push(4); // 배열 끝에 요소 추가
myArray.unshift(0); // 배열 시작에 요소 추가

const mySet = new Set();
mySet.add(1); // 요소 추가
mySet.add(2);

const myMap = new Map();
myMap.set('key1', 'value1'); // 키-값 쌍 추가
myMap.set('key2', 'value2');

요소 삭제

const myArray = [1, 2, 3, 4];
myArray.pop(); // 배열 끝의 요소 제거
myArray.shift(); // 배열 시작의 요소 제거

const mySet = new Set();
mySet.add(1);
mySet.delete(1); // 요소 제거

const myMap = new Map();
myMap.set('key1', 'value1');
myMap.delete('key1'); // 키-값 쌍 제거

Array 와 Set 의 속도 비교 🛼

그럼, 중복값이 허용되지 않는 Set 이 더 좋겠네? 라고 생각하던 중, 아래의 글을 발견하였습니다!

JavaScript Set vs. Array performance

위 글은 Array 와 Set 의 비교를 검색해보신 분들이라면 한 번씩은 꼭 봤을 법한 stack overflow 의 글인데요, 요약하자면 다음과 같습니다!

• 요소를 추가, 변경하는 함수는 array 가 빠르다.
• 요소를 삭제하는 부문에서는 Set 의 압도적인 승리.

Array 의 메소드 속도가 더 빠르다는 흥미로운 실험 결과 였는데요..

그래서, 어떤 데이터 구조로 구현함?

메뉴명을 key 로, 권한을 value 로 담는 구조는 Map 과 같은 타입을 사용함에 변함이 없었지만 각 권한을 array 로 담을까 set 으로 담을까 에 대해 고민하였는데요 🤔
Array 의 메소드 속도이냐, Set 의 중복값을 허용하지 않는 특징이냐에 고민하던 중, 결국 Set 으로 결정하게 되었습니다.

1. 많은 값이 들어가는 변수가 아니기에 속도에 대해 우선순위를 가지지 않았습니다!
2. 또한, Set이 중복이 허용되지 않는 데이터 구조이다 보니, for문을 사용하여 요소를 삭제해야 하는 array 와 달리 요소를 삭제하는 메소드가 굉장히 직관적이어서 코드의 가독성이 더 좋더라구요.

마무리

이번 기회를 통해 새롭게 Set 에 대해 알게 되어 매우 흥미로웠습니다!
앞으로는 중복값을 허용하지 않고 속도에 영향을 끼치지 않는 정도의 값을 저장할 때, 데이터 구조로 Set 을 먼저 떠올릴 수 있을 것 같네요! (아는 만큼 보이는 법..!)

더 많은 데이터 구조를 알아두면 다양한 문제 해결 방법을 떠올릴 수 있을 것 같아 의욕이 샘솟습니다 😤
그럼 오늘도 행코 ⭐️