고차함수란 - 의식의 흐름

<참고 웹사이트>
1. www.w3schools.com
2. https://poiemaweb.com/js-array-higher-order-function

고차 함수: 함수를 인자로 받거나 함수를 반환하는 함수

How(어떻게 저렇게 작동할 수 있나): JS에서 함수는 일급 객체. 일급 객체는 변수/값처럼 사용할 수 있음

Why(왜 고차 함수를 쓰나):
고차 함수를 쓰지 않을 경우, 조건문과 반복문, 그리고 안에 변수를 사용해 내가 필요한 코드를 작성할 것이다.

나도 일반 for-loop 안에 변수를 선언하고 if/else를 많이 작성했다. 하지만 이는 아래의 문제를 발생시킨다.

<고차 함수를 사용하지 않음에 따라, 즉 조건문, 반복문, 변수를 사용함에 따라 발생할 수 있는 문제>
1. 복잡성의 증가(가독성을 해침)
2. 오류 발생의 증가(변수를 이용함에 따라 변수의 값을 여기 저기서 바꾸며 부득이하게 오류가 발생). 

조건문과 반복문은 '불변성'과는 거리가 먼 아이들이다.
하지만 고차 함수는 '불변성'을 지향하는 함수이다. 자바스크립트 또한 그러하다.

데이터를 처리하기 위해 우리는 자료구조 중 배열을 많이 다루게 된다.

그리고 배열과 관련해 불변성을 지향하는 여러 고차 함수들이 존재한다. 배열에 사용할 수 있는 고차함수와 다른 유용한 배열 함수에 대해 알아보자.

(SMFR: SM For Real?! 이라는 의미 없는 acronym을 만들어보았다)
1. sort
2. map
3. forEach
4. reduce

(FFFES: 이것도 큰 의미는 없으나 'fㅔ스'처럼 읽혀서 이렇게 조합해본다)
5. filter
6. find
7. findIndex
8. every
9. some

(SSJR: SS (Double S) JR(Junior)로 외워야겠다)
10. split
11. slice
12. join
13. reverse

1. sort

분류해주는 함수이다. 다음의 것들을 분류해준다.

1. 배열 안의 문자열 (추천)
2. 배열 안의 숫자 (주의 요망)

1. 배열 안의 문자열 (추천)

let array = ["apple", "banana"];
array.sort(); // Array [ "apple", "banana" ]

디폴트는 오름차순이기 때문에 알파벳 순으로 정렬된다.

2. 배열 안의 숫자 (주의 요망)

let array = [100,2];
array.sort(); // Array [ 100, 2 ]

100과 2를 정렬하는데 여전히 100이 2보다 먼저 온다. sort()는 값을 문자열로써 정렬한다. 따라서 비교할 해당 두 숫자가 문자열로 잠시 변환되고, 그 두 문자열의 유니코드를 따져 배열 순서를 결정하게 된다. 유니코드 상 100이 2보다 먼저 오므로 다음과 같은 결과가 나온다.

3. 해결책

해결책으로 비교 함수를 전달하여 사용해야 한다.

1)비교 함수 이용

function(a, b) {return a-b};

두 숫자를 인자로 받아 음수, 0, 양수 중 하나를 반환한다. 기본적으로 오름차순으로 정렬되기 때문에 다음과 같은 결과가 나타난다.

• a-b가 음수일 때 : a가 먼저 오고, b가 그 다음에 온다.
• a-b가 0일 때: 아무 일도 일어나지 않는다.
• a-b가 양수일 때: b가 먼저 오고, a가 그 다음에 온다.

만약 내림차순으로 정렬하고 싶다면 return a-b 대신 return b-a로 바꿔주면 되겠다.

2)비교 함수 적용

let array = [100,2];
array.sort(function(a,b){return a-b}); // Array [ 2, 100 ]

잘 sorting 되는 걸 볼 수 있다.

2. map

1. 정의

"맵핑"한다라는 말을 자주 듣지만 실제로 이게 무얼 한다는 것인지 명시적으로 알아보자.

• MDN - Array.prototype.map(): The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
• Oxford Languages - Mathematics/Linguistics - related : an operation that associates each element of a given set (the domain) with one or more elements of a second set (the range).

주요 키워드를 뽑아보자면 세트, 요소, 대응 정도로 나오겠다. 두 개의 세트가 있고 세트 안에는 요소가 존재한다. (세트 1에 있는) 하나의 값을 (세트 2에 있는) 다른 값에 대응시킨다(관련짓는다?)고 보면 될 듯 싶다.

우리가 사용할 map() 함수도 첫째, (호출하는) 원본 배열의 요소에 제공된 함수를 호출하여 만들어진 결과를 둘째, 새로 만들어질 배열에 나열한다.

2. 예시

let array = [1, 2, 3, 4, 5];
array.map((element) => element * 2); // Array(5) [ 2, 4, 6, 8, 10 ]

array[1, 2, 3, 4, 5]가 우리의 세트 1이다. 프로토타입서 제공되는 array의 map() 함수를 호출하여 array 안의 element에 (어떤 함수를 작성하여) 어떤 작업을 할지 알려준다. 우리는 각 요소 값을 두 배 시켜주는 함수를 작성했다. 따라서 우리의 세트 2에 해당하는 [2, 4, 6, 8, 10]가 반환된다.

3. forEach

1. 정의

It calls a function once "for each" element in the array in order.

2. 예시

let numbers = [65, 44, 12, 4];
numbers.forEach((number, index, arr)=>console.log(number, index, arr));
// 65 0 Array(4) [ 65, 44, 12, 4 ]
// 44 1 Array(4) [ 65, 44, 12, 4 ]
// 12 2 Array(4) [ 65, 44, 12, 4 ]
// 4 3 Array(4) [ 65, 44, 12, 4 ]

• number: 현재 함수가 거쳐가는 element
• index: 현재 함수가 거쳐가는 element의 index
• array: 현재 함수가 거쳐가는 element가 속한 array

4. reduce

1. 정의

알다시피 reduce는 '줄이다'라는 뜻을 가지고 있다. 말 그대로 reduce() 함수에 전달된 reducer 함수를 배열의 각 요소에 순차적으로 실행하여 결론적으로 하나로 귀결되는 값을 반환한다.

2. 예시

let numbers = [175, 50, 25];

function myFunction(accumulator, next, index, array){
    console.log(accumulator, next, index, array);
    return accumulator - next;
}

numbers.reduce(myFunction); 
// 175 50 1 Array(3) [ 175, 50, 25 ]
// 125 25 2 Array(3) [ 175, 50, 25 ]
// 100

첫 번째 인자로 자리한 accumulator가 결국엔 마지막에 final value로 반환된다.

5. filter

6. find

7. findIndex

8. every

9. some

10. split

11. slice

12. join

13. reverse