고차함수, Callback 함수 등등 내장 고차 함수

일급 객체(First-Class)

• 변수에 할당 가능(함수 표현식)

• 다른 함수의 parameter, 인자로 전달 가능

• 다른 함수의 결과로 return 가능

고차 함수란?  함수를 인자로 받거나 함수를 리턴하는 함수를 말한다.

 

callback 함수란? 다른 함수의 매개변수로 함수를 전달하고, 어떠한 이벤트가 발생한 후 매개변수로 전달한 함수가 다시 호출되는 것을 의미한다. 간단하게 다른 함수의 인자로 전달되는 함수를 콜백 함수라고 한다.

 

그렇다면 예제를 들어보자

고차 함수가 아닌 함수와 고차 함수로 작성한 것이 무엇이 다른지 곰곰히 보고 생각해도록하자

고차 함수가 아닌 것은 반복문을 이용해 빈 배열에 하나씩 배열에 추가시켰지만, 고차 함수로 작성한 것은

배열을 그대로 사용하는 것이다.

이처럼 고차 함수는 외부 상태 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍이라는 것을 알 수 있다.

// 고차 함수가 아닌 함수
const arr1 = [1, 2, 3]
const arr2 = [];

for(let i = 0; i < arr1.length; i++){
	arr2.push(arr1[i] * 2);
    }
console.log(arr2);   // [2, 4, 6]

// 고차 함수로 작성
const arr1 = [1, 2, 3]

const arr2 = arr1.map(function(item) {
	return item * 2;
    })
console.log(arr2);  // [2, 4, 6]

 

내장 고차 함수 이해하기

---

자바스크립트에는 기본적으로 내장(built-in)되어 있는 고차 함수들이 있습니다.

바로 배열 메소드들 중 일부가 고차 함수에 해당한다. 알아보도록 하자

 

 

✅Array.prototype.map()

배열의 각 요소가 특정 논리(함수)에 의해 다른 요소가 지정된다. 그리고 하나의 계산으로 모든 요소에 영향을 준다. 

map 메소드는 요소를 일괄적으로 변경하는데 효과적이다. 예제를 보며 이해를 해보자

// 문자열 배열에서 문자열 길이만 획득하기
var arr = ['foo', 'hello', 'diamond', 'A'];
var arr2 = arr.map(function (str) {
    return str.length;
});
console.log(arr2); // [3, 5, 7, 1]

// 예제 2

["고기", "완자", "고수"].map(function (ele) {
	return ele + 2;
    })
["고기2", "완자2", "고수2"]   // 하나의 계산으로 모든 요소에 영향을 준다.

arr에는 문자열만 arr2에는 문자열 길이만 담겼다.

map은 콜백 함수의 리턴을 모아서 새로운 배열 만든다.

구문으로는 arr.map(callback(currentValue[, index[, array]])[, thisArg]) 이런식으로 표현한다.

생각보다 여러가지 부분이 어렵다. 모른다면 여기를 참고하도록 하자

 

 

✅Array.prototype.filter()

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

다시 말하면 배열의 요소 중 특정 조건을 만족하는 요소들만 걸러낸 메소드이다.

배열의 각 요소가 특정 논리(함수)에 따르면, 사실(boolean)일 때, 따로 분류한다.

쉽게 말하자면 이름 그대로 요소들을 걸러내는 것이 목적이다. 예제를 보면서 이해해보자

// 정수 배열에서 5의 배수인 정수만 모으기
var arr = [4, 15, 377, 395, 400, 1024, 3000];
var arr2 = arr.filter(function (n) {
    return n % 5 == 0;
});
console.log(arr2); // [15, 395, 400, 3000]

// 예제 2

["고기", "완자", "고수"].filter(function (ele) {
	if(ele === "고수") {
    return false;
    }else{
    return true;
}
})
["고기", "완자"]  // 고수는 걸러지고 고기와 완자만 나오게 된다.

콜백 함수의 리턴은 boolean을 가진다. 리턴이 true인 요소만 모아서 새로운 배열을 만든다.

리턴이 undefined면 false, 만족하는 요소가 없다면 빈 배열이 반환된다.

 

 

✅Array.prototype.reduce()

reduce는 '줄이다' 라는 의미를 가지고 있다.

배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.

풀어서 애기하면 배열의 각 요소를 특정 응축 방법(함수)에 따라 원하는 하나의 형태로 응축한다.

예제를 보면서 이해해보자

let arr = [1, 2, 3];

let result = arr.reduce(function(acc, cur, idx) {
	acc + cur;
    return acc;
    }, 1);
    
    result;  // 7을 반환

이 외에도 방법은 여러가지가 있다. 방법이 여전히 헷갈리고 어렵다면 여기를 참고하자!

 

✅Array.prototype.forEach()

주어진 함수를 배열 요소 각각에 대해 실행합니다.

예제를 보면서 이해를 해보자

arr 객체의 요소들이 callback 함수에 순서대로 호출되는 모습을 볼 수 있다.

const arr = [0,1,2,3,4,5,6,7,8,9,10];

arr.forEach(function(element){
    console.log(element); // 0 1 2 3 4 5 6 7 8 9 10
});

// 혹은 arrow 함수 가능

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

// 간단한 예 홀수 배열 만들어 보기
const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const oddArray = [];

arr.forEach(function(element){
    if(element%2==1) {
        oddArray.push(element);
    }
});

console.log(oddArray); // [ 1, 3, 5, 7, 9 ]