[JS]callback

ShinJuYong·2022년 3월 14일
0

공부한것들

목록 보기
1/33
post-thumbnail

callback이란?

콜백은 다른 함수가 실행을 끝낸 뒤 실행되는 — call back 되는 함수를 말한다.

Javascript 는 이벤트 기반의 언어이기때문에 다음 명령어를 실행하기전 이전 명령어의 응답을 기다리지않고 다른 이벤트들을 수행하면서 명령이 비동기적으로 실행된다

동기와 비동기의 차이 참조링크

밑의 예시를 보자.

function first() {
	console.log(1);
}

function second() {
	console.log(2);
}

first();
second();

first() => 1 이 실행된후 second() => 2가 실행되며 1과 2가 출력될것이다.
하지만 first()함수가 요청을 보내 응답을 받아야하는 함수라면 어떨까?

function first(){
  setTimeout( function(){
    console.log(1);
  }, 500 );
}
function second(){
  console.log(2);
}
first();
second();

이경우에는 우리가 먼저 first()함수를 call했더라고 결과는 second()함수 이후에 찍힌다. 즉 자바스크립트는 우리가 원하는 순서대로 명령을 수행하지않는다.
순서대로 응답을 기다린후에 함수를 수행하는것이 아니라는 뜻이다.

이번엔 직접 콜백을 만들어보자

function sayHello(name) {
	console.log("hello " + name);
}

// 다른 함수 자체를 매개변수로 받는다. cbf = object()
// function == object
function getName(cbf) {
	cbf("짱구");
}

getName(sayHello); // hello 짱구

이 코드에서 getName함수를 호출할 때 sayHello의 name에 매개변수 "짱구"를 담아 출력한다.

마무리

"콜백'은 비동기와 동기에 대한 개념을 정리해야 더 잘 쓸수있을거 같고..
아무래도 자바스크립트에대한 더 심도깊은 이해가 있어야 다방면으로 사용이 가능할거같다 그냥쓴다면 콜백지옥에 빠질수있어 주의해야한다!


참고한곳
callback

0개의 댓글