자바스크립트 - 배열 고차 함수

안녕하세요, 35기 웹파트 YB 김태욱입니다.

 

2주차 과제가 끝난지 거의 한 달이 넘은 것 같은데... 이제서야 2주차 공유과제를 올리게 되었습니다. 😂

 

제가 작성할 주제는 이번 합동세미나에서도 정말 많이 사용했고, jsx와 tsx 사용시에 정말 많이 사용하게 되는 자바스크립트의 배열 고차 함수입니다.

 

고차 함수란, 함수를 파라미터로 전달받거나 연산의 결과로 반환해주는 메서드를 일컫고 함수형 프로그램 (JS, 파이썬)의 핵심이기도 합니다.

 

- 함수형 프로그래밍이란?

함수형 프로그래밍은 함수를 다른 함수의 매개변수로 넘길 수도 있고 return 값으로 함수를 받을 수도 있는 프로그래밍 형태를 말한다.

 

- 배열 고차 함수

1. forEach()

- for문을 대체하는 고차함수

- 반복문을 추상화하여 구현되었고, 내부에서 주어진 배열을 순회하면서 연산을 수행한다.

arr.forEach((item, index, thisArr) => {
});

/*
item: 배열요소값
index: 배열 인덱스
thisArr: 참조한 배열

리턴 값: 없음
*/

 

- 사용 예시

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

 

2. .map()

- forEach와 같이 순회하면서, 콜백함수에서의 실행결과를 리턴한 값으로 이루어진 배열을 만들어 반환한다.

arr.map((currentValue, index, array) => {
}, thisArg)

/*
currentValue : 현재 배열요소값
index: 배열 인덱스
array: 참조한 배열
thisArg: 콜백함수에서 this로 사용할 값

리턴 값 : 반환 타입은 찾은 요소의 타입 / 없다면 undefined
*/

 

- 사용 예시

const numberArr = [1, 2, 3, 4, 5];
const numberMapArr = numberArr.map((item) => {
    return (item % 2 === 0) ? 'even' : 'odd'; // 연산한 결과값을 넣어 배열 반환
});
 
console.log(numberMapArr); // ['odd', 'even', 'odd', 'even', 'odd']

 

- map과 forEach는 두 메서드 모두 배열을 순회하는 것은 동일하지만, forEach()의 경우 각 요소를 참조한 연산이 이루어지고 map()의 경우엔 각 요소를 다른 값으로 맵핑한 새로운 배열이 반환되는 점에서 차이가 있다.

 

3. .find()

- indexOf()가 찾고자 하는 값을 index로 주고, include()가 찾고자 하는 값을 boolean값으로 주는데 find()는 찾고자 하는 값을 그대로 반환한다.

- 주어진 배열을 순회하면서 콜백 함수 실행의 반환값이 true에 해당하는 첫번째 요소를 반환한다.

 

arr.find((element, index, array) => {
}, thisArg);
/*
element: 현재 배열요소값
index: 배열 인덱스
array: 참조한 배열
thisArg: 콜백함수에서 this로 사용할 값

리턴 값: 반환 타입은 찾은 요소의 타입 / 없다면 undefined
*/

 

- 사용 예시

const objectArr = [
    { name: 'Harry', age: 20 },
    { name: 'Kim', age: 30 },
    { name: 'Steve', age: 40 }
];
 
console.log(objectArr.find(item => {
   return item.age === 20 // 해당조건에 부합하면 item값 반환
}); // {name: "Harry", age: 20}

 

4. .findIndex()

- 배열 메소드 indexOf()의 콜백함수 버전

- 고차함수 find()의 리턴값이 인덱스인 버전

arr.find((element, index, array) => {
}, thisArg);
/*
element: 현재 배열요소값
index: 배열 인덱스
array: 참조한 배열
thisArg: 콜백함수에서 this로 사용할 값

리턴 값: 요소가 테스트를 통과하면 배열의 인덱스 / 그렇지 않으면 -1
*/

 

- 사용 예시

const objectArr = [
    { name: 'Harry', age: 20 },
    { name: 'Kim', age: 30 },
    { name: 'Steve', age: 40 }
];
 
console.log(objectArr.findIndex(item => {
   return item.age === 20 // 해당조건에 부합하면 item의 인덱스를 반환
}); // 0

console.log(objectArr.findIndex(item => item.name === 'Kim')); // 1

 

5. .filter()

- 주어진 배열을 순회하며 콜백 함수의 true에 해당하는 요소로만 구성된 새로운 배열을 생성하여 반환한다.

arr.filter((element, index, array) => {
}, thisArg)
/*
element: 현재 배열요소값
index: 배열 인덱스
array: 참조한 배열
thisArg: 콜백함수에서 this로 사용할 값

리턴 값: 테스트를 통과한 요소로 이루어진 새로운 배열, 아무것도 통과 못했으면 빈 배열 반환
*/

 

- 사용 예시

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

const numberFilterArr = numberArr.filter((item) => {
    return item % 2 === 0; // 해당조건에 부합으면 item을 넣어 배열 반환
});

console.log(numberFilterArr); // [2, 4]