Looping Arrays : The for-of Loop

배열을 순회하는 방법 중 하나인 for-of 루프에 대해 알아보도록 하자. 예시 코드는 아래와 같다.

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

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

이렇게 for-of를 이용해 간단하게 루프를 돌릴 수 있다. for 루프와 비교하면 훨씬 간단하다. 배열의 길이를 우리가 직접 지정하지 않아도 되기 때문이다.

for-of 루프를 사용해 인덱스도 같이 뽑아주는 방법은 다음과 같다

for (const item of menu.entries()) {
  console.log(item);
}

이렇게 하면 console에 이렇게 결과가 나온다.

(2) [0, 'Focaccia']
(2) [1, 'Bruschetta']
(2) [2, 'Garlic Bread']
(2) [3, 'Caprese Salad']
(2) [4, 'Pizza']
(2) [5, 'Pasta']
(2) [6, 'Risotto']

이 결과를 토대로 보기 좋게 정렬하려면 다음과 같이 코드를 작성할 수 있다.

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

배열에서 첫 번째 요소가 인덱스이므로 item[0]으로 인덱스를 가져왔고, 1부터 시작하기를 원하므로 +1을 해주었다. 그리고 아이템은 두 번째 자리에 있는 요소이므로 item[1]를 사용했다.

이것보다 더 간단하게, 구조 분해 할당을 통해 코드를 작성할 수 있다.

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

구조 분해 할당을 사용하여 menu.entries()에서 인덱스 i와 요소 el을 각각 변수로 받아 쉽게 사용할 수 있다. 이렇게 깔끔하게 결과가나온다.

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