배열 반복하기

배열을 처음부터 끝까지 훑습니다

1.10 의 for 로도 배열을 다룰 수 있습니다. 다만 번호를 세는 일이 매번 되풀이되고, 조건의 등호 하나만 틀려도 한 번 모자라거나 남습니다.

배열에는 더 짧고 안전한 방법이 둘 있습니다 — for...of 와 forEach 입니다.

세 가지 방법

const fruits = ["사과", "바나나"];

for (let i = 0; i < fruits.length; i++) {
	console.log(`for: ${fruits[i]}`);
}

for (const fruit of fruits) {
	console.log(`for...of: ${fruit}`);
}

fruits.forEach(fruit => console.log(`forEach: ${fruit}`));

for...of 는 값이 바로 들어옵니다. 번호를 세지 않으니 실수할 자리도 없습니다.

forEach 는 함수를 받습니다

2.6 에서 본 콜백입니다. forEach 는 값마다 한 번씩 넘겨받은 함수를 부릅니다. 두 번째 매개 변수로 번호도 받습니다.

const items = ["연필", "공책", "지우개"];

items.forEach((item, index) => {
	console.log(`${index + 1}. ${item}`);
});

번호가 필요 없으면 매개 변수를 하나만 받으면 됩니다. 넘겨주는 쪽이 둘을 주더라도 받는 쪽이 하나만 적으면 나머지는 버려집니다(2.6).

합계 구하기

const prices = [1000, 2000, 500];

let total = 0;

for (const price of prices) {
	total += price;
}

console.log(total);

더해 갈 값은 반복문 밖에 두어야 합니다. 안에 두면 돌 때마다 새로 만들어집니다(2.4).

중간에 멈출 수 있는가

for 와 for...of 는 break 로 멈출 수 있습니다. forEach 는 멈출 수 없습니다. 값마다 함수를 부르는 것이라 그 함수 안의 return 은 그 회차만 끝냅니다.

const numbers = [1, 2, 3, 4];

for (const n of numbers) {
	if (n > 2) break;
	console.log(`for...of: ${n}`);
}

numbers.forEach(n => {
	if (n > 2) return;
	console.log(`forEach: ${n}`);
});

출력이 같아 보이지만 다릅니다. 위는 3에서 끝났고, 아래는 3과 4에서도 함수를 부르되 아무것도 하지 않고 건너뛴 것입니다. 값이 많으면 차이가 납니다.

무엇을 선택할까

• for...of — 기본으로 사용합니다. 중간에 멈출 수 있습니다.
• forEach — 멈출 일이 없고 짧게 적고 싶을 때.
• for — 번호가 꼭 필요하거나, 거꾸로 돌거나, 두 칸씩 건너뛸 때.

처음에 자주 걸리는 것

for (const x in ["가", "나"]) console.log(x);   // "0" "1" 이 나옵니다

SyntaxError: Illegal break statement

직접 해보기

이 단원의 정리