타닥타닥 개발자의 일상

[JavaScript, JS ]Arrays vs Sets / Maps vs Objects 언제 어디서 써야할까? / data structure 사용 케이스 / 자료 구조체 사용 경우 본문

코딩 기록/JavaScript

[JavaScript, JS ]Arrays vs Sets / Maps vs Objects 언제 어디서 써야할까? / data structure 사용 케이스 / 자료 구조체 사용 경우

NomadHaven 2023. 6. 1. 10:28

데이터의 출처는 세가지 종류가 있다.

1. 프로그램 그 자체 : 데이터가  소스 코드 자체에 적혀있는 경우 (status messages)
2. UI를 통해서 : 유저의 input이나 DOM으로 쓰여진 데이터(tasks in todo app)
3. 외부의 출처를 통해 : Web API 통해서 불러오는 데이터들 (recipe obejct) 

이러한 데이터들은 collection of data 데이터의 집합이며 Data structure  자료 구조체를 가진다.

 

만약 데이터가 단순한 리스트에 대한 값이라면 👉 Arrays or Set 이 적절하다.
만약 데이터가 key,value 값이 필요하다면👉 Object or Map 이 적절하다.

 

key는 vlaue를 설명하는 역할을 한다. 따라서 value에 추가적 설명이 필요하다면 Object or Map을 써야한다.

web API는 JSON 형태로 전달되는 Data로서 JSON은 key,value가 필수적이다.

따라서 JSON을 받아서 활용할때 역시 Object, Map을 쓰는게 적절하다.

그렇다면 Array와 Set는 각각 어떤 경우에 써야할까?

 

 

Array VS SET 



두 자료 구조는 value를 설명할 필요가 없는 list에 사용된다.

 

Arrays 배열 
tasks = ['Code','Eat','Code']

사용 케이스 :

  • 순서가 있는 value가 필요할때 사용.
  • 데이터를 수정할 필요가 있을때 사용.

 

Set
tasks = new Set(['Code','Eat','Code'])


사용 케이스:

  • 고유한 값만이 필요할때 사용.
  • 고성능의 퍼포먼스가 필요할때 사용.(Set를 통해  item을 검색하거나 삭제하는건 Array를 이용하는 것보다 10배가 더 빠름)
  • Array의 중복값을 삭제할때 사용

 

 

Object VS MAP
Object 
task = {
  task: 'Code',
  date : 'today',
  repeat: true
}

사용 케이스:

  • key/value를 저장하는 좀더 고전적인 자료구조, 오래된 만큼 많이 쓰인다.
  • 작성하기 쉽고 .과 []통해서 접근하기 쉽다. 
  • 힘수를 포함해야 할때 사용한다. 함수를 메서드처럼 사용가능.
  • JSON을 작업해야할 때 사용한다.

 

Maps
task =new Map([
  ['task', 'Code'],
  ['date', 'today'],
  [false, 'Start coding']

]);


사용 케이스 :

  • 오브젝트보다 더 나은 성능
  • key값으로 어떤 데이터 타입도 사용가능.
  • iterate하기 쉽다. 
  • 자료구조체의 크기를 파악하기 쉽다. (size메서드 사용)
  • 간편하게 key값을 vluae값과 묶고 싶을때 사용
  • key 값이 문자열이 아닐때 사용.
Comments