[JavaScript] 모던 자바스크립트 data 저장 방식(Array, object, map, set)

자바스크립트의 데이터 소스를 크개 3가지로 나눠보자면

1. 프로그램 자체애서 적어서 바로 받아온 것
2. UI에서 넣어온 소스 (from DOM)
3. WEB Api같은 외부에서 fetch한 소스

이렇게 이 3개지의 소스에서 가져온 데이터를 저장하는 방식에는 총 4가지가 있다. 여기에는 몇 가지 기준이 있는데, 단순한 리스트가 필요한건지, 아니면 key, value 값이 필요한건지 생각을 해서 기준에 맞추어서 쓰면 된다.

 

 

저장방식은 Array, Set, Object, Map 총 4가지이다.

심플한 리스트가 필요하다면 array와 set을 이용해서 저장하면 된다.

Array

color = [‘red’, ‘gold’, ‘red’];
//{ ‘red’, ‘gold’, ‘red’}

👉 반복되는 값이 리스트에 포함이 될 수도 있고요

👉 필요에 의하면 데이터를 쉽게 조작 할 수도 있습니다

Set

color = new Set([‘red’, ‘gold’, ‘red’]);
//{‘red’, ‘gold’}

👉 반복되는 값은 지워지고 나옵니다.

👉 Unique한 값을 다룰때 사용합니다

👉 high-performance가 중요할 때 사용합니다

Array vs Set 더 자세히 알아보기

key와 그에 해당하는 value값이 동시에 필요할 때, Object와 Map을 사용해서 저장합니다

Object

color = {
like: ‘red’,
peach: ‘pink’,
repeat: true
};

👉 전통적인 방식의 key/value 저장 방법입니다.

👉 쓰고 접근하기 쉬습니다

👉 JSON을 이용해서 Map으로 변경할 수 있습니다

👉function(함수)포함하고 있을 대도 사용하기 좋습니다

 

Map

color = new Map {[
[‘like’ , ‘red’] ,
[‘peach’ , ‘pink’] ,
[‘repeat’ , ‘true’]
]};

👉 key는 다양한 데이터타입을 가질 수 있습니다.

👉 더 나은 구현성을 가지고 있습니다

👉 단순히 key와 value값이 필요할 때 쓸 수 있습니다

👉key가 string타입이 아니여도 사용할 수 있습니다

👉반복문 구현에 쉽습니다

Object vs Map 더 상세히 알아보기