고차함수( feat.Array )

고차함수를 배우기전에

자바 스크립트에는 퍼스트-클래스 객체(first-class citizen)가 존재한다. 여기서 우리가 배우려는 고차함수가 이에 해당한다고 말할 수 있다.

퍼스트-클래스란?

다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 매개변수로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다.(from wikipedia)

위키피디아 정의를 읽으면 직관적으로 이해가 가지않는다. 그래서 내가 이번 파트에서 이해한것을 적어보자면,

1. 새로운 변수에 함수를 할당/대입 할 수 있다.
2. 새로운 함수를 파라미터로 사용될 수 있다.
3. 함수를 리턴할 수 있다.

이런것들이 가능한것을 퍼스트 클래스라고 하는것같다.

함수 표현식과 선언식의 차이

이런 퍼스트클래스관련을 이해하기 위해서 함수표현식과 선언식의 차이점도 배웠다. 표현식이 더 중용되어지고 있다고 생각한다. 그 이유는 사람들은 호이스팅을 싫어하고, 호이스팅이 오류를 만들어 낼 수 있기 때문이다. 그래서 사람들은 표현식인 함수를 변수에 담는 방식을 선호하고 있다.
예)

let functionExpression = funtion(){
  // something something
}

고차함수(higher order function)

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

이 고차함수를 효과적으로 사용할 수 있게 해주는것이 배열이다. 이전에 배열에서 힘들게 여러가지 기능을 만들기 위해서 반복문과 여러가지 연산등을 이용했지만, 고차함수(여기서 콜백함수)를 이용하여 쉽게 새로운 배열을 생성하고, 연산이 가능했다.

여러가지 콜백함수 중에서 자주 사용했던 콜백함수를 소개해보겠다. 이전에 코안스 advacne문제를 풀며 잠깐 눈을 마주친적이 있다. 그땐 집중적으로 보지 않아 어렵다는 생각과 효과적이다는 생각을 한적이 없었지만, 오늘 느꼈다. 고차함수 너무 좋다.

1. filter

arr = [1,2,3,4,5,6,7,8];
let onlyEven = function(num){
  return num % 2 === 0;
} // 짝수만
let result = arr.filter(onlyEven) 
//or
let result = arr.filter(function(num){
  return num % 2 === 0;
})
// result =[2,4,6,8];

필터함수는 말 그대로 필터링을 제공해준다 콜백함수를 필요하는데, 그 콜백함수에서는 트루값과 폴스값에 따라 새로운 배열을 생성할지를 결정하게된다.
다시 말해, onlyEven이라는 함수의 리턴값이 true인 경우 새로운 배열에 true에 해당하는 요소를 추가한다.
여기서 중요하게 생각해야할 점은 새로운 배열을 생성한다는것이다. 즉 immutable 하다는것이다. 기존 배열을 훼손 시키지않는다. 사실 모든 콜백함수는 immutable이다.

2. map 함수

arr = [1,2,3,4];
let double = function (num){
  return num *2;
}
let result = arr.map(double);
//or
let result = arr.map(function(el){
  return num *2;
})
//result = [2,4,6,8]

처음에 여러군데 예제를 봤을때, 이렇게 넘버를 가지 map함수를 사용할 수 있을줄 알았다. 그런데 문자열도 새로운 배열에 추가할 수 있다.

arr = [1,2,3,4];
let result = arr.map(function(el){
  if(el <= 2){
    return 'small'
  }else{
    return 'big'
  }
})
//result = ['small','small','big','big']

이렇게 리턴값이 무엇인지에 따라 문자열도 배열에 추가가 가능하다.

map은 새로운 맵을 보여주는것과 같다. 콜백함수를 따라 새로운 요소들을 새 배열에 추가하는것이 가능하다.

3. reduce

arr = [1,2,3,4];
arr.reduce(function(x,y){
  return x + y;
},3)
//13

reduce 함수는 이해하기에 살짝 까다로울 수 있다. 먼저 파라미터에 대해서 설명하겠다. x는 축적된 값(value), y 는 현재 값(value)라고 말할 수 있다. 또 마지막 중괄호와 대괄호 사이에있는 3은 초기값이다. 이게 무슨말인지는 위의 예제를 사용하여 설명하겠다.
처음에 계산되는 값은 3 + 1이다 여기서 3은 초기값 3, 1은 현재값(y)다.
그다음은 4 + 2 이다. 여기서 4는 3+1을 하여 축적된 값(x)이고, 2는 현재값이다.
이걸 한번에 나열해보면
3 + 1(y) // x =4
4 + 2(y) // x =6
6 + 3(y) // x =9
9 + 4(y) //

이렇게 이해 할 수 있겟다.

3개를 집중적으로 배웠지만 , 위의 함수들을 같이 활용하면 3개 이상의 콜백 함수를 배운 효과를 볼 수도 있다. 예를 들어 이중 for 문과 같이 콜백함수를 같이 사용하면 이중for문 +@ 의 효과를 얻을 수 있다. 그 이유는 위의 콜백함수는 이미 반복문을 내장하고 있다. 그리고 그들의 고유한 스킬까지 더할 수 있게되는샘이다.

추가로, 위 3개 말고도 forEach, find ,some, every도 알아야할 콜백함수들이다. 나머지들은 좀 더 공부를 해보고 나중에 글을 써보겠다.