연습 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!
등록된 댓글이 없습니다.