for of 배열에 entries 메서드 이용해서 인덱스까지 추가하여 출력하기

restuarnt라는 object에 있는 속성값에 있는 value들을 for 문을 이용해서 하나하나 출력하고 싶다고 하자. 

const restaurant = {
  starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
  mainMenu: ['Pizza', 'Pasta', 'Risotto'],
  }

 

그렇다면 menu라는 변수를 먼저 만든다. 그리고 spread연산자를 사용해 starterMenu 속성과 mainMenu 속성에 있는 값들을 모두 menu라는 변수에 집어넣는다.

const menu = [...restaurant.starterMenu, ...restaurant.mainMenu];

 

여기서 단순히 menu에 모두 들어간 값만 for문으로 출력하고 싶다면

for (const item of menu) console.log(item);

이렇게만 적어도 잘 나온다

Focaccia
Bruschetta
Garlic Bread
Caprese Salad
Pizza
Pasta
Risotto

 

하지만 단순히 속성의 value값만 출력하는게 아니라 출력하면서 index값까지 더하고 싶다면?

 

for (const item of menu.entries()) {
  console.log(`${item[0] + 1}: ${item[1]}`);
 }

menu라는 배열에 있는 entries()라는 메서드를 이용하면 된다. 

위의 코드를 실행하면 아래와 같이 출력된다.

1: Focaccia
2: Bruschetta
3: Garlic Bread
4: Caprese Salad
5: Pizza
6: Pasta
7: Risotto

여기서 잠깐 어리둥절할지도 모른다.

 

console.log(`${item[0] + 1}: ${item[1]}`); 

이면 0번째 인덱스에 Focaccia가 있으므로 Focaccia : Bruschetta 라고 출력되어야 하는게 아닌가?

 

위와 같은 결과를 이해하기 위해선 아래의 배열을 출력해봐야한다.

console.log([...menu.entries()]);

위의 코드는 콘솔창에서 이렇게 출력되는데 

n번째 인덱스 마다 element가 2개인 배열이 있는게 확인된다.

n번째 인덱스의 n번째 배열의 제일 첫번째 인덱스 값은 숫자 n이며 두번째 인덱스 값이 음식인 value 값이다

 

따라서 

for (const item of menu.entries()) {
 console.log(`${item[0] + 1}: ${item[1]}`);
 //           item은 2개 element로 이뤄진 배열이며 item의 제일 첫번째 값은 index값, 그 다음 값은 value다
}

로 이해할 수 있다.

 

위의 코드를 조금 변형하여

for (const [i, el] of menu.entries()) {
  console.log(`${i + 1}: ${el}`);
}

로 입력해도 결과는 동일하게 나온다.

1: Focaccia
2: Bruschetta
3: Garlic Bread
4: Caprese Salad
5: Pizza
6: Pasta
7: Risotto