JavaScript / Map 과 스프레드 연산자 사용해서 간단한 Quiz앱 만들기 / Map을 Object 와 Array 배열로 변환하는 방법

이전의 글을 통해서 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 자료구조를 출력한 출력문이다.

console.log(question);

 

 

아래는 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,
  },
};

 

console.log(Object.entries(openingHours));

두 자료구조의 출력문을 보면 공통점이 보인다.

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으로 변환된 Object

그렇다면 map을 array 배열로 변환하는 방법도 있을까?

물론 존재한다.

해당 맵의 element 를 스프레드 연산자를 이용하여 배열에 대입하고 key, value 메서드를 쓰면 된다.

console.log([...question.keys()]);
console.log([...question.values()]);

아래의 코드를 출력하면 key 값만 담긴 배열, value 값만 담긴 배열이 잘 출력되는 게 보인다.