callback, promise 객체

- 동기 방식 : 함수를 호출하고 순서대로 실행

ex)

function a() {
	console.log('A')
}
function b() {
	console.log('B')
}
a()
b()

출력 : A > B

function a() {
	setTimeout(() => {
    	console.log('A')
    }, 1000)
}
function b() {
	console.log('B')
}
a()
b()

출력 : B > A

- 비동기 방식 : 함수간의 임의의 실행 순서를 보장

1. callback

: 함수의 기본적인 로직이 끝난 후 다음 함수를 호출

함수호출 :

a(function() {
	b()
})

먼저 실행할 a함수를 호출하면서 인수로 b함수를 호출

a 함수에서 매개변수로 b함수를 받아줄 수 있도록 지정(callback)
b 함수를 호출할 부분에서 callback함수 호출

function a(callback) {
    setTimeout(() => {
    	console.log('A')
        callback()
    }, 1000)
}

-> callback 부분에서 b함수 호출
a() -> b() 순서 보장
출력 : A > B

function a(callback) {
	const str = 'callback test'
    setTimeout(() => {
    	console.log('A')
        callback(str)
    }, 1000)
}

a(function(event) {
	console.log(event)
    b()
})

-> callback의 인수를 함수 호출시 매개변수로 사용 가능
str -> callback의 인수 -> event
출력 : A > callback test > B

기본 실행 순서를 보장하지만 사용 패턴이 불편하다.
해당 내용이 많아지면 점점 깊이가 깊어진다(callback지옥)

a(function (){
	b(function () {
		c(function (){
			...
		}
	}
}

2. promise 객체

Function a() {
	return new Promise(function (resolve) {
		setTimeout( function () {
			console.log('A')
			resolve('response')
		}, 1000)
	})
}

Function b() {
	console.log('B')
}

Async function test() {
	const res = await a()
    console.log('res: ',  res)
	b()
}

test()

return new Promise()를 통해 promise 객체가 반환된다
promise에 callback추가 -> resolve 매개변수
(resolve : 위의 callback과 같다)

resolve라는 callback을 실행을 보장하고싶은 위치에서 호출
생성자 함수로 만들어진 인스턴스가 return으로 반환(promise객체)
-> promise가 반환되면 await라는 키워드 붙일 수 있다
-> resolve()가 실행될 때 까지 기다린다
: a함수가 실행되어 resolve가 호출될 때 까지 기다렸다가 호출되면 다음으로 넘어간다.

callback을 통해 넘겨주는 데이터를 const res = await a()와 같은 형태로 받을 수 있다.

출력 : A > res: response > B

a > b > c > d > ....

Async function test() {
	await a()
	await b()
	await c()
	await d()
    ...
}
test()