JavaScript 콜백 지옥 # 1

hojoon·2023년 2월 26일
0

자바스크립트

목록 보기
1/14

자바스크립트는 동기적인 언어다 .

  • JavaScript is Synchronous
    즉, 호이스팅이 된 이후부터 코드가 작성된 순서부터 실행된다 .

호이스팅(hoisting)이란 ??
var ,function 선언이 제일 위로 올라가는 것.
console.log(1)
console.log(1)
console.log(1)
-> 1, 2, 3, 순서 ''

비동기란 무엇인가요??

자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다.

동기와 비동기

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

이렇게 코드를 작성해보자

동기적으로 작동한다면 console.log()에는 1이 찍히고 1초뒤에 2가 찍히고 3이 바로 찍힐것 같다.
그런데 실제 결과 값은 그렇지 않다 .
1, 3, 2 순서로 출력될 것이다.
즉, 1이 출력되고 3이 출력된 후에 1초뒤에 2가 출력이 된다.

콜백함수로 비동기방식 처리 문제 해결하기

const message = function() {
    console.log("This message is shown after 3 seconds");
}

setTimeout(message, 3000);

이 message 함수는 setTimeout 함수가 3초뒤에 실행되고 나서 실행이 될 것 이다.
이렇게 콜백 함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수 있다.

콜백 지옥

비동기 처리를 위해callback 함수를 연속해서 사용하다 보면 콜백지옥에 빠지게 될 것이다. 이러한 코드 구조는 가독성 측면에서도 좋지 않고, 코드 구조를 변경하거나 유지 보수하기에도 불편하다는 단점이 있다.

콜백 지옥 해결하기

function parseValueDone(id) {
	auth(id, authDone);
}
function authDone(result) {
	display(result, displayDone);
}
function displayDone(text) {
	console.log(text);
}
$.get('url', function(response) {
	parseValue(response, parseValueDone);
});

이와 같은 패턴으로 함수를 구분해서 작성하면 개선할 수 있다. 하지만 Promise나 async,await을 사용하면 더 편하게 구현할 수 있다.
다음편에서 알아보도록 하자.

profile
프론트? 백? 초보 개발자의 기록 공간

0개의 댓글