JS 배열의 요소 순회하기 (for of, forEach,reduce)

JS

for of 

---

for of 는 배열의 요소를 하나씩 꺼내어 사용하는 방법을 말한다. 

좀 더 어려운 말로 '배열의 각 요소를 순회하며 처리한다'로 표현할 수 있다.

(iterable 객체의 요소에 대해 반복하는 데 사용되는 반복문, 이번 글에서는 배열에 관해서만 설명하겠다.)

for of 의 기본 구문

for (let element of array) {
    // element(요소)에 대한 작업 수행
}

for of 의 사용 예시

const fruits = [apple, banana, orange, kiwi, strawberry];

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

// 출력
// apple
// banana
// orange
// kiwi
// strawberry

for of 의 특징

1. 간결함 : 배열의 인덱스를 다룰 필요 없이 요소를 직접 다루므로 코드가 더 간결해진다.

2. breake와 continue 사용 :  "break" 문을 사용하여 루프를 종료하거나 "continue" 문을 사용하여 현재 반복을 건너뛸 수 있다.

forEach

---

forEach는 배열의 각 요소에 대해 주어진 함수를 한 번씩 실행하는 메서드이다. 이를 통해 배열의 모든 요소에 접근하고 조작할 수 있다. 

forEach 의 기본 구문

array.forEach(function(currentValue, index, array) {
  // currentValue: 현재 처리 중인 요소의 값
  // index: 현재 처리 중인 요소의 인덱스
  // array: forEach를 호출한 배열 자체
  // 여기서 실행할 작업을 작성
});

forEach 의 사용 예시

const fruits = [apple, banana, orange, kiwi, strawberry];

fruit.forEach(function(fruit, index) {
  console.log(`Index ${index}: ${fruit}`);
});

//출력
//Index 0: apple
//Index 1: banana
//Index 2: orange
//Index 3: kiwi
//Index 4: strawberry

forEach 의 특징

1. 중단을 할 수 없다(return을 통한 종료 불가)

2. 반복 과정 중에 배열 요소를 변경 할 수 없음

reduce

---

reduce 메서드는 배열의 모든 요소를 순회하면서 주어진 함수를 사용하여 요소들을 하나의 값으로 축소(리듀스)하는 메서드이다. 이를 통해 배열의 요소들을 계산하여 최종 결과를 얻을 수 있다. reduce 메서드는 초기값(initial value)과 함께 사용된다.

reduce 의 기본 구문

array.reduce(function(accumulator, currentValue, index, array) {
  // accumulator: 이전 단계까지의 누적된 결과 값
  // currentValue: 현재 처리 중인 요소의 값
  // index: 현재 처리 중인 요소의 인덱스
  // array: reduce를 호출한 배열 자체
  // 여기서 누적 작업을 수행하고 결과 값을 반환
}, initialValue(초기값));

reduce 의 사용 예시

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

// accumulator : 이전 단계까지의 누적된 결과 값
// currentValue : 현재 처리 중인 요소의 값

const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 출력 결과: 15

위의 코드는 배열 numbers의 모든 요소를 합산하여 최종 결과 값을 반환한다. reduce 메서드의 초기값(0로 지정한)부터 시작하여 각 요소를 더해나가는 방식으로 합산이 된다.

추가조사

---

언제 사용하면 좋을지에 대해 조사해봤다.

 

for of

• 가장 일반적이고 전통적인 배열 순회 방식
• continue나 break를 사용해야 할 때 사용.

forEach

• for문보다 코드를 더 간결하게 작성가능(가독성이 더 좋음). 
• 수행속도가  더 느림
• continue와 break 사용불가.
• 따라서, 서비스의 성능을 생각한다면 복잡하더라도 for문으로 구현하는게 좋을 것 같다는 생각이 들었음.

reduce

• 배열의 요소를 합치거나, 변형하여 새로운 값을 계산할 때 유용함