[JS] Array vs Set 속도 비교

Check Box 상태 관리(feat. Set 활용법)
위 글은 Set을 이용한 check상태 관리에 대한 내용이다.
실제로 set과 array의 속도 비교를 해보려고 한다.

var n = 100000;
var arr = Array.apply( null, Array( n ) ).map( ( x, i ) => i );
console.info( arr.length ); // 100000

// Helpers
var checkArr = ( arr, item ) => arr.indexOf( item ) !== -1;
var checkSet = ( set, item ) => set.has( item );

// Vars
var set, result;

요소 탐색

Array/indexOf (0.254ms) | Set/has (0.047ms)

// 요소 탐색
console.time( 'search in array' );
result = checkArr( arr, 123123 );
console.timeEnd( 'search in array' );

set = new Set( arr );

console.time( 'search in set' );
checkSet( set, 123123 );
console.timeEnd( 'search in set' );

요소 추가

Array/push (0.498ms) | Set/add (0.003ms)

// 요소 추가
console.time( 'add in array' );
arr.push( n + 1 );
console.timeEnd( 'add in array' );

set = new Set( arr );

console.time( 'add in set' );
set.add( n + 1 );
console.timeEnd( 'add in set' );

요소 삭제

Array/deleteFromArr (0.292ms) | Array/filter (5.234ms) | Set/delete (0.010ms)

// 요소 추가
var deleteFromArr = ( arr, item ) => {
    var i = arr.indexOf( item );
    i !== -1 && arr.splice( i, 1 );
};

console.time( 'deleteFromArr' );
deleteFromArr( arr, 9993 );

console.timeEnd( 'deleteFromArr' );

console.time( 'filterTest' );
const deletedArr =  arr.filter(item=>item!==9993)
console.timeEnd( 'filterTest' );

set = new Set( arr );

console.time( 'delete from set' );
set.delete( 9993 );
console.timeEnd( 'delete from set' );

find, filter, indexOf 비교

var n = 100000;
var arr = Array.apply(null, Array(n)).map((x, i) => i);
console.info(arr.length); // 100000

console.time('find');
const find = arr.find((d) => d === 999);
console.log('find', find);
console.timeEnd('find'); // find: 0.06005859375 ms

console.time('filter');
const filter = arr.filter((d) => d === 999)[0];
console.log('filter', filter);
console.timeEnd('filter'); // filter: 1.076904296875 ms

console.time('indexOf');
const indexOf = arr.indexOf(999);
console.log('indexOf', arr[indexOf]);
console.timeEnd('indexOf'); // indexOf: 0.01904296875 ms

Reference

https://stackoverflow.com/questions/39007637/javascript-set-vs-array-performance#comment93399644_39010462