소개
배열을 다루다 보면 배열의 각 값에 대해 코드를 실행하고 싶을 때가 있어요.
이것을 배열을 순회하거나 루프를 도는 것이라고 해요.
여기서는 그 과정에서 배열을 수정하지 않는 경우를 살펴볼게요.
배열을 변환하는 방법은 배열 변환 개념을 참고해요.
for문
배열을 순회하는 가장 기본적인 방법은 for문을 사용하는 것이에요. for문 개념을 참고해요.
const numbers = [6.0221515, 10, 23];
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
// => 6.0221515
// => 10
// => 23
for...of문
각 반복에서 값을 직접 다루고 싶고 인덱스가 전혀 필요 없다면, for...of문을 사용할 수 있어요.
for...of는 위에서 본 기본 for문과 비슷하게 동작하지만, 루프 안에서 변수로 _인덱스_를 다룰 필요 없이 _값_을 바로 받을 수 있어요.
const numbers = [6.0221515, 10, 23];
// Because re-assigning number inside the loop will be very
// confusing, disallowing that via const is preferable.
for (const number of numbers) {
console.log(number);
}
// => 6.0221515
// => 10
// => 23
일반적인 for문과 마찬가지로, continue를 사용해 현재 반복을 건너뛰고 break를 사용해 루프 실행을 완전히 멈출 수 있어요.
forEach 메서드
모든 배열에는 배열의 원소를 순회하는 데 사용할 수 있는 forEach 메서드가 있어요.
forEach는 콜백을 매개변수로 받아요.
콜백 함수는 배열의 각 원소마다 한 번씩 호출돼요.
현재 원소, 그 원소의 인덱스, 그리고 전체 배열이 콜백에 인자로 전달돼요.
보통은 현재 원소나 인덱스만 사용해요.
const numbers = [6.0221515, 10, 23];
numbers.forEach((number, index) => console.log(number, index));
// => 6.0221515 0
// => 10 1
// => 23 2
forEach 루프가 시작된 뒤에는 반복을 멈출 방법이 없어요.
이 문맥에서는 break문과 continue문이 존재하지 않아요.
지침
신참 마술사 Elyse는 자신의 덱을 여러 가지 방식으로 분석할 필요가 있어요. 간단하게 하기 위해, Elyse는 값이 1부터 10까지인 카드만 사용해요.
1. 덱에 특정한 종류의 카드가 몇 장 있는지 확인하기
Elyse는 자신의 덱에 특정한 종류의 카드가 몇 장 있는지 알고 싶어 해요.
카드 배열(Elyse의 덱)과 세려는 카드의 종류, 이렇게 두 개의 매개변수를 받는 cardTypeCheck 함수를 작성해요.
이 함수는 forEach를 사용하고, 덱에 있는 지정된 종류의 카드 개수를 반환해야 해요.
const cardType = 3;
cardTypeCheck([1, 2, 3, 4], cardType);
// => 1
2. 홀수 또는 짝수 카드가 몇 장인지 확인하기
또 다른 마술을 위해, Elyse는 자신의 덱에 홀수 또는 짝수 카드가 몇 장 있는지 알아야 해요.
카드 배열(Elyse의 덱)과 불리언(true는 '짝수', false는 '홀수'에 해당해요), 이렇게 두 개의 매개변수를 받는 determineOddEvenCards 함수를 구현해요.
이 함수는 숫자 하나를 반환해야 해요. 즉, 덱에 있는 홀수 또는 짝수 카드의 개수(두 번째 인자의 값에 따라 달라져요)를 반환해요.
연습 삼아, 이번에는 함수 구현에 for...of문을 사용해 봐요.
determineOddEvenCards([1, 2, 3, 1, 5, 6], true);
// => 2
determineOddEvenCards([1, 2, 3, 1, 5, 6], false);
// => 4
학습 연습 문제
