일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 29 |
30 | 31 |
- SpringBoot
- nodejs
- JS
- 랜덤넘버
- array
- RecyclerView
- fragment
- Linux
- 리액트
- Kotlin
- 오버라이딩
- TypeScript
- Java
- Javscript
- 안드로이드
- npm
- React
- Hook
- stylesheet
- scrollview
- 랜덤번호
- 자바스크립트
- JavaScript
- 코틀린
- Android
- button
- GoogleMaps
- 구글맵스
- 스프링부트
- TextView
- Today
- Total
타닥타닥 개발자의 일상
JavaScript / Map 과 스프레드 연산자 사용해서 간단한 Quiz앱 만들기 / Map을 Object 와 Array 배열로 변환하는 방법 본문
JavaScript / Map 과 스프레드 연산자 사용해서 간단한 Quiz앱 만들기 / Map을 Object 와 Array 배열로 변환하는 방법
NomadHaven 2023. 6. 1. 10:12이전의 글을 통해서 Map이라는 자료 구조를 배워봤다.
그렇다면 Map을 어떻게 활용할수 있을까?
아래 코드와 같이 question이라는 이름을 가지는 Map 형태의 자료 구조가 있다고 하자.
const question = new Map([
['question', 'What is the best programming language in the world?'],
[1, 'C'],
[2, 'Java'],
[3, 'JavaScript'],
['correct', 3],
[true, 'Correct 😜'],
[false, 'Try again'],
]);
우리가 만들고 싶은 앱은
1. prompt창에서 "What is the best progamming language in the world?' 라는 질문이 뜨고 ->
2. 해당 질문에 3이라는 번호(JavaScript라는 value의 key값)를 입력하면 ->
3. Correct 라는 대답이 뜨게 하는 앱이다. ->
4. 3외의 답을 입력하면 Try again 이라는 대답이 뜨게 처리하고 싶다.
어떻게 코드를 작성해야 할까?
위와 같은 기능의 퀴즈앱을 만드는데는 if문 조차 필요 없다.
const answer = Number(prompt('Your answer'));
console.log(question.get(question.get('correct') === answer));
1. promprt 창을 띄워 입력값을 받는다.
2. 입력 값을 숫자로 전환해 변수 answer에 대입한다.
3. 대입된 answer이란 변수가 key인 correct의 value 값 3과 일치한다면 true가 된다.
4. true라는 key 값의 value인 Correct 라는 답이 출력되게 한다.
위처럼 코드를 작성했다면,
프롬프트 창에 3이라는 숫자를 입력해보자
Map이라는 자료구조의 기능에 대해 이해하면 위와 같이 여러 방면으로 활용 가능하다.
Map 자료구조는 iterable해서 반복문으로도 활용 가능하다.
for (const [key, value] of question) {
if (typeof key === 'number') console.log(`Answer ${key}: ${value}`);
}
위의 코드를 출력하면 key와 value가 하나씩 짝을 맞춰 출력되는게 보인다. 즉 Map은 iterable한 자료구조라는 뜻이다.
Object가 interable한 것 처럼 유사한 형태의 Map도 Interable 하다.
아래는 Map 자료구조를 출력한 출력문이다.
아래는 Object 자료구조를 entries 메서드를 통해 출력한 출력문이다.
const weekdays = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
const openingHours = {
[weekdays[3]]: {
open: 12,
close: 22,
},
[weekdays[4]]: {
open: 11,
close: 23,
},
[weekdays[5]]: {
open: 0, // Open 24 hours
close: 24,
},
};
두 자료구조의 출력문을 보면 공통점이 보인다.
element 안에 배열이 있으며 배열이 key값과 value 값을 가진다는 점이다.
이러한 유사성 때문에 Object 는 Map으로 전환 가능하다.
Object를 Map으로 전환하는 방법 또한 간단하다
new Map에 기존에 존재하는 Object를 넣고 새로운 변수를 선언만 해두면 된다.
//Convert object to map
console.log(Object.entries(openingHours));
const hoursMap = new Map(Object.entries(openingHours));
console.log(hoursMap);
이러한 방법으로 선언된 hoursMap이라는 Map은 아래와 같이 출력된다.
그렇다면 map을 array 배열로 변환하는 방법도 있을까?
물론 존재한다.
해당 맵의 element 를 스프레드 연산자를 이용하여 배열에 대입하고 key, value 메서드를 쓰면 된다.
console.log([...question.keys()]);
console.log([...question.values()]);
아래의 코드를 출력하면 key 값만 담긴 배열, value 값만 담긴 배열이 잘 출력되는 게 보인다.