Call back 함수로 Method 만들기

학습목표

forEach() ,indexOf(), map(), slice(), reduce(), filter()와 같은 메서드를

자바스크립트 코드로 만들고 만든 함수를 콜백하여 다른 함수를 만들어보자!😎

(비동기에서 콜백을 원활히 쓰기위한 선행학습)

---

만든것

예제.slice() 

_.slice = function (arr, start, end) {
 
  let _start = start || 0, 
    _end = end;

  // 입력받은 인덱스가 음수일 경우, 마지막 인덱스부터 매칭
  // (ex. -1 => arr.length - 1, -2 => arr.length - 2)
  // 입력받은 인덱스는 0 이상이어야 한다.
  if (start < 0) _start = Math.max(0, arr.length + start);
  if (end < 0) _end = Math.max(0, arr.length + end);

  // `end`가 생략될 경우(undefined), slice는 마지막 인덱스까지 동작
  // `end`가 배열의 범위를 벗어날 경우, slice는 마지막 인덱스까지 동작
  if (_end === undefined || _end > arr.length) _end = arr.length;

  let result = [];
  // `start`가 배열의 범위를 벗어날 경우, 빈 배열을 리턴합니다.
  for (let i = _start; i < _end; i++) {
    result.push(arr[i]);
  }

  return result;
};

1.take()

// _.take는 배열의 처음 n개의 element를 담은 새로운 배열을 리턴합니다.
// n이 undefined이거나 음수인 경우, 빈 배열을 리턴합니다.
// n이 배열의 길이를 벗어날 경우, 전체 배열을 shallow copy한 새로운 배열을 리턴합니다.

_.take = function (arr, n) {
  if( n === undefined || n === 0){  // 조건에 맞지않을 경우를 위해 조건문 
    return [];
  }else{
    return _.slice(arr,0,n); //n이 양수인 경우 위의 slide()를 사용하여 전체배열을 리턴한다
  }
};

2.forEach()

//iteratee는 익명함수 function(letter) { iterations.push(letter); });
 *  const letters = ['a', 'b', 'c'];
 *  const iterations = [];
 *  _.each(letters, function(letter) {
 *   iterations.push(letter);
 *  });
 *  expect(iterations).to.eql(['a', 'b', 'c']);

 * iteratee는 차례대로 데이터(element 또는 value), 접근자(index 또는 key), 
 * collection을 다룰 수 있어야 합니다.
 *  배열 arr을 입력받을 경우, iteratee(ele, idx, arr)
 *  객체 obj를 입력받을 경우, iteratee(val, key, obj)
 * 이처럼 collection의 모든 정보가 iteratee의 인자로 잘 전달되어야 모든 경우를 다룰 수 있습니다.
 * 실제로 전달되는 callback 함수는 collection의 모든 정보가 필요하지 않을 수도 있습니다.
 
 _.each = function (collection, iteratee) {
  //배열인경우
  if (Array.isArray(collection)){  //배열인지 체크
    for(let i = 0; i < collection.length; i++){ //인자로 받은 뱅열의 랭스만큼 반복
    iteratee(collection[i],i,collection); //iteratee함수에 인자를 넣어줌
    }
  //객체  
  }else if(typeof collection === 'object'){ //객체인지 체크
    for(let key in collection){   //for in으로 객체의 키 순회
      iteratee(collection[key],key,collection) // 값, 키, 배열을 인자로 넣어줌
    }
  }
};

3.filter()

// _.filter는 test 함수를 통과하는 모든 요소를 담은 새로운 배열을 리턴합니다.
// test(element)의 결과(return 값)가 truthy일 경우, 통과입니다.
// test 함수는 각 요소에 반복 적용됩니다.

_.filter = function (arr, test) {
  let result = [];  //filter 통과된 요소 담아줄 빈배열 할당
  _.each(arr, function (n)  { //각요소를 조회하는 each()사용
    if(test(n)){    //인자 n이 test함수를 truthy하게 통과하면
    result.push(n); //빈배열에 요소n을 push함.
    };
  });
  return result; //순회후 새배열 리턴
};

4.reduce()

_.reduce = function (arr, iteratee, initVal) { //  _.reduce(배열, iteratee, 초기값)
  
  let acc = initVal //초기값을 주기위해 acc에 inutVal할당
  _.each(arr, function(ele, idx){
    if(initVal === undefined && idx === 0){ 
    //초기값이 없거나 인덱스가 0이면 acc는 순회요소의 0번할당
      acc = ele;
    }else{ //그외의 경우엔
      acc = iteratee(acc,ele,idx,arr); //acc에 함수 할당(요소 더하는함수임)
      //iteratee(응축값acc, 데이터ele, 접근자idx, 원본배열 arr)
    }
  })
  return acc; 모든 요소가 응축됨 acc리턴
};

//원래 이렇게 씀
// return arr.reduce((acc,cur)=>{
//   return acc+ cur
// },0)//initval

---

 

느낀점

자바스크립트 행님들 메서드 만들어 주셔서 감사합니다.

필요한 메서드 쓸때마다 감사한 마음으로 사용하겠습니다..😢

 

콜백함수를 상요하는 방법을 익히고, 메서드의 로직을 알아가는 시간이 되었다.

콜백과 재귀,자료구조는 잘 익혀두어야겠다는 생각이 들었다.

 

---

다음 공부방향

내일은 비동기를 배운다.

비동기 과제시 콜백 함수를 많이 사용한다고 하니, 내일도 블로그 정리를 해두어야 겠다.