배열 루프 에서

배열 루프 소개

배열을 다루다 보면 배열의 각 값에 대해 코드를 실행하고 싶을 때가 있어요. 이것을 배열을 순회한다거나 루프를 도는 것이라고 해요.

여기서는 그 과정에서 배열을 수정하고 싶지 않은 경우를 살펴볼게요. 배열을 변환하는 방법은 배열 변환을 참고해요.

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를 사용하면 루프 실행을 완전히 멈출 수 있어요.

JavaScript에는 객체의 키를 순회하는 for...in문도 있어요. for...of와 for...in은 서로 바꿔 쓸 수 있는 게 아니라는 점이 중요해요. 자세한 내용은 MDN 문서를 참고해요.

forEach 메서드

모든 배열에는 배열의 원소를 순회하는 데에도 사용할 수 있는 forEach 메서드가 있어요.

forEach는 콜백을 매개변수로 받아요. 콜백 함수는 배열의 각 원소마다 한 번씩 호출돼요.

const numbers = [6.0221515, 10, 23];

numbers.forEach((number) => console.log(number));
// => 6.0221515
// => 10
// => 23

위 예시에서 콜백은 현재 원소만 매개변수로 사용해요. 필요하다면 콜백은 최대 세 개의 매개변수를 사용할 수 있어요.

• 현재 반복의 값
• 현재 반복의 인덱스
• 전체 배열

const numbers = [6.0221515, 10, 23];

function callback(number, index, fullArray) {
  console.log(number, index, fullArray);
}

numbers.forEach(callback);
// => 6.0221515 0 [ 6.0221515, 10, 23 ]
// => 10 1 [ 6.0221515, 10, 23 ]
// => 23 2 [ 6.0221515, 10, 23 ]

콜백 외에도 forEach는 반복에 사용할 this 컨텍스트를 선택적 두 번째 매개변수로 받아요. MDN의 "thisArg 사용" 섹션에서 예시를 볼 수 있어요.

forEach를 사용할 때 염두에 둘 점이 몇 가지 있어요.

• forEach 루프가 시작되면 반복을 멈출 방법이 없어요. break와 continue라는 문은 이 문맥에 존재하지 않아요.
• 루프를 시작한 뒤에 배열을 수정하면 forEach가 이상하게 동작해요. 끝에 추가한 원소는 무시되고, 원소를 제거하면 다른 원소가 건너뛰어질 수 있는 등 여러 문제가 생겨요. 이런 문제를 피하려면 콜백에서 기반이 되는 배열을 절대 수정하지 마세요.
• forEach 메서드 자체의 반환 값은 undefined예요. 그래서 뒤에 다른 배열 메서드를 연달아 호출할 수 없어요.
• 성능을 위해 코드를 최적화해야 한다면 for나 for...of를 대신 사용하는 것을 고려해 보세요. 둘 다 약 세 배 더 빨라요.