자바스크립트 Array 고차함수 정리 1 (forEach / map/ filter /concat /reduce)

🐢 고차 함수란 함수를 매개변수로 사용하거나 함수를 반환하는 함수입니다.

👩🏻‍🏫 1. Array.prototype.forEach()

 

forEach() 메서드는 for문을 대체하는 고차 함수입니다. 반복문을 추상화하여 구현된 메서드이고 내부에서 주어진 배열을 순회하면서 연산을 수행합니다. for문과는 다르게 break, continue를 사용할 수 없어서 배열의 모든 요소를 중단없이 순회한다는 특징을 갖고 있습니다. for문 보다는 성능이 좋지는 않지만 가독성이 더 좋고 함수형 프로그래밍에 부합하기 때문에 꼭 필요한 경우가 아니라면 for문을 대신하여 사용할 것이 권장됩니다.

const numberArr = [1, 2, 3, 4, 5];
let total = 0;
 
numberArr.forEach((item) => {
    total += item;
});
 
console.log(total); // 15

const items = ['item1', 'item2', 'item3'];
const copyItems = [];

// before
for (let i = 0; i < items.length; i++) {
  copyItems.push(items[i]);
}

// after
items.foreach((item)=>{
	copyItems.push(item);
})

👩🏻‍🏫 2. Array.prototype.map()

map() 메서드는 주어진 배열을 순회하면서 파라미터로 전달받은 콜백 함수를 반복하여 호출합니다. 호출된 콜백 함수의 결과로 새로운 배열을 생성하여 반환하며 원본 배열은 변경되지 않습니다.

호출 배열의 모든 요소에 대해 제공된 함수를 호출한 결과로 채워진 새 배열을 만듭니다 .

map은 배열에 속한 항목을 변환할 때 많이 사용합니다.

 

const array1 = [1, 4, 9, 16];

const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

 

👩🏻‍🏫 3. Array.prototype.filter()

filter() 메서드는 주어진 배열을 순회하면서 콜백 함수의 반환값이 true에 해당하는 요소로만 구성된 새로운 배열을 생성하여 반환합니다. map() 메서드와 마찬가지로 원본 배열은 변경되지 않습니다.

filter는 어떤 조건을 만족하는 항목들만 골라서 새 배열로 만들어주는 함수입니다.

원본 배열은 변하지 않고, 원하는 배열을 하나 더 만들 수 있습니다.

const array_num = [0, 1, 2, 3, 4, 5];

const new_array = array_num.filter((array_item) => {
	// 특정 조건을 만족할 때만 return 하면 됩니다!
	// return에는 true 혹은 false가 들어가야 해요.
	return array_item > 3;
});

console.log(new_array); //[4,5]

👩🏻‍🏫  4. Array.prototype.concat()

concat은 배열과 배열을 합치거나 배열에 특정 값을 추가해주는 함수입니다. 원본 배열은 변하지 않습니다.

const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];

const merge = array_num01.concat(array_num02);

// 중복 항목(숫자 3)이 제거되지 않은 채 합쳐져있습니다.
console.log(merge); // [0, 1, 2, 3, 3, 4, 5];

concat은 중복 항목을 제거해주지 않아요! 다른 내장함수와 함께 사용해서 제거해야 합니다!

const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];
// Set은 자바스크립트의 자료형 중 하나로, 
// 중복되지 않는 값을 가지는 리스트입니다. :)!
// ... <- 이 점 3개는 스프레드 문법이라고 불러요.
// 배열 안에 있는 항목들(요소들)을 전부 꺼내준다는 뜻입니다.
// 즉 [...array_num01]은 array_num01에 있는 항목을 전부 꺼내 
// 새로운 배열([] 이 껍데기가 새로운 배열을 뜻하죠!)에 넣어주겠단 말입니다!
const merge = [...new Set([...array_num01, ...array_num02])];

console.log(merge); //[0, 1, 2, 3, 4, 5]

👩🏻‍🏫 5. Array.prototype.reduce()

reduce() 메서드는 주어진 배열을 순회하면서 콜백 함수가 호출되는데 이전 콜백 함수의 실행된 반환값을 전달 받은 연산의 결과값이 반환됩니다. 

reduce() 메서드의 콜백 함수의 파라미터로는 이전 콜백 함수의 반환값, 주어진 배열의 현재 요소, 주어진 배열의 현재 인덱스, this(주어진 배열) 4개를 각각 순차적으로 전달할 수 있습니다.

• callback의 인자는 총 4개까지 가능해요.
  • accumulator : 누적되는 값
  • currentValue : 현재 값
  • currentIndex : 현재 인덱스( initialValue가 없으면 1부터 시작해요.)
  • Array : 원래 배열
• return : 숫자

const sum = [1, 2, 3, 4, 5].reduce(function (pre, cur) {
  return pre + cur;
}, 5);

console.log(sum); // 20
// 5 + 1 => 6 + 2 => 8 + 3 => 11 + 4 => 15 + 5

초기값을 전달하면 에러를 회피할 수 있습니다. 따라서 reduce를 호출할 때는 언제나 초기값을 전달하는 것이 보다 안전합니다.

 

 

reduce가 제일 어려운 고차함수인 것 같다 ㅠㅠ 많ㅎ이 쓰면서 익히는..수밖에..

 

참고 : https://freestrokes.tistory.com/115

https://poiemaweb.com/js-array-higher-order-function

https://velog.io/@jhy979/Javascript-%EA%B3%A0%EC%B0%A8%ED%95%A8%EC%88%98-%EC%A0%95%EB%A6%AC