오늘은 릴레이 블로깅... 내 차례가 왔다.. 화요일이라 2번째 이지만 상당히 부담 스럽다.. 😂
블로깅의 주제는 내가 더 알아보고 싶기도 하고 상당히 고생하고 어려웠던 고차함수를 선택했다. 고차 함수에 대해서 블로깅을 해보려고 한다.

우선 고차함수의 개념에 대해서 알아보자.

고차함수(higher order function)

고차함수(higher order function)는 함수를 인자(argument)로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수이다. 😀
함수는 변수에 저장 가능하고 이 함수는 인자로 전달 받을 수 있다. 그리고 함수 내부에서 변수에 함수를 할당할 수 있고 함수는 이 변수를 리턴할 수 있다.
다른 함수의 인자로 전달되는 함수를 콜백함수라고 부른다.

고차함수를 사용하는 이유?

고차함수는 추상화를 할 때 이점이 많다.

추상화(abstraction) : 공통의 속성이나 기능을 묶어 이름을 붙이는 것으로 객체 지향적 관점에서 클래스를 정의하는 것을 추상화라고 할 수 있다.

추상화를 이용하면 코드의 재사용성, 가독성을 높여서 생산성도 올라가고 에러가 발생하는 일도 감소하게 된다. 개발자들이 코드를 작성하기만 하는 것 뿐만이 아니라 유지 보수또는 각종 에러를 해결하는 데에 시간을 많이 사용한다는 것을 생각하면 추상화는 상당히 중요하다고 할 수 있다.

고차 함수는 단순히 값을 전달받아 처리하는 추상화의 수준을 함수를 전달받아 처리하는 수준으로 끌어올린다. 즉 고차 함수를 통해 보다 높은 수준에서 생각할 수 있게 된다.

내장 고차함수(Built-in higher order functions)

자바스크립트에는 기본적으로 내장된 고차함수가 있다. 내장된 고차함수에 대하여 알아보자. 😁

.forEach()

for 문을 대체하는 고차함수이다. 내부에서 주어진 배열을 순회하면서 연산을 수행한다.

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

.map()

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

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']

forEach()와 map() 둘 다 배열을 순회하는 것은 같지만 forEach()의 경우 각 요소를 참조한 연산이 이루어지고 map()의 경우 각 요소를 다른 값으로 맵핑하여 새로운 배열을 만든다.

.find()

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

const numberArr = [1, 3, 3, 5, 7];
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}

// find는 하나만 찾음. 뒤에서 배울 filter은 여러개를 배열로
console.log(numberArr.find(item => item === 3));  // 3
console.log(numberArr.filter(item => item === 3));  // [3, 3]

.findIndex()

고차함수 find()의 리턴값이 인덱스이다.

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

.filter()

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

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

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

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

.reduce()

콜백 함수의 실행된 반환값(initialValue)을 전달 받아 연산의 결과값이 반환한다.

const numberArr = [1, 2, 3, 4, 5];
 
const sum = numberArr.reduce((previousValue, currentValue, currentIndex, thisArray) => {
    console.log('Current Index: ' + currentIndex + ' / Previous Value: ' + previousValue + ' / Current Value: ' + currentValue);
    
    return previousValue + currentValue; // 연산한 결과값을 누산기previousValue에 넣어 최종값을 얻는다.
}, 0);
 
console.log('Sum: ' + sum);
/*
Current Index: 0 / Previous Value: 0 / Current Value: 1
Current Index: 1 / Previous Value: 1 / Current Value: 2
Current Index: 2 / Previous Value: 3 / Current Value: 3
Current Index: 3 / Previous Value: 6 / Current Value: 4
Current Index: 4 / Previous Value: 10 / Current Value: 5
Sum: 15
*/

.sort()

원 배열이 정렬된다.

var arr = ['red', 'blue', 'green', 'white', 'black'];
arr.sort(); // [ 'black', 'blue', 'green', 'red', 'white' ]

숫자를 정렬할 때도 ABC 순으로 정렬된다.

var arr2 = [1,2,3,10,50,70,8,4];
arr2.sort(); // [ 1, 10, 2, 3, 4, 50, 70, 8 ]

arr2.sort(function(a, b)  {
  console.log(a,b);
});
/*
10 1
2 10
3 2
4 3
50 4
70 50
8 70
*/

arr.sort(function(a, b)  {
  if(a > b) return 1;
  if(a === b) return 0;
  if(a < b) return -1;
}); // [ 1, 2, 3, 4, 8, 10, 50, 70 ]

.some()

배열의 요소들을 주어진 함수(조건)을 통과하는데 한개라도 통과되면 true, 아닐때에는 false를 출력한다.

const array = [1, 3, 5];

// 짝수인지 체크
const result = array.some((currentValue) => {
	return currentValue % 2 === 0;
})

console.log(result); // 리턴 값 : false
// 그 이유는 array의 3개의 요소 모두 2로 나눌때 나머지가 0이 아니기 때문이다.
// 하나라도 부합한 조건에 맞으면 true, 모두 부합하지 않으면 false

// -----------------------------------------------

const array2 = [1, 2, 3, 5];

const result2 = array2.some((currentValue) => {
	return currentValue % 2 === 0;
})
console.log(result2); // 리턴 값 : true
// 그 이유는 array의 4개의 요소 모두 2로 나눌때 나머지가 0인 요소가 하나라도 있기 때문이다.
// 하나라도 부합한 조건에 맞으면 true, 모두 부합하지 않으면 false

.every()

배열안의 모든 요소가 주어진 함수(조건)을 모두 통과하면 true, 한 요소라도 통과하지 못하면 false를 출력한다. ( some()의 반대 )

const array = [1, 30, 39, 29, 13];

const result = array.every((currentValue) => {
	return currentValue < 40;
})

console.log(result); // 리턴 값 : true
// 그 이유는 array의 모든 요소가 40보다 작기 때문이다.
// 하나라도 부합한 조건에 맞지 안으면 false, 모두 부합하면 true

// -----------------------------------------------

const array2 = [1, 30, 39, 29, 100, 13];

const result2 = array2.every((currentValue) => {
	return currentValue < 40;
})
console.log(result2); // 리턴 값 : false
// 그 이유는 array의 1개의 요소 100이 40보다 크기 때문이다.
// 하나라도 부합한 조건에 맞지 안으면 false, 모두 부합하면 true

마무리

사실 오늘 고차함수 블로깅이지만 내장 고차함수에 대해서 좀 더 자세히 알아보고 싶었다.
내장 고차함수는 사용하게 될 일이 상당히 많다고 생각이 들었고, 섹션에서 모든 내장 고차함수에 대해서 배운것이 아니라서 조금 아쉬웠었다. 😅
찾아본 내용들을 블로그에 정리하여 올려두어 공식문서도 살펴보면서 천천히 공부를 이어갈 생각이다.