callback & async

callback이란 ?

다른 함수에서 입력값으로 전달되어 다른 함수에 의해서 나중에 호출되는 함수이다.

아래 예시를 보면

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

let length = (element) => element.length > 6 ;

const result = words.filter(length);

console.log(result);
// Array ["exuberant", "destruction", "present"]

word array에서 filter 함수를 사용하려고 할 때 인자 값으로 length 함수를 받고 있다.

*filter 함수의 첫번째 인자 값은 callback 함수이다. [참고] array.filter

이처럼 filter 함수에 의해 나중에 호출되는 함수 length는 callback 함수라고 할 수 있다.

대부분은 callback 함수 자리에 익명함수를 넣어주는 경우가 많다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(e => e.length > 6 );

console.log(result);
// Array ["exuberant", "destruction", "present"]

---

async 란?

promise를 매우 편리하게 사용할 수 있게 도와주는 문법이다.

promise에 대한 내용은 따로 정리할 예정이다 ...

async는 await와 같이 사용된다.

*아래 예시를 통해 사용해보자

// promise와 setTimeout()을 사용해서 비동기 코드를 흉내낸 함수
function timer(time){
	return new Promise((resolve)=>{
        setTimeout(()=>{resolve(time)},time);
    });
}

// timer 함수가 끝나면 콘솔에 time을 출력하고 1초를 추가해서 사이클을 반복하라
console.log('start');
timer(1000).then((time)=>{
    console.log('time:'+time);
	return timer(time+1000);
}).then((time)=>{
    console.log('time:'+time);
	return timer(time+1000);
}).then((time)=>{
    console.log('time:'+time);
  	console.log('end');
});

/*
start
time:1000
time:2000
time:3000
end
*/

위 예제를 깔끔하게 만들어보자 ...

function timer(time){
	return new Promise((resolve)=>{
        setTimeout(()=>{resolve(time)},time);
    });
}

// 비동기 처리
async function run(){
    console.log('start');
    let time = await timer(1000);
    console.log('time:'+time);
    time = await timer(time+1000);
    console.log('time:'+time);
    time = await timer(time+1000);
    console.log('time:'+time);
    console.log('end');
}


console.log('parent start');
run();
console.log('parent end');

/* 위에 함수와 결과값이 같으나 코드가 간결해진 것을 볼 수 있다.
parent start
start
parent end
time:1000
time:2000
time:3000
end
*/

위 예제에서 console.log(run()); 을 실행해보면 promise를 반환하는데 아래 예제와 결과 값을 비교해보자

// 함수는 동일하다.
function timer(time){ ... }

// 비동기 처리
async function run(){ ... }

async function run2(){
    console.log('parent start');
    await run();
    console.log('parent end');
}
run2();
                     
/* 바로 위 예제와 결과를 비교해보자
parent start
start
time:1000
time:2000
time:3000
end
parent end
*/

순서	run()	run2()
1	parent start	parent start
2	start	start
3	parent end	time:1000
4	time:1000	time:2000
5	time:2000	time:3000
6	time:3000	end
7	end	parent end

즉, await 가 붙은 run();이 종료된 후에 console.log('parent end'); 가 실행되는 것을 볼 수 있다.

정리해보면 일반 함수 앞에 async 를 붙여주면 비동기로 처리해달라는 의미이고, 내부에 있는 await은 async 내부에서만 사용 가능하며, await가 붙은 요청은 그 요청이 끝나는 시점까지 다음 동작으로 넘어가지 못하게 한다.

---

reference
-https://www.youtube.com/playlist?list=PLuHgQVnccGMBVQ4ZcIRmcOeu8uktUAbxI

-.https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

*오타 혹은 오류 지적해주시면 감사하겠습니다 !!