댓글 검색 목록

[javascript] JavaScript의 어려운 부분 마스터하기 : 콜백 V

페이지 정보

작성자 운영자 작성일 20-09-05 12:17 조회 646 댓글 0

연습 21 


객체 (함수 포함)와 주제 (모든 값)를 허용하는 함수 higherFunc를 작성하십시오. highFunc는 주제가 입력으로 주어 졌을 때 가장 큰 숫자를 반환하는 관련 값 (함수가 될 것)을 가진 객체의 키를 반환해야 합니다. 


https://dev.to/ryanameri/mastering-hard-parts-of-javascript-callbacks-v-2h02


const groupOfFuncs = {};
groupOfFuncs.double = (n) => n * 2;
groupOfFuncs.addTen = (n) => n + 10;
groupOfFuncs.inverse = (n) => n * -1;
console.log(highestFunc(groupOfFuncs, 5));
// should log: 'addTen'
console.log(highestFunc(groupOfFuncs, 11));
// should log: 'double'
console.log(highestFunc(groupOfFuncs, -20));
// should log: 'inverse'


솔루션 21 


function highestFunc(objOfFuncs, subject) {
  let largest = Number.NEGATIVE_INFINITY;
  let rightKey = undefined;
  for (let [key, fn] of Object.entries(objOfFuncs)) {
    if (fn(subject) > largest) {
      largest = fn(subject);
      rightKey = key;
    }
  }
  return rightKey;
}


여기서 중요한 것은 함수에서 반환 된 가장 큰 숫자와 키가 무엇인지 두 개의 값을 유지해야 한다는 것입니다. 따라서 이 두 변수를 정의하고 임시 값으로 초기화합니다. 

그런 다음 시도 된 실제 Object.entries () 메서드를 사용하여 객체를 반복하고, subjct에서 함수를 호출하고, 반환 값이 현재 저장 한 것보다 큰지 확인합니다. 그렇다면 해당 키를 저장하고 마지막으로 객체를 반복하면 해당 키를 반환합니다.


연습 22 


두 개의 매개 변수 인 시작 값과 함수 배열을 사용하는 함수 combineOperations를 작성하십시오. combineOperations는 시작 값을 배열의 첫 번째 함수에 전달해야 합니다. CombineOperations는 첫 번째 함수에서 반환 된 값을 두 번째 함수로 전달해야 하며 배열의 모든 함수가 호출 될 때까지 계속해야 합니다. CombineOperations는 배열의 마지막 함수가 반환 한 최종 값을 반환해야 합니다.


function add100(num) {
  return num + 100;
}

function divByFive(num) {
  return num / 5;
}

function multiplyByThree(num) {
  return num * 3;
}

function multiplyFive(num) {
  return num * 5;
}

function addTen(num) {
  return num + 10;
}

console.log(combineOperations(0, [add100, divByFive, multiplyByThree]));
// Should output 60 -->
console.log(combineOperations(0, [divByFive, multiplyFive, addTen]));
// Should output 10


해결책 22 


function combineOperations(startVal, arrOfFuncs) {
  return arrOfFuncs.reduce((accum, fn) => {
    return fn(accum);
  }, startVal);
}


다시 말하지만, 우리는 배열을 받고 있고, 그 배열에서 계산 된 단일 값을 원합니다. 그래서 우리는 reduce를 보고 있습니다. 이것은 연습 20과 매우 유사합니다. 여기서 주목해야 할 점은 reduce를 만들 때 reduce의 누적을 startVal로 설정할 수 있다는 것입니다.


연습 23 


배열과 콜백을 받는 함수 myFunc를 정의합니다. myFunc는 배열의 각 요소를 순서대로 콜백에 전달해야 합니다. 콜백이 true를 반환하면 myFunc는 현재 요소의 인덱스를 반환해야 합니다. 콜백이 true를 반환하지 않으면 myFunc는 -1을 반환해야 합니다. 


const numbers = [2, 3, 6, 64, 10, 8, 12];
const evens = [2, 4, 6, 8, 10, 12, 64];

function isOddAgain(num) {
  return num % 2 !== 0;
}

console.log(myFunc(numbers, isOddAgain));
// Output should be 1
console.log(myFunc(evens, isOddAgain));
// Output should be -1


솔루션 23


function myFunc(array, callback) {
  return array.findIndex(callback);
}


처음에는 reduce를 사용하여 수동으로 기능을 구현하려고 했지만 (이 시점에서 reduce를 과도하게 사용하고 있다고 생각합니다!) 다시 정의를 살펴 보았습니다. 발견되면 첫 번째 인덱스를 반환하고 찾을 수 없으면 -1을 반환합니다. 이것이 findIndex() Array 메서드의 정의라는 것을 깨달았으므로 콜백을 사용하여 입력 배열에서 findIndex를 실행하기 만하면 됩니다. 단순한!


연습 24 


배열과 콜백 함수를 받는 함수 myForEach를 작성합니다. 함수는 배열의 각 요소를 순서대로 콜백 함수에 전달해야 합니다. 이 함수의 동작은 기본 .forEach() JavaScript 배열 메서드의 기능을 최대한 가깝게 미러링 해야 합니다. 


let sum = 0;

function addToSum(num) {
  sum += num;
}

const nums2 = [1, 2, 3];
myForEach(nums2, addToSum);
console.log(sum);
// Should output 6


솔루션 24 


forEach를 수동으로 다시 구현하는 이전 연습으로 약간의 후퇴. 유일한 차이점은 여기 전역 범위에서 변수 합계를 조작한다는 것입니다. 나는 array.forEach()를 사용하여 내 자신의 forEach를 만드는 것이 속임수를 사용하고 있으므로 for ... of 루프를 대신 사용하기로 결정했습니다.


이 마지막 연습이 매우 쉽다는 것을 알았다면 콜백을 사용하는 첫 번째 연습 이후 얼마나 멀리 왔는지 확인하고 콜백에 익숙해져야 합니다.


이것으로 콜백 연습이 끝났습니다. 다음 단계 : Closure!



댓글목록 0

등록된 댓글이 없습니다.

웹학교 로고

온라인 코딩학교

코리아뉴스 2001 - , All right reserved.