동기와 비동기
자바스크립트는 동기적(synchronous)이다.
→ 호이스팅이 된 이후부터 작성한 코드 순서대로 실행
💡 호이스팅(hoisting): var, function 선언이 자동적으로 제일 맨 위로 이동
동기(synchronous): 정해진 순서에 맞게 코드가 실행
console.log('1');
console.log('2');
console.log('3');
/*
1
2
3
*/Synchronous callback
console.log('1');
setTimeout(() => console.log('2'),1000); // 1초가 지난다음 실행
console.log('3');
//Synchronous callback
function printImmediately(print){
print();
}
printImmediately(()=>console.log('hello'));
/*
1
3
hello
2
*/비동기(asynchronous): 언제 코드가 실행될지 예측할 수 없음
ex) setTimeout(콜백함수와 시간지정인자)
콜백함수: 전달한 함수를 나중에 부름
console.log('1');
setTimeout(() => console.log('2'),1000); // 1초가 지난다음 실행
console.log('3');
/*
1
3
2
*/Asynchronous callback
console.log('1'); //동기
setTimeout(() => console.log('2'),1000); // 1초가 지난다음 실행 // 비동기
console.log('3'); //동기
//Synchronous callback
function printImmediately(print){
print();
}
printImmediately(()=>console.log('hello')); //동기
//Asynchronous callback
function printWithDelay(print, timeout){
setTimeout(print, timeout);
}
printWithDelay(()=>console.log('async callback'), 2000); //비동기
/*
1
3
hello
2
async callback
*/콜백지옥
: 콜백함수들을 계속 묶거나, 콜백함수에서 다른 콜백함수를 계속 부르는 것
[콜백 지옥의 문제점]
- 가독성이 떨어짐 → 어떻게 연결되어있는지 한 눈에 보기 어려움
- 디버깅하고 문제 분석하는데 어려움 → 어디서 에러가 발생하는지 알기 어려움
- 유지 보수 어려움
