call stack
- 여러 함수를 호출하는 스크립트에서 해당 위치를 추적
FILOFirst in Last out
const multiply = (x, y) => x*y;
const square = x => multiply(x, x);
const isRightTriangle = (a, b, c) =>(
square(a) + square(b) === square(c)
)
- 처리과정
- isRightTriangle() 호출
- sqare() 호출
- multiply() 호출
- multiply() 수행 후 삭제
- square() 수행 후 삭제
- isRightTriangle() 수행 후 삭제
JavaScript는 Single Thread라서 한 번에 하나밖에 처리하지 못함
callback functions
Web API 함수- JS의 call stack이 Web API 함수를 인식해, 브라우저에 역할 위임
- 브라우저가 기능 수행 후 JS에 스택을 넘겨줌 (callback)
callback
- 함수 종속 : 상위 함수가 작동 완료 되어야만 하위 함수가 수행됨
const delayedColorChange = (newColor, delay, doNext)=>{
setTimeout(()=>{
document.body.backgroundColor = newColor;
doNext && doNext();
},delay)
}
delayedColorChange('red', 1000, ()=>{
delayedColorChange('orange', 1000, ()=>{
delayedColorChange('yello', 1000, ()=>{
})
})
})
=> 하나의 요청에 대해 다양한 경우의 수( 성공, 실패, 요청오류…)에 대한 콜백함수가 중첩되어 복잡성 증가!
Promise
비동기 연산의 최종적 성공 or 실패 여부를 알려주는 객체
pending대기resolved성공rejected실패
const request = (url) => {
return new Promise((resolve, reject) => {
const rand = Math.random();
setTimeout(() =>{
if(rand<0.7){
resolve('YOUR DATA HERE');
}
reject('request error');
}, 1000)
})
}
request('/randomNum/1')
.then((data) => {
console.log('data is : ', data)
})
.catch((err) => {
console.log('error :', err )
})
중첩 구문 문법
loadPosts('/page1' )
.then(() =>{
//성공 콜백 구문
loadPosts('/page2')
.then(() => { //여전히 중첩되긴 함
})
.catch(() => {
})
})
.catch(() =>{
//실패 콜백 구문
})
//upgrade 형태
loadPosts('/page1')
.then(() => {
return loadPosts('page2')
})
.then(() => {
return loadPosts('page3')
})
.catch(() => {
}) //전체 구문에 catch 한번만 사용 가능함
Async Functions
- 기존 함수를 비동기로 바꾸는 것, 항상 promise 객체로 반환
- 값을 반환하면 resolved 상태, 예외가 발생하면 rejected 상태
async,await- promise가 성공할 때까지 비동기 함수 실행 일시 정지
async function rainbow() {
await delayedColorChange('red',1000)
await delayedColorChange('orange',1000)
await delayedColorChange('yello',1000)
await delayedColorChange('green',1000)
await delayedColorChange('blue',1000)
await delayedColorChange('indigo',1000)
await delayedColorChange('violet',1000)
}
오류처리
비동기 함수 내 try~catch 사용