[javascript] 배열 4 / 배열 반복 (for, forEach, for...of)

배열 순회 방법

1. for문

 

• 배열의 인덱스를 직접 사용 가능
• 반복 제어가 자유로움 (중간에 break, continue 가능).
• 성능 면에서 가장 빠른 경우가 많음
• ⚠️ 주의: 배열 길이를 매번 확인하면 성능에 영향을 줄 수 있으니,
                큰 배열에서는 const len = arr.length;로 미리 저장하는 것이 좋음.

const arr = ['apple', 'banana', 'cherry'];

for (let i = 0; i < arr.length; i++) {
  console.log(i, arr[i]);
}

/*
0 'apple'
1 'banana'
2 'cherry'
*/

 

---

2. for...of

 

• 배열의 값만 직접 접근 가능. 인덱스는 자동으로 제공되지 않음.
• 읽기 쉽고 간결함.
• 반복문 내에서 break, continue 사용 가능
• 인덱스가 필요하면 entries()와 함께 사용 가능

// [문법]
for (const 요소 of 배열) {
  // 반복 실행할 코드
}

 

const arr = ['apple', 'banana', 'cherry'];

for (const fruit of arr) {
  console.log(fruit);
}

/*
'apple'
'banana'
'cherry'
*/

// ex) 인덱스가 필요하면 entries()와 함께 사용 가능
for (const [index, fruit] of arr.entries()) {
  console.log(index, fruit);
}

---

forEach()

 

• 배열 메서드 방식이라 가독성이 좋음.
• 리턴값을 무시함 (return 해도 반복 종료되지 않음).
• break, continue 불가.
• 콜백 함수 안에서 요소, 인덱스, 원본 배열 모두 접근 가능
• ⚠️ 주의: forEach()는 반복 중간에 멈출 수 없어서, 조건에 따라 멈춰야 한다면 for나 for...of가 필요함.

// [문법]
배열.forEach(function(요소, 인덱스, 배열) {
  // 반복 실행할 코드
});

// [문법 => 화살표 함수]
배열.forEach((요소, 인덱스, 배열) => {
  // 반복 실행할 코드
});

 

const arr = ['apple', 'banana', 'cherry'];

arr.forEach((fruit, index) => {
  console.log(index, fruit);
});
/*
0 'apple'
1 'banana'
2 'cherry'
*/

---

References

[JavaScript] 반복문 (for, forEach, for...of, for...in, while, do while)