Javascript에서 배열을 반복하고 싶을 때마다 일반적인 접근 방식은 for, while 또는 유사한 루프를 사용하는 것입니다. 이것은 유효한 선택이지만 Javascript에서 배열을 반복하는 데 사용할 수 있는 다른 많은 접근 방식이 있습니다.

forEach 

forEach를 사용하면 배열의 모든 항목을 반복 할 수 있습니다. 예를 들어, 다음과 같은 for 루프 :

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

다음과 같이 됩니다.

arr.forEach((item) => console.log(item));

이렇게 하면 항목에 액세스하기 위해 인덱스를 계속 사용할 필요가 없습니다. 특히 배열의 항목이 객체이고 인덱스를 사용하는 동안 속성에 액세스하는 것이 번거로울 수 있는 경우 (루프의 새 변수에 할당하지 않는 한) 그렇습니다.

색인에 액세스 할 수도 있습니다.

arr.forEach((item, index) => console.log(item, index));

map 

map은 배열을 반복하고 새 배열을 반환합니다. 이는 배열을 반복하면서 수정할 때 유용합니다.

예를 들어 for 루프에서 이를 수행하려면 다음을 수행하십시오.

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

map에서 이렇게 할 수 있습니다 :

arr = arr.map((item) => item + 1);

새 배열에 할당 할 수도 있습니다.

const newArr = arr.map((item) => item + 1);

색인에도 액세스 할 수 있습니다.

const newArr = arr.map((item, index) => item + index);

reduce 

reduce를 사용하면 배열을 반복하고 이전 반복에서 현재 반복까지 결과를 누적 할 수 있습니다. 결국 단일 결과가 추가됩니다.

예를 들어 배열의 요소 합계를 구한다고 가정 해 보겠습니다. for 루프를 사용하면 다음과 같이 할 수 있습니다.

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

reduce를 사용하면 다음과 같이 할 수 있습니다.

const arr = [1, 2, 3, 4];
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue);

누산기 매개 변수는 현재 반복 이전의 마지막 반복 이후의 결과이며 그 값은 결국 반환 된 값이 됩니다.

기본적으로 초기 값은 첫 번째 요소의 값이고 반복은 두 번째 요소에서 시작됩니다.

따라서 위의 예에서 첫 번째 반복 누산기는 1이되고 currentValue는 2가 됩니다. 1 + 2는 3이므로 두 번째 반복에서 누산기는 3이 되고 currentValue는 3이 됩니다 (배열에 있는 항목이므로 2) 이후 등. 결국 반환 값은 10이 됩니다.

initialValue를 전달하여 초기 값을 첫 번째 요소와 다르게 설정할 수도 있습니다. initialValue가 제공되면 첫 번째 요소에서 반복이 시작됩니다.

배열이 비어 있고 initialValue가 제공되지 않으면 reduce가 오류를 발생 시키므로 배열에 항목이 있는지 확실하지 않은 경우에도 initialValue를 전달하는 것이 유용합니다.

initialValue 사용의 예 :

const arr = [1, 2, 3, 4];
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

initialValue를 0으로 설정하면 첫 번째 반복 누산기에서 0이 되고 currentValue는 1이 됩니다 (배열의 첫 번째 요소에서 시작).

every 

every를 사용하면 배열을 반복하고 제공된 콜백 함수에서 배열의 모든 항목이 true를 반환하는지 확인할 수 있습니다. 이는 특정 유효성 검사 프로세스에 유효한지 확인하기 위해 배열을 반복 할 때 유용합니다. 콜백 함수에서 true를 반환하지 않는 항목을 만날 때마다 루프가 중지되고 false를 반환합니다.

예를 들어, 배열의 모든 항목이 0보다 큰지 테스트하려면 for 루프를 사용하여 다음과 같이 할 수 있습니다.

let allGreater = true;
for (let i = 0; i < arr.length; i++){
    if (arr[i] <= 0) {
        allGreater = false;
        break;
    }
}
console.log(allGreater);

every를 사용하여 이렇게 하려면 :

const allGreater = arr.every((item) => item > 0);
console.log(allGreater);

각 항목이> 0인지 테스트하고 항목 중 하나가 아닌 경우 루프를 중지하고 false를 반환합니다.

위의 예와 같이 변수에 값을 실제로 저장할 필요가 없다면 다음과 같이 할 수 있습니다.

console.log(arr.every((item) => item > 0));

색인을 항목과 함께 두 번째 매개 변수로 전달할 수도 있습니다.

some 

모든 것과 달리 some는 배열을 반복하고 적어도 하나의 항목이 콜백 함수에 대해 true를 반환하는지 확인할 수 있습니다. 제공된 테스트를 통과 한 항목이 발견되면 루프가 중지되고 true를 반환합니다. 제공된 테스트를 통과 한 항목이 없으면 루프는 false를 반환합니다.

예를 들어, for 루프를 사용하여 배열에서 하나 이상의 항목이 0보다 큰지 확인하려면 :

let hasGreater = false;
for (let i = 0; i < arr.length; i++){
    if (arr[i] > 0) {
        hasGreater = true;
        break;
    }
}
console.log(hasGreater);

some를 사용하여 이렇게 하려면 :

const hasGreater = arr.some((item) => item > 0);
console.log(hasGreater);

필요하지 않은 경우 변수에 할당하지 않아도 됩니다.

console.log(arr.some((item) => item > 0));

두 번째 매개 변수로 콜백 함수에 전달하여 색인에 액세스 할 수 있습니다.

filter 

filter는 배열을 반복하고 콜백 함수에서 true를 반환하는 요소 만 있는 새 배열을 반환합니다.

예를 들어 배열에서 0보다 큰 요소 만 가져 오려면 for 루프를 사용하여 다음과 같이 할 수 있습니다.

const greaterArr = [];
for (let i = 0; i < arr.length; i++){
    if (arr[i] > 0){
        greaterArr.push(arr[i]);
    }
}
console.log(greaterArr);

fitler를 사용하여 이를 수행하려면 :

const greaterArr = arr.filter((item) => item > 0);
console.log(greaterArr);

두 번째 인수를 콜백 배열에 전달하여 인덱스에 액세스 할 수도 있습니다.

find 

find를 사용하면 배열을 반복하여 특정 함수에 대해 true를 반환하는 첫 번째 요소를 찾을 수 있습니다. 요소를 찾으면 루프가 중지되고 요소가 반환됩니다. 유효성 검사를 충족하는 요소가 없으면 undefined가 반환됩니다. 이것은 find가 요소를 반환하는 반면 some는 단지 부울을 반환한다는 점을 제외하면 some과 유사합니다.

예를 들어, for 루프를 사용하여 배열에서 0보다 큰 요소를 찾으려면 :

let greaterThan = null;
for (let i = 0; i < arr.length; i++){
    if (arr[i] > 0){
        greaterThan = arr[i];
        break;
    }
}
console.log(greaterThan);

find를 사용하여 이를 수행하려면 다음을 수행하십시오.

const greaterThan = arr.find((item) => item > 0);
console.log(greaterThan);

두 번째 인수를 콜백 배열에 전달하여 인덱스에 액세스 할 수도 있습니다.

findIndex 

요소의 인덱스를 반환한다는 점을 제외하면 find와 유사합니다. 요소가 없으면 -1을 반환합니다.

예를 들어, for 루프를 사용하여 배열에서 0보다 큰 요소의 인덱스를 찾으려면 :

let greaterThan = -1;
for (let i = 0; i < arr.length; i++){
    if (arr[i] > 0){
        greaterThan = i;
        break;
    }
}
console.log(greaterThan);

findIndex 사용 :

const greaterThan = arr.findIndex((item) => item > 0);
console.log(greaterThan);

두 번째 인수를 콜백 배열에 전달하여 인덱스에 액세스 할 수도 있습니다.

브라우저 호환성 

이러한 모든 기능은 최신 브라우저와 호환되지만 IE에서의 호환성은 IE9부터 시작됩니다. 따라서 코드가 이전 브라우저와 호환되도록 해야 하는 경우 Polyfill을 사용해야 할 것입니다.

https://blog.shahednasser.com/all-the-ways-you-can-loop-arrays-in-javascript/