2020/09/25 -TIL (고차함수, 배열 메소드)

오늘 했던 일

• 고차 함수
• 배열 메소드

 

 

 

고차 함수(Higher order function)

고차 함수란 함수를 인자(argument)로 받거나 함수를 리턴하는 함수를 말합니다. 이때 다른 함수(caller)의 인자로 전달되는 함수를 콜백 함수(callback function)라고 합니다.

 

 

 

1. 다른 함수를 인자로 받는 경우

 

function double(num) {
	return num * 2;
}

function doubleNum(func, num) {
	let doubleArr = [];
    return func(num);
}

// 함수 doubleNum은 다른 함수를 인자로 받는 고차 함수입니다.
// 함수 doubleNum의 첫 번째 인자 func에 함수가 들어올 경우
// 함수 func는 함수 doubleNum의 콜백 함수입니다.
// 아래와 같은 경우, 함수 double은 함수 doubleNum의 콜백 함수입니다.

let output = doubleNum(double, 4);
console.log(output); //8

 

 

2. 함수를 리턴하는 경우

function adder(added) {
	return function(num) {
    	return num + added;
    };
}

//함수 adder는 다름 함수를 리턴하는 고차 함수입니다.
//adder는 인자 한 개를 입력받아서 함수(익명 함수)를 리턴합니다.
//리턴되는 익명 함수는 인자 한 개를 받아서 added와 더한 값을 리턴합니다.

//adder(5)는 함수이므로 호출 연산자 ()를 사용할 수 있습니다.

let output = adder(5)(3) //8
console.log(output) // 8

//adder가 리턴하는 함수를 변수에 저장할 수 있습니다.
//javascript에서 함수는 일급 객체이기 때문입니다.

const add3 = adder(3);
output = add3(2);
console.log(output); // 5

 

3. 함수를 인자로 받고, 함수를 리턴하는 경우

 

function double(num) {
	return num * 2;
}

function doubleAdder(added, func) {
	const doubled = func(added);
    return function(num) {
    	return num + boubled;
    };
}

//함수 doubleAdder는 고차 함수입니다.
//함수 doubleAdder의 인자 func는 함수 doubleAdder의 콜백 함수 입니다.
//함수 double은 함수 doubleAdder의 콜백으로 전달되었습니다.

//doubleAdder(5, double)는 함수이므로 함수 호출 기호 () 를 사용할 수 있습니다.
doubleAdder(5, double)(3); // 13

//doubleAdder가 리턴하는 함수를 변수에 저장할 수 있습니다 (일급 객체)
const addTwice3 = doubleAdder(3,double);
addTwice(2); //8

 

 

 

자바스크립트의 유용한 배열 메소드

 

• forEach()
• map()
• filter()
• reduce()

 

forEach()

forEach는 가장 기본적인 Loop 메서드입니다.

 

 

//기존의 for구문
let arr = [1,2,3,4,5,6,7,8];
for(let i = 0; i < arr.length; i++) {
	if(arr[i] % 2 === 0){
    	console.log(arr[i);
    }
}

//forEach() 구문
let arr = [1,2,3,4,5,6,7,8];
arr.forEach(function (el){
	if(el % 2 === 0){
    	console.log(el);
    }
});

 

forEach의 콜백 함수의 첫 번째 인자로 각 요소의 값이 들어옵니다. 덕분에 깔끔한 방법으로 각 요소의 값을 얻을 수 있었습니다.

 

 

 

map()

map은 요소를 일괄적으로 변경하는데 효과적입니다.

//문자열 배열에서 문자열 길이만 획득하기
let arr = ['hello', 'javascript', 'map', 'hi'];
let arr2 = arr.map(function(el){
	return el.length;
});
console.log(arr2)// [4,9,3,2];

map은 콜백 함수의 반환 값을 모아서 새로운 배열을 만드는 것이 목적입니다.

 

 

 

filter()

fillter메소드는 조건에 해당하는 요소들을 걸러내어 새로운 배열을 반환합니다.

 

 

let arr = [1,2,3,4,5,6,7,8,9,10];
let arr2 = arr.filter(function(el){
	return el % 2 === 0;
});
console.log(arr2); //[2,4,6,8,10];

filter의 콜백 함수의 반환 값은 boolean타입입니다. 반환 값이 true인 요소만 모아서 새로운 배열을 반환합니다. 조건에 만족하는 요소가 없다면 빈 배열을 반환합니다.

 

 

reduce()

reduce메소드는 위의 메소드를 모두 대체할 수 있는 메소드입니다. map, filter 로 구현할 수 있는 문제라면 reduce로도 구현이 가능하다고 합니다. 하지만 상황에 따라 가독성 측면에서 더 유리한 메소드를 적절하게 사용하는 것이 바람직하다고 합니다.

 

1.callback

   1.previousValue : 이전 마지막 콜백 호출에서 반환된 값 또는 공급된 경우 initialValue.

   2.currentValue : 배열 내 현재 처리되고 있는 요소(element).

   3.currentIndex : 배열 내 현재 처리되고 있는 요소의 인덱스.

   4.array : reduce에 호출되는 배열.

 

2.initialValue : 선택사항. callback의 첫 호출에 첫 번째 인수로 사용하는 값.

 

 

//요소의 총 합 구하기
let arr = [1,2,3,4,5];
let sum = arr.reduce(function(acc, cur){
	return acc + cur;
});
console.log(sum); //15

 

 

 

 

 

 

 

 

 

 

앞으로 해야 할 일

• reduce 여러 번 사용해보기
• 주말 동안 고차 함수 문제 마무리 하기