저는 현재 Frontend Masters에서 JavaScript : The Hard Parts v2 과정을 수강하고 있습니다.
놀라운 Will Sentance가 가르치는 훌륭한 과정입니다. 이 과정은 다음과 같은 주요 개념을 다룹니다.
https://dev.to/ryanameri/mastering-hard-parts-of-javascript-callbacks-i-3aj0
이 튜토리얼 시리즈에서는 각 섹션에서 제공하는 연습 문제를 살펴보고 자체 솔루션을 제공하고 해당 솔루션에 대한 설명을 제공합니다. 이 첫 번째 부분은 콜백을 다룹니다.
콜백은 클로저에서 비동기 JavaScript에 이르기까지 대부분의 모든 것이 이를 기반으로 구축되므로 JS에서 본질적으로 기본적인 개념입니다.
JS를 소개하기 전에는 더 높은 순서의 함수 (다른 함수를 입력으로 받거나 함수를 반환 할 수 있는 함수)를 본 적이 없었기 때문에 처음에는 개념이 매우 혼란스러웠습니다. 고맙게도 많은 연습을 통해 콜백을 잘 처리 할 수 있었습니다. 내 솔루션을 보기 전에 먼저 자신의 솔루션을 구현 한 다음 비교하고 대조하는 것이 좋습니다. 이 연습 문제를 해결하는 방법에는 확실히 여러 가지가 있으며 내 것이 반드시 최고는 아닙니다. 내 솔루션은 모두 github에서 사용할 수 있으며 리포지토리를 포크하여 직접 작업하거나 문제를 해결하는 더 나은 방법을 찾은 경우 PR을 보내 주셔도 좋습니다.
JS를 처음 접하거나 콜백을 처리하는 데 어려움이 있는 경우 이 연습을 통해 개념을 마스터하는 데 도움이 될 것입니다. 자세한 내용은 이 과정에 대한 Will의 슬라이드를 여기 (pdf)에서 찾을 수 있습니다.
연습 1
하나의 입력을 받아들이고 여기에 2를 더하는 함수 addTwo를 만듭니다.
console.log (addTwo (3))는 5를 출력해야 합니다.
그리고
console.log(addTwo(10))
12를 출력해야 합니다.
해결책 1
function addTwo(num) {
return num + 2;
}함수 사용법을 알고 있다는 사실을 알기 때문에 기분이 편안해집니다. 걱정하지 마세요. 곧 재미있을 것입니다!
연습 2
하나의 입력을 받아들이고 여기에 "s"를 추가하는 함수 addS를 만듭니다.
console.log (addS ( "pizza")); pizzas를 출력하고
console.log (addS ( "bagel")); bagels을 출력해야 합니다.
해결 방법 2
function addS(word) {
return word + "s";
}또 다른 쉬운 함수. +는 문자열과 숫자로 작업 할 수 있는 JS에서 오버로드 된 연산자라는 점을 상기 시켜 줍니다.
연습 3
두 가지 입력을 받는 map이라는 함수를 만듭니다.
숫자 배열 (숫자 목록) '콜백'함수-배열의 각 요소에 적용되는 함수 ( '맵'함수 내부) 맵이 입력 배열의 각 요소에 '콜백'함수를 사용한 결과 인 숫자로 채워진 새 배열을 반환하도록 합니다.
console.log (map ([1, 2, 3], addTwo)); [3, 4, 5]를 출력해야 합니다.
해결책 3
function map(array, callback) {
const newArr = [];
for (let i = 0; i < array.length; i++) {
newArr.push(callback(array[i]));
}
return newArr;
}이제 이것은 더 흥미롭습니다! 기본적으로 여기에서는 기본 Array.prototype.map() 함수의 간단한 버전을 다시 구현합니다.
나는 대부분의 사람들이 그것에 익숙해야 하기 때문에 여기서 기본적인 for 루프를 사용하기로 결정했습니다.
나는 이것이 아마도 시리즈에서 가장 중요한 연습이라고 생각합니다.이 문제를 해결할 수 있다면 기본적으로 콜백을 받은 것입니다!
연습 4
forEach 함수는 배열과 콜백을 취하고 배열의 각 요소에서 콜백을 실행합니다. forEach는 아무것도 반환하지 않습니다.
let alphabet = "";
const letters = ["a", "b", "c", "d"];
forEach(letters, function (char) {
alphabet += char;
});
console.log(alphabet);abcd를 출력해야 합니다.
해결 방법 4
function forEach(array, callback) {
for (let i = 0; i < array.length; i++) {
callback(array[i]);
}
}네이티브 Array 메서드의 또 다른 재 구현. map과의 차이점에 유의하십시오. map은 배열을 반환하고 forEach는 아무것도 반환하지 않으므로 필요한 모든 작업이 콜백 함수의 본문에서 발생해야 합니다.
연습 5
이번에는 for 루프를 사용하는 대신 방금 정의한 고유 한 forEach 함수를 사용하여 맵 함수를 다시 빌드 하십시오. 이 새 함수를 mapWith로 호출합니다.
console.log(mapWith([1, 2, 3], addTwo)); [3, 4, 5]를 출력해야 합니다.
해결책 5
function mapWith(array, callback) {
const newArr = [];
forEach(array, (item) => {
newArr.push(callback(item));
});
return newArr;
}이러한 방식으로 이전에 정의한 함수를 사용하는 것은 매우 강력합니다. 함수가 정확히 어떻게 작동하는지 파악할 수 있습니다. 이제 lodash 또는 underscore와 같은 라이브러리를 사용할 때 기본 함수가 어떻게 구현되는지 상상할 수 있습니다.
연습 6
reduce 함수는 배열을 취하고 요소를 단일 값으로 줄입니다. 예를 들어 모든 숫자를 더하거나 곱하거나 함수에 넣을 수 있는 모든 연산을 할 수 있습니다.
console.log(reduce(nums, add, 0))
const nums = [4, 1, 3];
const add = function (a, b) {
return a + b;
};8을 출력해야 합니다.
해결책 6
function reduce(array, callback, initialValue) {
initialValue = initialValue ?? array[0];
forEach(array, (item) => {
initialValue = callback(initialValue, item);
});
return initialValue;
}아 reduce! JS에서 가장 오해를 받았지만 강력한 함수 중 하나입니다 (더 광범위하게 함수 프로그래밍에서). 기본 개념은 다음과 같습니다. 초기 값이 있고 배열의 모든 항목에 대해 콜백 함수를 실행하고 결과를 이 초기 값에 할당합니다. 마지막에 이 값을 반환합니다.
우리가 어떻게 우리 자신의 forEach 함수를 사용했는지 주목하세요. 물론 동일한 동작으로 네이티브 array.forEach()를 사용할 수도 있습니다. Nullish Coalescing 연산자의 사용도 확인하십시오. 이 연산자는 ES2020의 새로운 기능이며 코드를 훨씬 더 읽기 쉽게 만들어주기 때문에 제가 가장 좋아하는 연산자입니다 (초기 값이 0으로 설정되어있을 때 || 연산자 문제가 발생하지 않습니다). 이 연산자에 대한 자세한 내용은 MDN을 참조하십시오.
연습 7
입력 배열을 비교하고 모든 입력에서 찾은 요소가 있는 새 배열을 반환하는 함수 교차를 생성합니다. 보너스 : reduce를 사용하십시오!
console.log(
intersection([5, 10, 15, 20], [15, 88, 1, 5, 7], [1, 10, 15, 5, 20])
);[5, 15] 출력해야 함
해결책 7
function intersection(...arrays) {
return arrays.reduce((acc, array) => {
return array.filter((item) => acc.includes(item));
});
}reduce와 filter를 결합하면 강력한 기능이 생성됩니다. 여기서 acc가 param으로 제공되지 않으면 첫 번째 배열로 설정되며 인수로 제공하지 않습니다. 따라서 후속 호출에서 배열을 필터링하여 acc 배열에도 포함 된 항목을 반환합니다.
... 배열의 사용에 주목하십시오. 여기서는 함수에 얼마나 많은 인수가 제공 될지 모르기 때문에 나머지 매개 변수를 사용하고 있습니다.
등록된 댓글이 없습니다.
