JavaScript의 콜백 및 고차 함수 가이드.

콜백 및 고차 함수는 JavaScript에서 가장 잘못 이해되는 개념 중 일부입니다. 이 포스트 동안 우리는 자바스크립트 엔지니어로서 프로 레벨 코드를 작성하기 위해 그들에 익숙해질 것입니다.

계속하기 전에 스스로에게 질문해 봅시다.

기능이 있는 이유

이유를 보자…

10제곱 함수 만들기

입력을 받지 않음

10*10을 반환합니다.

십제곱

function tenSquared() {
 return 10*10;
}
tenSquared() // 100

9제곱 함수는 어떻습니까?

나인제곱

function nineSquared() {
 return 9*9;
}
nineSquared() // 81

그리고 8제곱 함수? 125제곱?

우리는 어떤 원칙을 어기고 있습니까? DRY(반복하지마세요)

👉 함수를 일반화하여 재사용이 가능하도록 할 수 있습니다.

function squareNum(num){
 return num*num;
}
squareNum(10); // 100
squareNum(9); // 81
squareNum(8); // 64

함수 일반화
Parameters (placeholders)는 기능을 실행할 때까지 기능을 실행할 데이터를 결정할 필요가 없음을 의미합니다. 그런 다음 함수를 실행할 때 실제 값(argument)을 제공합니다. Higher-order functions 이 동일한 원칙을 따르기 때문에 기능을 실행할 때까지 일부 기능이 무엇인지 정확히 결정하고 싶지 않을 수 있습니다.

이제 함수copyArrayAndMultiplyBy2가 있다고 가정합니다.

function copyArrayAndMultiplyBy2(array) {
 const output = [];
 for (let i = 0; i < array.length; i++) {
 output.push(array[i] * 2);
 }
 return output;
 }
const myArray = [1,2,3];
const result = copyArrayAndMultiplyBy2(myArray)

배열을 복사하여 2로 나누고 싶다면?

function copyArrayAndDivideBy2(array) {
 const output = [];
 for (let i = 0; i < array.length; i++) {
 output.push(array[i] / 2);
 }
 return output;
 }
const myArray = [1,2,3];
const result = copyArrayAndDivideBy2(myArray)

아니면 3을 추가?

function copyArrayAndAdd3(array) {
 const output = [];
 for (let i = 0; i < array.length; i++) {
 output.push(array[i] + 3);
 }
 return output;
 }
const myArray = [1,2,3];
const result = copyArrayAndAdd3(myArray);

우리는 어떤 원칙을 어기고 있습니까? DRY(반복하지마세요)

👉 기능을 일반화할 수 있으므로 실행할 때만 특정 명령을 전달합니다copyArrayAndManipulate!

function copyArrayAndManipulate(array, instructions) {
 const output = [];
 for (let i = 0; i < array.length; i++) {
 output.push(instructions(array[i]));
 }
 return output;
}
function multiplyBy2(input) { return input * 2; }
const result = copyArrayAndManipulate([1, 2, 3], multiplyBy2);

어떻게 이것이 가능했을까요?

Functions in javascript = first-class objects . 이 외에도 함수의 다른 기능 중 일부를 강조해 보겠습니다.

다른 자바스크립트 객체와 공존할 수 있고 다른 자바스크립트 객체처럼 취급될 수 있습니다.

다른 개체의 변수 및 속성에 할당됨

함수에 인수로 전달됨

함수에서 값으로 반환됨

이 코드를 고려하십시오

function copyArrayAndManipulate(array, instructions) {
 const output = [];
 for (let i = 0; i < array.length; i++) {
 output.push(instructions(array[i]));
 }
 return output;
}
function multiplyBy2(input) {return input * 2;}
const result = copyArrayAndManipulate([1, 2, 3], multiplyBy2);

우리의 고차 함수 ☝는 무엇입니까?

함수를 받는 외부 함수는 고차 함수입니다.

콜백 함수는 무엇입니까?

우리가 삽입하는 함수는 콜백 함수입니다.

고차 함수

함수를 받거나 전달합니다. 이러한 기능을 설명하는 용어일 뿐입니다any function that does it we call that -. 그러나 본질적으로 다른 것은 없습니다.

이 두 개념을 마스터해야 하는 이유

콜백 및 고차 함수는 코드를 단순화합니다.
그리고 그것을 유지하십시오DRY.

선언적 가독성 코드: 매핑, 필터, 축소 - 데이터 작업을 위한 코드를 작성하는 가장 읽기 쉬운 방법입니다.

코드스미스 및 프로 면접 준비: Codesmith 및 기타 중간/고위급 취업 면접 모두에서 면접에서 테스트하는 가장 인기 있는 주제 중 하나입니다.

비동기식 JavaScript: 콜백은 async JavaScript 의 핵심 측면이며 promises , async/await 에 있습니다.

결론
더군다나 우리는 그것을 가지고 있습니다. 여기까지 하셨다면 읽어주셔서 감사합니다! 이 게시물이 전문가 수준의 JavaScript 코드 작성을 시작하는 데 도움이 되기를 바랍니다.

👋친구하자! 더 많은 관련 콘텐츠를 보려면 나를 팔로우하세요. 새로운 콘텐츠에 대한 업데이트를 받으려면 여기에서도 저를 팔로우하는 것을 잊지 마십시오.

건배!