Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- TextView
- 코틀린
- React
- 오버라이딩
- 랜덤번호
- GoogleMaps
- Hook
- JS
- Javscript
- Linux
- 안드로이드
- TypeScript
- Android
- fragment
- 랜덤넘버
- SpringBoot
- nodejs
- scrollview
- Kotlin
- 리액트
- RecyclerView
- Java
- 스프링부트
- 자바스크립트
- JavaScript
- stylesheet
- button
- array
- 구글맵스
- npm
Archives
- Today
- Total
타닥타닥 개발자의 일상
[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 값이 문자열이 아닐때 사용.
'코딩 기록 > JavaScript' 카테고리의 다른 글
[JS/자바스크립트] 문자열을 소문자 변환, 대문자 변환, 자르기, 교체하기 하는 방법 (1) | 2023.06.09 |
---|---|
[JS, JavaScript] Map 자료구조 개념 이해를 체크하기 위한 간단한 코딩문제 풀어보기 (0) | 2023.06.02 |
JavaScript / Map 과 스프레드 연산자 사용해서 간단한 Quiz앱 만들기 / Map을 Object 와 Array 배열로 변환하는 방법 (0) | 2023.06.01 |
Map 을 이용해서 다양한 형태의 key값을 가지는 구조체 만들기 / Array, Set의 보완 / Map 구조체의 메서드 알아보기 (0) | 2023.05.31 |
Set 이용해서 Array 의 중복 삭제하기, Set 이용해서 중복 없는 배열 만들기 (0) | 2023.05.26 |
Comments