내일부터 있을 고차함수, 일급객체 챕터를 대비해 예습차원으로 내용을 읽어보고 정리하려고한다.
일급 객체 (First-class Object) : 다른 객체들에게 일반적으로 적용 가능한 연산을 모두 지원하는 객체
Javascript 에 많은 요소들 중 특별한 대우를 받는 일급객체들이 있다. 그 중 하나가 대표적으로 함수이다.
이유는 Javascript의 함수는 다른 모든 객체처럼 속성과 메서드를 가질 수 있어, 일급 객체인 것이다.
일급객체로써의 조건은 아래 와 같다.
1. 변수에 할당(assignment)을 할 수 있다.
변수에 할당은 함수 표현식을 생각하면 쉽다.
2. 다른 함수의 전달인자(argument)로 전달될 수 있다.
- mul( )에서 매개변수가 1개이기 때문에 mulNum( )의 매개변수(number)도 1개
- 만약 mul( )의 매개변수가 2개면?? mulNum( )의 매개변수도 2개
- mulNum( )의 매개변수인 func는 위의 mul( )를 나타냄
- 마지막 result변수에 mulNum( )을 할당하고 매개변수로 mul( )을 받아옴
- 이때 mulNum( )의 매개변수로 다른 함수(mul( ))을 받아오기때문에 고차함수
3. 다른 함수의 결과로 리턴이 될 수 있다.
반환값(return value)으로 사용할 수 있다.
위의 대한 조건으로 인해 알 수 있는 것은 함수를 데이터(string, number, boolean, array, object)를 다루듯이 다룰 수 있다는 것이다.
그럼 함수가 일급객체인건 알겠는데 그래서 뭘 할 수 있는데??
- 고차함수(Higher order function)를 만들 수 있다.
- 콜백(callback)을 사용할 수 있다.
위의 두가지만 봐도 엄청난걸 할 수 있는 것이다.
고차 함수(Higher-order function) : 함수를 전달인자 또는 매개변수로 받을 수 있고, 함수를 리턴하는 함수.
고차함수는 함수 내부에서 변수에 함수를 할당할 수 있고 함수는 그 변수를 리턴할 수 있다.
여기에서 변수에 할당하지 않고 함수를 바로 이용할 수 있다.
어떤 고차 함수에 함수를 전달인자로 전달하고, 고차 함수는 함수 자체를 리턴한다.
즉, 쉽게말하면 함수를 다루는 함수라고 생각하면 된다. 이를 통해 함수의 재사용성과 추상화를 높일 수 있다.
고차함수 예제
1. 다른 함수를 매개변수로 받는 경우
2. 함수를 리턴하는 경우
3. 함수를 매개변수로 받고, 함수를 리턴하는 경우
콜백 함수(callback function) : 다른 함수의 매개변수로 전달되는 함수
- 콜백 함수의 이름은 어떤 작업이 완료되었을 때 호출하는 경우가 많아, 답신 전화를 뜻하는 콜백 이라는 이름이 붙여졌다.
- 콜백 함수를 전달받은 고차 함수는, 함수 내부에서 이 콜백 함수를 호출할 수 있다.
- 아예 호출하지 않을 수도 있고, 여러번 실행할 수도 있고, 특정 작업의 완료 후에 호출하는 경우도 있다.
- 비동기 작업을 위해 사용되는 콜백의 특성상 비동기 이후에 처리될 작업들을 콜백 내부에 작성해야한다.
- 콜백 안에 콜백을 무는 식으로 작성하게 되는 경우가 있다. 콜백지옥에 빠지지않도록 조심하자!
커리 함수(Curry Function) : 여러 개의 매개변수를 받는 대신에 항상 정확히 하나의 매개변수를 받는 함수
여러개의 매개변수를 받는 함수를 하나의 매개변수만 받는 함수의 연속적인 호출로 바꾸는 기법.
이를 통해 함수를 조합하고 재사용성을 높일 수 있다.
커리 함수는 다음과 같이 작동
- 함수에 전달된 매개변수가 원래 함수의 매개변수 개수보다 적은 경우, 새로운 함수를 반환
- 새로 반환된 함수는 매개변수를 받아 원래 함수의 매개변수를 채우고 실행
- 매개변수가 충분히 채워지면, 원래 함수를 실행
- 원래 함수의 실행 결과를 반환
예를 들어, 다음과 같이 두개의 매개변수를 받는 함수가 있다고 해보자
이 함수를 커리 함수로 변환하면 다음과 같이 만들 수 있다.
이제 add 함수를 호출할 때 하나의 매개변수만 전달하면, 새로운 함수가 반환되며, 이후에 다시 함수를 호출하여 다른 매개변수를 전달
커리 함수는 함수 조합과 부분적용을 할 때 유용하게 사용될 수 있다.
배열의 내장 고차 함수
- 자바스크립트가 기본적으로 제공해주는 기능이 달린 함수를 내장함수라고 함
- 예를 들어 배열에서 메소드가 있다. 이것이 내장함수
- 배열 메소드들 중 일부가 고차함수에 해당함 : forEach(), find(), filter(), map(), reduce(), sort(), some(), every()
- 배열에 메소드를 직접 만들어 추가할 수 있음
- 이러한 배열 메소드 중에 함수를 매개변수로 받고 함수를 값으로 변환할 수 있는 함수를 내장 고차함수라고 함
아래의 고차함수를 배우고 위 사진을 다시본다면 아주 재밌는 예시로 보이게 되실겁니다!!
- filter()
filter() 메서드는 주어진 함수의 테스트를 통과한 요소를 모아서 새로운 배열을 만듬.
이 메서드는 배열의 각 요소를 순회하면서 주어진 콜백함수를 호출하고,
콜백함수가 true를 반환한 요소만을 새로운 배열에 추가한다.
- callback : 각 요소를 검사하는 함수로, 매개변수로 현재요소, 해당요소의 인덱스, 그리고 검사를 수행하는 배열 전체가 차례로 전달. callback 함수는 무조건 true 혹은 false 값을 반환
- thisArg(선택 사항) : callback 함수 내에서 this로 참조되는 객체를 설정, 기본값은 undefined.
filter() 메서드의 반환 값은 콜백 함수가 true를 반환한 요소로 이루어진 새로운 배열,
예를 들어, 1부터 10까지의 숫자 중에서 짝수만을 걸러내는 코드는 아래와 같다.
filter()의 다른 예제들
- map()
map()메서드는 주어진 배열의 모든 요소에 대해 주어진 함수를 호출한 결과를 모아서, 새로운 배열 만듬
원래 배열의 요소를 변형시키지않고, 새로운 배열에 변형된 요소를 담아서 반환
다음 예시는 1부터 5까지의 숫자를 각각 2배한 새로운 배열을 만든 것이다.
map 메서드가 생성하여 반환하는 새로운 배열의 length 프로퍼티 값은 map 메서드를 호출한 배열의 length 프로퍼티 값과 반드시 일치!!! 즉, map 메서드를 호출한 배열과 map 메서드가 생성하여 반환한 배열은 1:1 매핑.
map()의 다른 예제
- reduce()
배열의 각 요소에 대해 주어진 콜백 함수를 실행하며, 하나의 결과값을 반환.
배열 요소를 순차적으로 처리하며, 이전에 콜백 함수에서 반환한 값을 다음 호출에 매개변수로 제공
reduce() 메서드의 콜백함수는 acc, cur, idx, src를 받는다.
acc: 콜백 함수의 반환값이 누적되는 값
cur: 현재 처리되고 있는 요소의 값
idx: 현재 처리되고 있는 요소의 인덱스 (선택적)
src: reduce() 메서드가 호출된 배열 (선택적)
가장 기본적으로 배열의 모든 값을 더해보겠다.
reduce()의 다른 예제
redece() 메서드로 할 수 있는 것은 끝도없기에 이곳을 참고하면 좋을것 같다.
Array.prototype.reduce() - JavaScript | MDN
reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.
developer.mozilla.org
이밖에도 고차함수는 아주 많지만 일일이 다 쓰기에는 버겁기 때문에 가장 자주 사용하고 중요한것을 알아보고 다루어 보았다.
정리해보면, 고차함수를 사용하는 이유!!
- 고차 함수는 코드의 재사용성을 높이기 위해서 사용
- 다른 함수를 매개변수로 받거나 함수를 반환할 수 있는 함수
- 함수의 로직을 일반화하고, 추상화하여 다양한 상황에서 적용 가능 (추상화가 무엇인지는 찾아보십숑..!!)
- 코드의 중복을 줄이고 코드의 가독성을 높임
