[ES6] Set vs Array 비교 [번역]

[Set은 뭐고 Array는 뭐야?]

JS로 작업을 해본 누구나 Array는 아주 익숙할거야. 하지만 정확하게 Array는 뭘까?

 

일반적으로 Array는 데이터 덩어리(?) 표현하는 구조적 유형이다.(숫자,객체들 등등..) 연속적인 메모리에 할당되어있어.

 

예시로 : [1,2,3,2]

 

그렇다면 Set은?

 

Set은 좀더 수학적 발상으로서, index에 의해 순서적으로 할당될 필요없이 중복없는 요소들/객체들만 포함하는 추상적인 데이터 유형이다.

 

예시로 : {1,2,3}

 

맞아, 정의에 의하면, Array와 Set은 기술적으로 다른 개념이야.

 

가장 큰 차이점중 하나는, Array는 중복될 수 있다는 점이야. 하지만 Set은 그렇지 않아.

 

게다가, Array는 "인덱스 콜렉션" 이고, Set은  "키 콜렉션" 이야.

 

• 인덱스 콜렉션 : index value에 의해 순서화되는 데이터 콜렉션
• 키 콜렉션 : key를 사용하는 콜렉션; 포함된 요소들은 입력의 순서에서 반복가능하다.

아니, 그럼 이렇게 다른데 왜 둘을 비교하는 걸까?

 

프로그래밍 세계에서, 같은 데이터를 취할때, Array 나 Set으로 데이터를 저장할 수 있어.

-  올바른 구조를 선택하는 것은 최선의 방법을 전달하는데 기여할 수 있어 

-  무엇을 선택할지 이해하기 위해서는, 먼저 그들이 무엇인지, 어떻게 많들어지는지 그리고 무엇을 할 수 있는지

에 대해 이해해야해. 

 

[생성하기]

Array 

: Array는 매우 간단하게 선언할 수 있어.

var arr = []; //Empty array
var arr = [1,2,3]; //Array which contains 1,2,3

아니면 내장된 생성자로

var arr = new Array(); //empty array
var arr = new Array(1,2,3);//Array which contains 1,2,3 

아니면 

var arr = Array.from("123"); //["1","2","3"]

※ 알아둘 것 :

new Array()는 정말x3 필요하지 않으면 쓰지마, 왜냐하면 :

• 기본 [] 선언보다 아주 많이 느려
• [] 가 더 타이핑할때 빨라
• 아래와 같은 실수를 할 수가 있어

var arr1 = new Array(10); //arr1[0] = undefined but arr1.length = 10
var arr2 = [10]; // arr2[0] = 10 and arr2.length = 1;
var arr3 = new Array(1,2,3); //[1,2,3]
var arr4 = [1,2,3];//[1,2,3] 

 

Set

: Set은 내장형 생성자로만 생성할 수 있어. 단축키는 없듬

Set은 iterable한 객체만 인자로 받기 때문에  " new Set(1); " 이런식으로는 불가능해

아래의 방법처럼 Array.from을 사용해서도 가능해

var set = new Set([1,2,3]); // {1,2,3}
var arr = Array.from(set);//[1,2,3]

 

[요소에 접근하기]

• Set은 Array처럼 index로 임의의 접근이 불가능해 

console.log(set[0]); //undefined
console.log(arr[0]); //1

• 더욱이, Array 데이터는 연속적 메모리 공간에 저장되기 때문에, CPU는 pre-fetching해서 데이터 접근을 더욱 빨리 할 수 있어. 따라서 일반적으로 Array에서 접근은 다른 추상적 데이터 유형과 비교해서 더 빠르고, 더 효율적이야
• Set은 Array보다 element를 체크하는데 있어서 더 간단한 문법을 가지고 있어 Set.prototype.has(value) vs Array.prototype.indexOf(value)

console.log(set.has(0)); // boolean - false
console.log(arr.indexOf(0)); // -1
console.log(set.has(1)); //true
console.log(arr.indexOf(1)); //0
// 요소가 Array에 존재하는지 여부
var isExist = arr.indexOf(1) !== -1;

• ES6에서 Array.prototype.includes()로 has()와 비슷하게 사용할 수 있어. 

 

[요소에 추가/삽입하기]

• Array.prototype.push() 로 배열의 끝에 요소를 빠르게 추가할 수 있어.
• Array.prototype.unshift() 로 배열의 시작에 요소를 추가할 수 있어.

arr.push(4); //[1,2,3,4]

arr.unshift(3); //[3,1,2,3]
arr.unshift(5, 6); //[5,6,3,1,2,3]

• Set에서는 Set.prototype.add() 만 사용할 수 있어. 왜냐하면 Set은 "중복없는" 프로퍼티를 유지해야해서, add()를 호출할때마다 Set은 모든 요소들의 중복이 없는지 확인을 해야해.   

set.add(3); //{1,2,3} 
set.add(4); //{1,2,3,4}

 

[요소 삭제하기]

Array

• pop() -마지막 요소를 제거하고 제거된 요소를 반환
• shift() - 첫번째 요소를 제거하고 제거된 요소를 반환
• splice(index,deleteCount) - index번째부터 deleteCount만큼 삭제

Set

• delete(element) - 특정 요소를 Set으로부터 제거
• clear() - 모든 요소를 Set으로부터 제거

[그래서, 언제 Set이 좋아? Array는 언제 좋아?]

• Set은 중복되지않은 요소들을 가지기때문에 중복된 데이터를 저장하지 않고싶을때 좋아
• Set의 기본동작은 union(), intersect(), difference() 등등과 같아. 얘네는 내장된 동작을 통해 쉽게 이행되지. delete() 메소드 덕분에, 2 Set을 사용하는 것이 훨씬 편해
• Array는 요소들을 순서대로 유지하여 빠른 접근 혹은 큰 수정 혹은 인덱스로 요소의 직접적인 접근을 하는 모든 동작시에 의미가 있어. (Set을 사용한다면, 중간에 위치한 요소를 어떻게 접근할거야?..

[결론]

일반적으로, Set은  "중복되지않은" 데이터를 최소한의 노력으로 유지하기를 원할때 빼고는, Array보다 그렇게 크고 확실한 이점을 갖고 있지는 않아. 반면에, Array는  항상 선택되지. 이유가 뭐냐고? 적은 CPU 사용으로 필요할때 요소를 가져올 수 있어.

 

 

[원문]

https://medium.com/front-end-weekly/es6-set-vs-array-what-and-when-efc055655e1a