⭐️자바스크립트는 항상 동기식 처리를 합니다(synchronous)
이전 포스트에 언급한 것처럼 한 번에 코드 한 줄씩 차례대로 실행되는겁니다.
하지만 자바스크립트는 비동기처리(asynchronous)도 가능한 언어입니다.
setTimeout처럼 특정 코드를 지정한 초 뒤에 실행할 수 있습니다.
자바스크립트를 실행하는 머신인 웹브라우저는 이러한 특수 코드를 발견하면 대기실로 보내고
실행이 바로바로 가능한 코드부터 실행합니다.
이런 처리 방식을 비동기라고 합니다.
잠깐 대기실로 보내는 코드들은 이미 정해져있습니다. setTimeout, addEventListener, ajax 관련 함수들입니다.
이런 코드들은 읽는 시점과 동작 시점의 차이가 존재합니다.
그렇다면 코드를 순차적으로 실행하고 싶을 때 어떡할까요? 콜백함수를 적극 활용하면 됩니다.
function firstFunc(callback){
console.log(1);
callback();
}
function secondFunc(){
console.log(2)
}
firstFunc(secondFunc);
//위 방식이 아니면 함수선언문을 직접 넣는 아래 방법도 있습니다.
firstFunc(function(){
console.log(2)
});콜백함수를 여러개 사용하면 단점이 발생합니다. 바로 코드의 가독성이 나빠집니다.
이 가독성 문제를 해결하려면 ES6 신문법인 Promise를 사용하면 됩니다.
firstFunc().then(function(){
그 담에 실행할거
}).then(function(){
그 담에 실행할거
});자세한 내용은 다음 글에 작성하겠습니다.
기본적인 Promise의 형태입니다.
let promi = new Promise();
promi.then(function(){
}).catch(function(){
});Promise는 코드를 차례대로 실행할 수 있게 도와주는 디자인 패턴입니다.
1)promi안의 코드가 실행이 완료가 되면
2)then()함수 안의 코드를 실행하여 줍니다.
3)코드 실행 실패 시에는 catch() 코드를 실행시켜 줍니다.
Promise가 콜백함수보다 좋다고 하는 대표적인 이유는 다음과 같습니다.
1)콜백 함수와는 다르게 순차적으로 실행할 때 코드가 가시적이니까(then 함수를 붙여서 순차적 실행하니까)
2)콜백함수에서는 불가능한 '실패한 경우 특정 코드를 실행하여 주십시오'라는 코드를 짤 수 있으니까(catch)
간단히 생각해보자면 Promise는 성공과 실패를 판단하는 기계같습니다.
function runInDelay(seconds) {
return new Promise((resolve, reject) => {
if (!seconds || seconds < 0) {
reject(new Error('seconds가 0보다 작습니다'));
}
setTimeout(resolve, seconds * 1000);
});
}
runInDelay(2)
.then(() => console.log('타이머 울립니다!'))
.catch(console.error)
.finally(() => console.log('완료!'));기본적인 Promise의 형태입니다.
let promi = new Promise();
promi.then(function(){
}).catch(function(){
});Promise는 코드를 차례대로 실행할 수 있게 도와주는 디자인 패턴입니다.
1)promi안의 코드가 실행이 완료가 되면
2)then()함수 안의 코드를 실행하여 줍니다.
3)코드 실행 실패 시에는 catch() 코드를 실행시켜 줍니다.
Promise가 콜백함수보다 좋다고 하는 대표적인 이유는 다음과 같습니다.
1)콜백 함수와는 다르게 순차적으로 실행할 때 코드가 가시적이니까(then 함수를 붙여서 순차적 실행하니까)
2)콜백함수에서는 불가능한 '실패한 경우 특정 코드를 실행하여 주십시오'라는 코드를 짤 수 있으니까(catch)
간단히 생각해보자면 Promise는 성공과 실패를 판단하는 기계같습니다.
function runInDelay(seconds) {
return new Promise((resolve, reject) => {
if (!seconds || seconds < 0) {
reject(new Error('seconds가 0보다 작습니다'));
}
setTimeout(resolve, seconds * 1000);
});
}
runInDelay(2)
.then(() => console.log('타이머 울립니다!'))
.catch(console.error)
.finally(() => console.log('완료!'));