[JS] 배열 메서드 - forEach(), map(), filter(), every(), reduce()

🔗 Array.prototype.forEach()

forEach 메서드는 배열의 원소를 하나씩 순회하면서 callback 함수를 수행합니다.
return 값은 없으므로 undefined를 출력합니다.

forEach 함수의 매개변수에는 콜백함수가 들어오고,
콜백 함수의 매개변수에는 value와 index를 받습니다.
즉, 다음 예시에서는 배열 [1,2,3,4,5]에서 각 원소 하나씩은 순회하면서 value와 index를 받습니다.

const result = [1, 2, 3, 4, 5].forEach((value, index) => {
    console.log("index:", index, "value:", value);
});

/* 출력 
index: 0 value: 1
index: 1 value: 2
index: 2 value: 3
index: 3 value: 4
index: 4 value: 5
*/
console.log(result); // undefined

🔗 Array.prototype.map()

map 메서드도 forEach와 같이 배열의 원소를 하나씩 순회하면서 callback 함수를 수행합니다.
map 메서드는 첫번째 매개변수인 콜백함수 안에서 리턴한 원소들을 모아 map 메서드에서 리턴합니다.

const result = [1, 2, 3, 4, 5].map((value, index) => {
    console.log("index:", index, "value:", value);
    return value + 1;
});

/* 출력 
index: 0 value: 1
index: 1 value: 2
index: 2 value: 3
index: 3 value: 4
index: 4 value: 5
*/
console.log(result); // [2, 3, 4, 5, 6]

🔗 Array.prototype.filter()

filter 메서드는 주어진 배열의 원소 중 주어진 조건에 참인 값만 모아서 배열을 만듭니다.
filter 메서드 첫번째 매개변수인 콜백함수 안에서 return이 true인 value 값만 모아서 리턴합니다.

다음 예시는 순회를 확인하기 위해 value와 index를 확인하고, 3이상인 value만 배열로 만들어서 리턴합니다.

const result = [1, 2, 3, 4, 5].filter((value, index) => {
    console.log("index:", index, "value:", value);
    return value > 3; // 배열의 원소 중 3초과인 원소만 true로 만듭니다.
});

/* 출력 
index: 0 value: 1
index: 1 value: 2
index: 2 value: 3
index: 3 value: 4
index: 4 value: 5
*/
// 배열의 원소 중 3초과인 원소만 배열로 출력되었습니다.
console.log(result); // [4, 5] 

🔗 Array.prototype.every()

every 메서드는 배열의 원소를 주어진 조건에 따라 판별합니다.
every 메서드의 첫번째 매개변수인 콜백함수의 리턴 부분에 조건이 전부 true이면 every 메서드는 true를 리턴합니다.
만약 콜백함수의 리턴 부분이 전부 false이면 every 메서드는 false를 리턴합니다.

const result = [1, 2, 3, 4, 5].every((value, index) => {
    console.log("index:", index, "value:", value);
    return value > 0; // 주어진 배열의 원소가 모두 0보다 큰 지 검사합니다.
});

/* 출력 
index: 0 value: 1
index: 1 value: 2
index: 2 value: 3
index: 3 value: 4
index: 4 value: 5
*/
// 배열의 모든 원소가 0보다 크므로 true가 출력되었습니다.
console.log(result); // true

🔗 Array.prototype.reduce()

reduce 메서드는 이전 값을 기반으로 연산을 수행할 때 사용됩니다.

reduce 메서드의 첫번째 배개변수 콜백함수는 4개의 인자를 받습니다. (각 변수명은 자유롭게 지정할 수 있습니다.)
여기서 예시로 둔 sum에 해당하는 부분이 누적된 값
value는 순회중인 배열의 원소
index는 순회중인 배열 원소의 인덱스
arr는 원본 배열

reduce 메서드의 두번째 인자는 누적된 값의 초기값을 결정합니다.

따라서 다음 코드는 1~5까지의 누적된 합산값을 구합니다.

const result = [1, 2, 3, 4, 5].reduce((sum, value, index, arr) => {
    console.log("index:", index, "value:", value, "arr:", arr);
    return sum + value;
}, 0);

/* 출력
index: 0 value: 1 arr: [1, 2, 3, 4, 5]
index: 1 value: 2 arr: [1, 2, 3, 4, 5]
index: 2 value: 3 arr: [1, 2, 3, 4, 5]
index: 3 value: 4 arr: [1, 2, 3, 4, 5]
index: 4 value: 5 arr: [1, 2, 3, 4, 5]
*/
console.log(result); // 15