[JS] 고차함수

📌 개인적인 공간으로 공부를 기록하고 복습하기 위해 사용하는 블로그입니다.
정확하지 않은 정보가 있을 수 있으니 참고바랍니다 :😸
[틀린 내용은 댓글로 남겨주시면 복받으실거에요]

🍒 오늘 배운 이론 요약

---

1. Javascript에서는 특별한 대우를 받는 일급 객체가 있으며 그 중 하나는 함수. 이유는 아래와 같다
   1. 함수를 변수에 할당할 수 있고 함수를 배열의 요소나 객체의 속성 값으로 저장 가능
   2. 함수를 데이터처럼 다룰 수 있음
2. 고차함수 : 함수를 전달인자로 받을 수 있고, 함수를 리턴할 수 있는 함수이다.
3. 콜백함수 : 다른함수의 전달인자로 전달되는 함수
4. JavaScript에는 기본적으로 내장된 고차 함수
   1. Array.filter()
   2. Array.Map()
   3. Array.reduce()

고차함수란?

1. 고차 함수(higher order function)
   1. 함수를 전달인자(argument)로 받을 수 있고,
   2. 함수를 리턴할 수 있는 함수 (=클로저)
   3. 콜백 함수를 전달받은 고차 함수(caller)는, 함수 내부에서 이 콜백 함수를 호출(invoke)할 수 있고, 조건에 따라 콜백 함수의 실행 여부를 결정할 수도 있음
   4. 아예 호출하지 않을 수도 있고, 여러 번 실행할 수도 있음
   5. 특정 작업의 완료 후에 호출하는 경우는 이후에 충분히 접할 수 있음.
2. 콜백함수 (callback function)
   1. 다른 함수(caller)의 전달인자(argument)로 전달되는 함수
   2. 어떤 작업이 완료되었을 때 호출하는 경우가 많아서, 답신 전화를 뜻하는 콜백 함수라는 이름이 붙여짐
3. 커링함수
   1. ‘함수를 리턴하는 함수’를 고안해 낸 논리학자 하스켈 커리(Haskell Curry)의 이름을 따서 지음
   2. 따로 커링 함수라는 용어를 사용하는 경우에는, 고차 함수라는 용어를 ‘함수를 전달인자로 받는 함수’에만 한정해 사용
   3. 정확하게 구분하자면, 고차 함수가 커링 함수를 포함하고 있음
4. 고차함수 예제

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

       function double(num) {
         return num * 2;
       }
              
       function doubleNum(func, num) {
         return func(num);
       }
      

      1. doubleNum : 다른 함수를 인자로 받는 고차함수
      2. doubleNum의 매개인자인 func는 doubleNum의 콜백함수에 해당
      3. let result = doubleNum(double,6) 의 경우 double이 함수 doubleNum의 콜백함수가 됨.
      4. iii의 결과는 콘솔에 입력시 console.log(result); → 12가 출력된다.

   2. 함수를 리턴하는 경우

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

      1. adder는 고차 함수, 인자 한개를 입력 받아 함수(익명 함수)를 return 함
      2. 익명 함수는 인자 한 개를 받아서 added와 더한 값을 리턴 함.
      3. let result=adder(5)(3); 은 adder의 매개인자로 5, 익명함수의 매개인자로 num=3이 들어가 결과는 8이 된다.

      4. adder가 리턴하는 함수를 변수에 저장도 가능 ⇒ js에서 함수가 일급객체이기 때문

          const adderResult = adder(4);
          const result = adderResult(3);
          console.log(result); //->7이 출력됨.
         

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

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

      1. doubleAdder : 고차함수, doubleAdder의 매개인자 func는 doubleAdder의 콜백함수
      2. doubleAdder(5, double)(3); 의 경우 double함수는 doubleAdder의 콜백함수

내장 고차함수

내장 고차함수란?

• JavaScript에는 기본적으로 내장된 고차 함수 있음 =그 중에서 배열 메서드들 중 일부가 대표적인 고차 함수에 해당

filter

• 배열의 filter 메서드
• 모든 배열의 요소 중에서 특정 조건을 만족하는 요소를 걸러내는 메서드
• 걸러내기 위한 조건을 명시한 함수를 전달인자로 받기 때문에 고차 함수에 해당

1. 동작 방식

    	 Array.prototype.filter = function(func) {
    	    const arr = this;
    		  const newArr = []
    	    for(let i = 0; i < arr.length; i++) {
       	    
    	    //filter에 전달인자로 전달된 콜백 함수는 arr의 각 요소를 전달받아 호출
    	    // 콜백 함수가 true를 리턴하는 경우에만 새로운 배열에 추가
       	    
    	      if (func(arr[i]) === true) {
    	       newArr.push(this[i])	      }
        }
       return newArr; //콜백 함수의 결과가 true인 요소들만 저장된 배열을 리턴
      }
       
   

2. 사용예시

   1. 예제 1

       let arr = [1, 2, 3, 4];
              
       function isEven(num) {
       	return num % 2 === 0;
       }
              
       arr.filter(arr, isEven);
      

      1. 배열의 요소 중 짝수만 filter되어 결과는 [2,4]

   2. 예제 2

              
       const isLteFive = function (str) {   // Lte = less then equal
         return str.length <= 5;
       };
       arr = ['hello', 'code', 'javaspring', 'happy', 'hacking'];
              
       let output = arr.filter(isLteFive);
      

      1. ‘길이 5 이하’를 판별하는 함수가 조건으로서 filter 메서드의 전달인자로
      2. 결과 : output = [‘hello’, ‘code’, ‘happy’]
3. 문제 -1

   1. 만화책 식객 27권의 정보가 배열(Cartoons)에 담겨있습니다. 출판 연도가 2003년인 단행본만 담은 배열을 만드세요.

       const cartoons = [
         {
           id: 1,
           bookType: 'cartoon',
           title: '식객',
           subtitle: '어머니의 쌀',
           createdAt: '2003-09-09',
           genre: '요리',
           artist: '허영만',
           averageScore: 9.66,
         },
         {...},...,{...}];
      

   2. 내가 푼 풀이

       const eqaulYear=function(cartoon,year){
         let resultArr=[];
           for(let i =0 ;i<cartoon.length; i++){
             if(cartoon[i].createdAt.slice(0,4)===year){
                 resultArr.push(cartoon[i]);
             }
           }
           return resultArr;
       } 
        console.log(eqaulYear(cartoons,'2003'));
      

      

      1. 아직 filter가 익숙하지 않아 for문으로 풀었음 사실, 고차함수를 써본 적이 없고 문제 보자마자 for문만 생각났음
      2. 결과는 맞게 나옴
      3. filter는 이미 구현된 함수! 필터 매개인자로 함수가 들어와야 하고, filter내에 함수가 true인 요소들만 담아서 배열로 반환한다는 것 기억하기!
      4. slice 메서드로 구현했는데 아래 referece 보면 js에서는 내장객체인 Date()를 사용할 수 있고 쉽게 연도를 따로 구할 수 있음
         1. 아래 링크 참조 (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear)

   3. reference

       const isCreatedAt2003 = function(cartoon,year){
       		const createdYear = new Date(cartoon.createdAt).getFullYear();
       		return createdYear===year;
       		};
              
       const resultArr = cartoons.filter(iscreatedAt2003,2003);
       console.log(resultArr);
      

      1. Date객체를 통해 생성자를 만들어 메서드를 불러옴
      2. 배열과, 연도를 매개인자로 하는 isCreatedAt2003 함수를 만들어 filter의 매개인자로 사용하였음.
      3. 결과는 동일하다.

map

1. map 활용시에는 배열의 각 요소가 특정 논리에 의해 다른요소로 지정되는 것을 기억하기
2. 문제-2
   1. 만화책 식객 27권의 정보가 배열에 담겨있습니다. 각 책의 부제(subtitle)만 담은 배열을 만드세요.
   2. 수도 코드
      • 배열의 각 요소 : 각 식객 1- 27권의 정보
      • 특정 논리(함수) : 책 한 권의 부제를 찾습니다.
      • 다른 요소로 지정 : 각 식객 1- 27권의 부제

   3. 나의 풀이

       const findSubtitle=function(cartoon){
         return cartoon.subtitle;
       }
       const subtitles=cartoons.map(findSubtitle);
       console.log(subtitles);
      

   4. 출력 결과
      

   5. 오류 발생

      1. 오류라기보다는 출력이 계속 안됨, 틀린 풀이

          const findSubtitle=function(cartoon){
            return cartoon.subtitle;
          }
                     
          const subtitles= map(findSubtitle,cartoons);
          console.log(subtitles);
         

      2. 배열의 내장 고차함수이므로 배열.map(func)로 할당해야 함.

reduce

reduce는 중요하기도하고 다른 함수에 비해 잘 이해가 안가고 따로 정리된 것 자료도 없어서 MDN보고 이해함,,

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce#try_it

---

Array.prototype.reduce(callbackFn)

• 배열과 객체를 순차적으로 순회하여 하나의 값으로 줄여 return
• reduce(callbackFn) 또는 reduce(callbackFn. initValue) 형태로 사용할 수 있고
• callbackFn은 4개의 인자를 받음 (accumulator , currentValue , currentIdx, array)
  • accumulator : callback함수의 반환값을 누적
  • currentValue : 배열의 현재 값
  • currentIdx (Optional) : 베열의 현재 값의 인덱
  • array (Optional) : 호출한 배열
• initValue(Optional)가 지정된 경우 콜백이 처음 호출될 때 초기화 되는 값이며 (initValue=acummulator, currentValue는 첫 번째 값)
• initValue 없이 매개인자가 콜백함수 1개만 올 경우에는 accumulator배열의 첫 번째 값으로 초기화되고 callbackFn배열의 두 번째 값(currentValue)으로 실행

• 예제

    const array = [15, 16, 17, 18, 19];
      
    function reducer(accumulator, currentValue, index) {
      const returns = accumulator + currentValue;
      console.log(
        `accumulator: ${accumulator}, currentValue: ${currentValue},index: ${index}, returns: ${returns}`,
      );
      return returns;
    }
      
    array.reduce(reducer);
      
  

  • 결과

    🍒	accumulator	currentValue	index	반환 값
    First call	15	16	1	31
    Second call	31	17	2	48
    Third call	48	18	3	66
    Fourth call	66	19	4	85

    
    

    • array는 프로세스를 통해 절대 변경되지 않습니다
    • 반환되는 값은 reduce()마지막 콜백 ( )의 값입니다 : 85.

---

1. reduce 활용시에는 배열의 각 요소가 특정 방법(함수)에 따라 원하는 하나의 형태로 응축하는 것 이해하기.
2. 문제 -3
   1. 만화책 식객 27권의 정보가 배열에 담겨있습니다. 각 단행본의 평점의 평균을 리턴하세요.
   2. 수도코드
      • 배열의 각 요소 : 각 식객 1- 27권의 정보
      • 응축하는 방법 (함수) : 각 단행본의 평점을 누적값에 더합니다.
      • 원하는 형태 : 숫자로 누적합니다.
      • 응축된 결과 : 각 단행본의 평점의 합을 단행본의 길이로 나눈 평점의 평균

   3. 나의 풀이

       const reviewAvg = function(sum, cartoon){
         return sum+cartoon.averageScore;
       }
       let initValue=0;
       const reviewScore =cartoons.reduce(reviewAvg,initValue)/cartoons.length;
      

   4. 추가 도전 - max 값 구하기

       const cartoonMaxScore =cartoons.reduce(
         (sum,cartoon)=> sum<cartoon.averageScore? cartoon.averageScore :sum,cartoons[0].averageScore);
      

고차함수의 필요성

복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는 것이 추상화

JavaScript를 비롯한 많은 프로그래밍 언어 역시, 추상화의 결과

• 추상화 = 생산성(productivity)의 향상

함수를 통해 얻은 추상화를, 한 단계 더 높인 것이 고차 함수

• 함수 = 값을 전달받아 값을 리턴한다. = 값에 대한 복잡한 로직은 감추어져 있다. = 값 수준에서의 추상화
• 고차 함수는 이 추상화의 수준을 사고의 추상화 수준으로 끌어올림
• 값 수준의 추상화: 단순히 값(value)을 전달받아 처리하는 수준
• 사고의 추상화: 함수(사고의 묶음)를 전달받아 처리하는 수준

다시 말해 고차 함수를 통해, 보다 높은 수준(higher order)에서 생각할 수 있음

• 고차 함수 = 함수를 전달받거나 함수를 리턴한다. = 사고(함수)에 대한 복잡한 로직은 감추어져 있다. = 사고 수준에서의 추상화

고차함수 구현해보기

Underscore.js는 내장 객체를 사용하지 않고도 map, filter, revoke 등과 같이
프로그래밍에 큰 도움이 되는 많은 유용한 기능을 제공하는 JavaScript 라이브러리라고 함.
아래 링크로 이동
[https://www.geeksforgeeks.org/underscore-js-_-each-function/?ref=lbp]

_.slice 나, _.take, _.drop, _.last까지는 쉬웠는데 callback함수 구현은 쉽지 않았다 써본적 없기도 하고

이제 배워서 구현하기엔 시간이 조금 더 소모되었는데 그래도 어떻게든 구현해보려고 노력함.

_.each

1. each와 map은 고차함수 중에 가장 기본이 되는 함수,

   1. map과 비슷하지만 each는 반환을 하지 않고 map은 반환을 한다는 차이가 있음.

      arr=[1,2,3,4,5]
      for(let i =0; i<arr.lenth;i++){
      	arr[i]=func(arr[i]); //=== map
      	func(arr[i]) //=== each
      }
      

   2. ===forEach()

2. _.each() 구현

   1. _.each는 collection의 각 데이터에 반복적인 작업을 수행합니다.

   2. collection(배열 혹은 객체)과 함수 iteratee(반복되는 작업)를 인자로 전달받아 (iteratee는 함수의 인자로 전달되는 함수이므로 callback 함수

   3. collection의 데이터(element 또는 property)를 순회하면서 iteratee에 각 데이터를 인자로 전달하여 실행합니다

   4. 다양한 형태의 callback 함수를 사용할 수 있어야 함.

   5. iteratee 설명

      iteratee는 차례대로 데이터(element 또는 value), 접근자(index 또는 key), collection을 다룰 수 있어야 합니다.
       *  배열 arr을 입력받을 경우, iteratee(ele, idx, arr)
       *  객체 obj를 입력받을 경우, iteratee(val, key, obj)
       * 이처럼 collection의 모든 정보가 iteratee의 인자로 잘 전달되어야 모든 경우를 다룰 수 있습니다.
       * 실제로 전달되는 callback 함수는 collection의 모든 정보가 필요하지 않을 수도 있습니다.
      

   6. 내가 구현한 코드

      _.each = function (collection, iteratee) {
          if(Array.isArray(collection)){
            for (let i = 0; i < collection.length; i++) {
              iteratee(collection[i], i, collection);
            }
          }else if(typeof collection ==='object'){
            for(let key in collection){
              iteratee(collection[key],key,collection);
            }
          }
      };
      

      1. _.each = function (collection, iteratee) { } 이렇게 되어있고 중괄호 내를 구현해야 했는데 iteratee에 대한 설명을 읽어도 이게 뭔가 했는데 알고 보니 callback함수에 해당하는 함수였음
      2. 그 후에는 배열인지 객체인지 구분하는 코드를 먼저 작성했음
         • 배열과 객체를 구분하는 방법은 typeof 사용하면 둘다 object로 나오기 때문에
         • 배열인지 먼저 거른 후 배열이 아니고 typeof가 object이면 객체로 분리.
      3. 순회 한 후 콜백 함수에 객체(배열)의 요소와 key(index) 그리고 객체를 매개인자로 넣어줌.

_.filter

1. _.filter() 구현

   1. _.filter는 test 함수를 통과하는 모든 요소를 담은 새로운 배열을 리턴합니다.

   2. test(element)의 결과(return 값)가 truthy일 경우, 통과 test 함수는 각 요소에 반복 적용됩니다.

   3. 앞서 만든 _.each 활용하기

   4. _.filter = function (arr, test) { } , 2번째 인자는 콜백함수에 해당.

   5. 내가 구현 코드

      _.filter = function (arr, test) {
        let result = []; 
        _.each(arr, function(element) {
          if (test(element)) {
          result.push(element);
        }
      });
            
       return result;
            
      };
      

      1. _.each 구현도 어려웠는데 어떻게 활용해야하나 보다가 위에 _.indexOf 를 _.each로 활용한 예제가 있어서 보고 비슷하게 해봄.

      2. _.filter로 매개인자(test)로 콜백함수가 들어오는데 이 함수의 결과가 true이면 해당 요소를 새로운 배열에 추가하여 리턴 하는 방식.

      3. _.each로 구현하기 어려우면 for문으로 구현해보고 리팩토링 해보기

         _.filter = function (arr, test) {
                  	
         	let result = [];
                  	
         	for(let i =0; i<arr.length ; i++){
         			arr[i] = element;
         				if(test(element)){
         				result.push(element);
         				}
         			}
         	return result;
         }
         

         • 이렇게 구현한 다음 _.each로 변경해보면 고차함수에 대해 더 이해하기 쉬움.
         • _.each는 객체의 각 요소를 꺼내서 콜백함수에 넣어주니까
         • for문으로 부터 2줄은 _.each로 대체할 수 있음.

   6. _.reject 구현도 실습에 있었는데 filter와 정반대로 test 함수를 통과하지 않는 요소를 담는 것인데 if절만 부정연산자 사용하면 됨.

_.uniq

1. _.uniq는 주어진 배열의 요소가 중복되지 않도록 새로운 배열을 리턴함.

   1. _.each, _.indexOf 활용하기

   2. 중복여부는 엄격한 동치연산.

   3. 배열의 요소는 모두 primitive value

   4. 내가 구현한 코드

      _.uniq = function (arr) {
            
      let result=[];
      	_.each(arr, function(element){
      	if(_.indexOf(result,element)===-1){
      				result.push(element);
      		}
      	});
            	
      	return result;
      }
      

      1. 계속 테스트 통과가 안되서 왜 안되는지 이 코드가 맞는것 같은데 이상했다.
      2. 중괄호 잘못 적었는지 한참 고민하다가 다른 것 풀고 다시 봐도 몰랐는데 한참 보다가 _.indexOf에 . dot이 없었음…!

_.map()

1. react에서는 map만 사용해서 map을 이해하는 것 중요

2. _.map 구현

   1. 배열의 각 요소를 다른 것(iteratee의 결과)으로 매핑(mapping)

   2. iteratee(반복되는 작업)를 배열의 각 요소에 적용(apply)한 결과를 담은 새로운 배열을 리턴

   3. 내가 구현한 코드

      _.map = function (arr, iteratee) {
      	let result =[];
      	_.each(arr,function(element){
      		result.push(iteratee(element)
      	});
      	return result;
      }
      

_.pluck()

1. 객체 또는 배열을 요소로 갖는 배열과 각 요소에서 찾고자 하는 key 또는 index를 입력받아

2. 각 요소의 해당 값 또는 요소만을 추출하여 새로운 배열에 저장하고,

3. 최종적으로 새로운 배열을 리턴

4. 예를 들어, 각 개인의 정보를 담은 객체를 요소로 갖는 배열을 통해서, 모든 개인의 나이만으로 구성된 별도의 배열을 만들 수 있음

5. 최종적으로 리턴되는 새로운 배열의 길이는 입력으로 전달되는 배열의 길이와 같아야

6. 따라서 찾고자 하는 key 또는 index를 가지고 있지 않은 요소의 경우함, 추출 결과는 undefined 입니다.

7. _.each를 활용하여 _.pluck 구현 예제

     //_.pluck을 _.each를 사용해 구현하면 아래와 같습니다.
     _.pluck = function (arr, keyOrIdx) {
     let result = [];
     _.each(arr, function (item) {
       result.push(item[keyOrIdx]);
     });
     return result;
     }
   

8. -.map으로 구현 해보기.

    _.pluck = function (arr, keyOrIdx) {
     let newArr=[];
     if(keyOrIdx===undefined){
         return undefined;
       }
    _.map(arr,function(item){
         newArr.push(item[keyOrIdx]);
    });
       return newArr;
   };
   

_.reduce()

1. 배열을 순회하며 각 요소에 iteratee 함수를 적용하고 그 결과값을 계속해서 누적(accumulate), 최종적으로 누적된 결과값을 리턴

   1. 배열 [1, 2, 3, 4]를 전부 더해서 10이라는 하나의 값을 리턴
   2. 각 요소가 처리될 때마다 누적되는 값은 차례대로 1, 1+2, 1+2+3, 1+2+3+4

2. 다수의 정보가 하나의 값으로 축소(응축, 환원, reduction)되기 때문에 reduce라는 이름이 붙게 된 것

3. _.reduce(arr, iteratee, initVal)

   1. arr : 배열
   2. iteratee : 각 요소에 반복할 작업
   3. initVal : 초기 값

4. iteratee(acc, ele, idx, arr)

   1. acc : 이전 요소까지의 반복 작업의 결과로 누적된 값
   2. ele : 반복 작업을 수행할(아직 수행하지 않은) 현재의 요소
   3. 세 번째 인자로 초기 값이 전달되는 경우, 그 값을 누적 값의 기초(acc)로 하여 배열의 ‘첫 번째’ 요소부터 반복 작업이 수행
   4. 초기 값이 전달되지 않은 경우, 배열의 첫 번째 요소를 누적 값의 출발로 하여 배열의 ‘두 번째’ 요소부터 반복 작업이 수행

5. 예제 참고

    const numbers = [1,2,3];
    const sum = _.reduce(numbers, function(total, number){
      return total + number;
    }); // 초기 값이 주어지지 않았으므로, 초기 값은 배열의 첫 요소인 1입니다. 두 번째 요소부터 반복 작업이 시작됩니다.
        // 1 + 2 = 3; (첫 작업의 결과가 누적되어 다음 작업으로 전달됩니다.)
        // 3 + 3 = 6; (마지막 작업이므로 최종적으로 6이 리턴됩니다.)
      
    const identity = _.reduce([3, 5], function(total, number){
      return total + number * number;
    }, 2); // 초기 값이 2로 주어졌습니다. 첫 번째 요소부터 반복 작업이 시작됩니다.
           // 2 + 3 * 3 = 11; (첫 작업의 결과가 누적되어 다음 작업으로 전달됩니다.)
           // 11 + 5 * 5 = 36; (마지막 작업이므로 최종적으로 36이 리턴됩니다.)
   

6. 내가 구현한 코드

   _.reduce = function (arr, iteratee, initVal) {
     // TODO: 여기에 코드를 작성합니다.
     let acc=initVal;
        
     _.each(arr,function(element,idx,collection){
      if(acc===undefined){
       acc = arr[0];
      }else{
       acc =iteratee(acc,element,idx,collection);
      }
      
   })
     return acc;
   };
   

많이 어려웠지만 그래도 내장객체가 어떤식으로 구현되는지 이해할 수 있었던 시간이었다… 아직 콜백 함수에 대한 이해가 부족해서 each문 부터는 조금 당황했는데 제약조건이 많으면 일단 제약조건 무시하고 내가 할 수 있는 것을 구현한 다음 리팩토링으로 수정해나가면 되니까 처음부터 코드를 잘 짤 생각을 하지말고 리팩토링 할 생각을 해야함. 매번 강사님이 하신 말씀인데 테스트를 빨리 통과해야된다는 생각때문에 그렇게 하지못했음. 그래서 전부 for문으로 구현하고 콜백을 이해한 다음, 다시 시도해 볼 예정

javascript 카테고리 내 다른 글 보러가기