가독성 높은 JavaScript Array 순회 방법 TOP 4

JavaScript에서 배열을 순회하는 방법은 다양하지만, 상황에 맞는 가장 가독성 좋은 방법을 선택하면 코드가 훨씬 깔끔해지고 유지보수가 쉬워집니다. 이번 글에서는 JavaScript Array 순회 방법 TOP 4를 소개하고, 각각의 사용법과 장단점을 설명하겠습니다.

---

1. forEach 메서드

forEach는 배열을 순회할 때 가장 많이 사용하는 메서드 중 하나로, 배열의 각 요소에 대해 지정한 함수를 호출하여 작업을 수행합니다. 함수형 프로그래밍 스타일을 적용할 수 있어 코드가 간결하고, 가독성이 뛰어납니다.

사용 예시

const fruits = ["apple", "banana", "cherry"];

fruits.forEach((fruit) => {
  console.log(fruit);
});
// 출력:
// apple
// banana
// cherry

장점

• 코드가 간결하고 가독성이 뛰어납니다.
• 인덱스가 필요할 때는 두 번째 매개변수로 쉽게 접근 가능합니다.

단점

• break나 continue를 사용할 수 없으므로, 모든 요소를 순회해야 합니다.
• 반환값이 없기 때문에 체이닝할 수 없습니다.

---

2. for...of 루프

for...of는 ES6(ES2015)에서 추가된 문법으로, 배열이나 이터러블(Iterable) 객체의 값을 순서대로 순회할 수 있습니다. 특히 인덱스가 필요하지 않고, 단순히 배열의 값을 하나씩 출력하거나 사용하려는 경우에 적합합니다.

사용 예시

const fruits = ["apple", "banana", "cherry"];

for (const fruit of fruits) {
  console.log(fruit);
}
// 출력:
// apple
// banana
// cherry

장점

• 배열의 값을 순서대로 순회하기에 적합하여 가독성이 뛰어납니다.
• Set, Map, 문자열 등 다양한 이터러블 객체에 사용할 수 있습니다.

단점

• 인덱스에 접근하려면 별도로 변수를 관리해야 합니다.
• 객체에는 사용할 수 없습니다.

---

3. map 메서드

map 메서드는 배열의 각 요소를 순회하면서 변환된 새로운 배열을 생성합니다. 기존 배열을 변경하지 않으며, 반환된 새로운 배열을 사용할 수 있어 함수형 프로그래밍에서 많이 사용됩니다.

사용 예시

const numbers = [1, 2, 3];

const doubled = numbers.map((num) => num * 2);
console.log(doubled); 
// 출력: [2, 4, 6]

장점

• 배열 요소를 변환할 때 매우 유용하며, 새로운 배열을 반환하므로 원본 배열을 유지합니다.
• 체이닝이 가능하여 다른 배열 메서드와 함께 활용할 수 있습니다.

단점

• forEach와 달리 순회 목적이 아닌, 변환을 위한 경우에 적합합니다.
• 모든 요소를 순회하며 변환을 수행하므로 중간에 순회를 멈출 수 없습니다.

---

4. 전통적인 for 루프

전통적인 for 루프는 배열의 인덱스와 반복 횟수를 지정할 수 있는 유연한 순회 방식입니다. 특정 조건을 기반으로 반복을 종료하거나 건너뛰어야 하는 경우에 적합합니다.

사용 예시

const fruits = ["apple", "banana", "cherry"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// 출력:
// apple
// banana
// cherry

장점

• 시작점, 종료 조건, 증감식을 자유롭게 설정할 수 있어 유연합니다.
• break와 continue를 사용할 수 있습니다.

단점

• 코드가 길어지기 쉬워 간단한 순회에는 가독성이 떨어질 수 있습니다.
• 인덱스를 직접 관리해야 하므로 실수로 인한 오류 가능성이 있습니다.

---

요약

순회 방식	주로 사용하는 경우	장점	단점
forEach	단순히 배열의 요소를 순회할 때	코드가 간결하고 가독성 높음	break와 continue 사용 불가
for...of	배열, 이터러블 객체를 순서대로 순회할 때	배열의 값을 순서대로 쉽게 접근	인덱스 필요 시 별도 관리 필요
map	배열을 변환하여 새로운 배열을 만들 때	변환된 새 배열 반환, 체이닝 가능	순회 목적에는 부적합
전통적 for	조건에 따라 반복을 중단하거나 인덱스 필요 시	유연하고 break 가능	코드가 다소 복잡하고 오류 가능성 있음

---

결론

JavaScript에서 배열을 순회할 때는 목적에 맞는 최적의 방법을 선택하는 것이 중요합니다.

• 단순히 배열의 요소를 순회하려면 forEach가 가장 간결하고 가독성이 높습니다.
• 배열의 값을 하나씩 처리할 때는 for...of가 직관적이고 편리합니다.
• 변환된 배열을 만들고 싶다면 map 메서드가 적합합니다.
• 복잡한 조건이나 중간에 순회를 멈춰야 할 때는 전통적인 for 루프가 가장 유연합니다.

상황에 맞는 최적의 배열 순회 방법을 선택하여, 코드의 가독성을 높이고 유지보수를 쉽게 만들어보세요!