동기와 비동기

 

동기란

hoisting이 이루어진 뒤 함수나 동작이 차례대로 되는것

• hoisting이란?  var 나 함수선언 등 특정 무언갈 선언하는걸 뜻함

비동기란

언제 코드가 실행될지 예측할 수 없는것

ex) setTimeout() 이란 web API

• 지정한 시간이 지나면 우리가 전달한 함수, callback 함수를 호출

callback 함수란?

전달한 함수를 나중에 처리된 뒤 혹은, 특정 시간 뒤 응답받는 개념

ex)

console.log(1)

setTimeout(function() {
	console.log(2)
	},1000);

console.log(3)


// 결과값
1
3
2

//동작원리
js는 동기로 동작하므로 위에서 차례대로 실행

1. 1 출력
2. webAPI 요청보냄 (setTimeout)
3. 응답을 기다리지 않고 다음줄인 3 출력
4. 브라우저에서 1초가 지난 뒤, callback함수 실행하란 응답이 오고, 2출력

---

그렇다면 callback은 비동기에서만 실행되나?

정답은 no. 동기 callback과 비동기 callback으로 나뉜다

 

- 동기callback

호출 순서에 맞춰서 동작함

ex)

console.log(1)

function print(p) {
	p()	
}

print(() => console.log('hello'));
console.log(3)

// 결과
1
hello
3

//동작원리
1. 1출력
2. 함수를 선언(print())
3. print()를 callback 함
4. hello 출력
5. 3출력

 

- 비동기  callback

요청 후, 응답을 기다리지 않고, 응답이 오는 순서에 따라 출력함

 

ex)

function printWithDelay(print, timeOut) {
	setTimeout(print, timeOut)
}

function print(p) {
	p()
}

printWithDelay(() => console.log('async'), 2000);
console.log(1);
console.log(3);
print(() => console.log(2));

//결과
1
3
2
async

// 동작원리
1. printWithDelay 와 print 함수 선언
2. printWithDelay 실행 및 webAPI(setTimeout) 요청
3. 1 출력
4. 3 출력
5. print 함수 실행 및 2 출력
6. callback 함수 응답받고 'async' 출력