콜백 함수
The most beautiful experience we can have is the mysterious.
Albert Einstein
콜백 함수가 무엇인지 모른다면 오늘이 행운의 날입니다! 오늘 기사에서는 콜백 함수가 무엇을 의미하는지 논의할 것입니다. 솔직히 말해서, 이미 한동안 자바스크립트로 코딩해 왔다면 이미 어떤 유형의 콜백을 구현했을 수도 있습니다. 우리는 당신이 자바스크립트가 어떻게 작동하고 어떤 기능을 시작해야 하는지에 대한 기본적인 지식이 있다고 가정할 것입니다. 그렇지 않은 경우 이 주제로 들어가기 전에 functions mdn docs을 확인하십시오. 더 많은 이해에 도움이 될 것입니다.
내용물
소개
콜백 함수가 무엇을 하는지 이해해야 하는 이유는 무엇입니까? 음, 우선 콜백 함수는 기본적으로 함수일 뿐입니다. 유일한 차이점은 콜백 함수가 매개변수를 통해 함수로 전달되거나 인수라고 부르는 것뿐입니다. 함수를 다른 함수로 전달하는 이 개념은 자바스크립트 언어 전체에서 매우 일반적입니다. 나는 당신이 이미 몇 가지 콜백 함수로 작업했고 그것을 몰랐을 것이라고 확신합니다. 이것은 자바스크립트 함수가 다른 유형(부울, 문자열, 숫자)과 유사하며 인수로 쉽게 전달할 수 있음을 의미합니다.
콜백 함수가 어떻게 생겼는지에 대한 첫 번째 예를 살펴보겠습니다. 더 나은 이해를 위해 한 줄 한 줄 짚어보겠습니다.
콜백 함수
const functionFeeder = function(callback){
callback('Inside of functionFeeder')
}
functionFeeder라는 변수를 정의하고 functionFeeder 내부에서 콜백을 인수로 전달하는 함수를 선언합니다. 콜백 인수를 전달하는 이유는 functionFeeder가 호출될 때 매개변수에 함수를 전달할 수 있기 때문입니다.
functionFeeder() // invoke function
우리가 실행하기를 원하는 함수를 호출할 때 우리는 콜백 함수를 그렇게 전달하기를 원합니다.
functionFeeder(() => { }) // pass in a function
다음으로 콜백 함수 내부에 있는 문자열을 출력하려고 합니다. 여러 가지 방법으로 이 작업을 수행할 수 있지만 지금은 경고 메서드를 사용하여 문자열을 출력해 보겠습니다.
functionFeeder((string) => {alert(string)}) // alert function pops up
Defeat is not defeat unless accepted as a reality in your own mind
Bruce Lee
여기에서 무슨 일이 일어나고 있습니까? 이것이 콜백 함수입니다. functionFeeder는 콜백 함수가 되거나 다른 말로 고차 함수가 됩니다. 함수를 매개변수로 사용하고 매개변수 내에서 함수와 함께 호출될 때 함수를 실행할 수 있도록 합니다.
심층 콜백
다른 예를 살펴보겠습니다. 문자열 이름을 출력하는 간단한 로그 함수를 만들어 봅시다.
function printName(name){ // has one task
console.log(`Hello ${name}`) // outputs log
}
인수를 통해 전달된 이름으로 문자열을 출력하는 간단한 함수를 정의했습니다. 이제 printName 함수를 전달할 콜백 함수입니다.
function helloOscar(callback){
const fullName = 'Oscar';
callback(fullName);
}
이제 이 함수를 통해 전달하는 콜백은 helloOscar()를 호출할 때 printName 함수가 될 것이며, 이 함수는 콜백으로 printName을 실행합니다. 이제 다른 컨텍스트에서 printName을 재사용할 수 있습니다.
말이 돼? 나는 희망한다. 처음에는 약간 혼란스럽겠지만 콜백 기능을 더 많이 다루기 시작하면 처음으로 콜백 기능을 사용하려고 시도한 것이 언제인지 기억조차 나지 않을 것입니다.
결론
이 기사가 끝날 때까지 코드의 모든 라인에서 진행되는 작업을 만들고 이해하는 방법을 배웠기를 바랍니다. 코드가 완전히 작동하는 방식을 이해하는 것은 매우 중요합니다. 코드가 더 나은 개발자가 되는 데 도움이 될 뿐만 아니라 작업 중인 도구를 보다 효율적으로 사용하는 데도 도움이 될 수 있습니다.
이 기사는 주로 더 나은 프로그래머, 작가가 되고 프로그래밍 기술을 키우기 위해 개인적으로 사용하기 위한 것입니다. 나와 다른 사람들을 돕기 위해 이루어져야 한다고 생각하는 피드백이나 수정 사항을 자유롭게 삭제하십시오. 여기까지 시간을 내주셔서 감사합니다!
Reference
이 문제에 관하여(콜백 함수), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/cleveroscar/callback-functions-23a6
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
const functionFeeder = function(callback){
callback('Inside of functionFeeder')
}
functionFeeder라는 변수를 정의하고 functionFeeder 내부에서 콜백을 인수로 전달하는 함수를 선언합니다. 콜백 인수를 전달하는 이유는 functionFeeder가 호출될 때 매개변수에 함수를 전달할 수 있기 때문입니다.
functionFeeder() // invoke function
우리가 실행하기를 원하는 함수를 호출할 때 우리는 콜백 함수를 그렇게 전달하기를 원합니다.
functionFeeder(() => { }) // pass in a function
다음으로 콜백 함수 내부에 있는 문자열을 출력하려고 합니다. 여러 가지 방법으로 이 작업을 수행할 수 있지만 지금은 경고 메서드를 사용하여 문자열을 출력해 보겠습니다.
functionFeeder((string) => {alert(string)}) // alert function pops up
Defeat is not defeat unless accepted as a reality in your own mind
Bruce Lee
여기에서 무슨 일이 일어나고 있습니까? 이것이 콜백 함수입니다. functionFeeder는 콜백 함수가 되거나 다른 말로 고차 함수가 됩니다. 함수를 매개변수로 사용하고 매개변수 내에서 함수와 함께 호출될 때 함수를 실행할 수 있도록 합니다.
심층 콜백
다른 예를 살펴보겠습니다. 문자열 이름을 출력하는 간단한 로그 함수를 만들어 봅시다.
function printName(name){ // has one task
console.log(`Hello ${name}`) // outputs log
}
인수를 통해 전달된 이름으로 문자열을 출력하는 간단한 함수를 정의했습니다. 이제 printName 함수를 전달할 콜백 함수입니다.
function helloOscar(callback){
const fullName = 'Oscar';
callback(fullName);
}
이제 이 함수를 통해 전달하는 콜백은 helloOscar()를 호출할 때 printName 함수가 될 것이며, 이 함수는 콜백으로 printName을 실행합니다. 이제 다른 컨텍스트에서 printName을 재사용할 수 있습니다.
말이 돼? 나는 희망한다. 처음에는 약간 혼란스럽겠지만 콜백 기능을 더 많이 다루기 시작하면 처음으로 콜백 기능을 사용하려고 시도한 것이 언제인지 기억조차 나지 않을 것입니다.
결론
이 기사가 끝날 때까지 코드의 모든 라인에서 진행되는 작업을 만들고 이해하는 방법을 배웠기를 바랍니다. 코드가 완전히 작동하는 방식을 이해하는 것은 매우 중요합니다. 코드가 더 나은 개발자가 되는 데 도움이 될 뿐만 아니라 작업 중인 도구를 보다 효율적으로 사용하는 데도 도움이 될 수 있습니다.
이 기사는 주로 더 나은 프로그래머, 작가가 되고 프로그래밍 기술을 키우기 위해 개인적으로 사용하기 위한 것입니다. 나와 다른 사람들을 돕기 위해 이루어져야 한다고 생각하는 피드백이나 수정 사항을 자유롭게 삭제하십시오. 여기까지 시간을 내주셔서 감사합니다!
Reference
이 문제에 관하여(콜백 함수), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/cleveroscar/callback-functions-23a6
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
function printName(name){ // has one task
console.log(`Hello ${name}`) // outputs log
}
function helloOscar(callback){
const fullName = 'Oscar';
callback(fullName);
}
이 기사가 끝날 때까지 코드의 모든 라인에서 진행되는 작업을 만들고 이해하는 방법을 배웠기를 바랍니다. 코드가 완전히 작동하는 방식을 이해하는 것은 매우 중요합니다. 코드가 더 나은 개발자가 되는 데 도움이 될 뿐만 아니라 작업 중인 도구를 보다 효율적으로 사용하는 데도 도움이 될 수 있습니다.
이 기사는 주로 더 나은 프로그래머, 작가가 되고 프로그래밍 기술을 키우기 위해 개인적으로 사용하기 위한 것입니다. 나와 다른 사람들을 돕기 위해 이루어져야 한다고 생각하는 피드백이나 수정 사항을 자유롭게 삭제하십시오. 여기까지 시간을 내주셔서 감사합니다!
Reference
이 문제에 관하여(콜백 함수), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/cleveroscar/callback-functions-23a6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)