JavaScript의 콜백 및 고차 함수 안내서.

콜백 및 고차 함수는 JavaScript에서 가장 잘못 이해되는 개념 중 일부입니다. 이 게시물 동안 우리는 JavaScript 엔지니어로서 프로 수준의 코드를 작성하는 데 익숙해질 것입니다.

계속하기 전에 스스로에게 질문을 해보자.

함수가 있는 이유

왜 그런지 보자…

함수 만들기 10제곱

입력을 받지 않음

10*10 반환

10제곱

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

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

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 . 이 외에도 함수의 다른 기능 중 일부를 강조해 보겠습니다.

다른 javascript 객체와 공존할 수 있고 마찬가지로 처리될 수 있음

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

함수에 인수로 전달됨

함수에서 값으로 반환됨

이 코드 조각을 고려하십시오

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);

Higher Order Function ☝은 무엇입니까?

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

콜백 함수는 무엇입니까

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

고차 함수

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

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

콜백 및 고차 함수는 코드를 단순화합니다.
보관하십시오 DRY .

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

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

비동기 JavaScript: 콜백은 async JavaScript 의 핵심 요소이며 promises , async/await 의 내부에 있습니다.

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

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

건배!