[JavaScript] 짐코딩 - (2) 콜백 함수란?

[JavaScript] 짐코딩 - (2) 콜백 함수란?

 

1. 콜백 함수란?

-콜백 함수(Callback Function)은 다른 함수의 인자로 넘겨지고, 해당 함수가 처리된 뒤 호출되는 함수를 말한다.

// 콜백 함수란?
// 다른 함수의 인자로 넘겨지고, 해당 함수가 처리된 뒤 호출되는 함수!

function taskSyncFunction(callback){
    console.log('첫 번째 작업');
    console.log('두 번째 작업');
}

taskSyncFunction(()=>{
    console.log('콜백 함수 실행');
});

// 이 경우, '콜백 함수 실행'이 가장 마지막에 실행된다.

 

• 콜백 함수는 내부적으로 동기적/비동기적 프로그래밍의 여부에 따라 동기적으로도, 비동기적으로도 실행이 된다.

function taskAsyncFunction(callback){
	console.log('start');
    setTimeout(()=>{
    	console.log('처음');
        console.log('두번째');
        callback();
    }, 2000)
    console.log('end')
}

taskAyncFunction(()=>{
	console.log('콜백 함수 실행');
});

console.log('실행 완료');

 

 

2. 콜백 지옥

-콜백 지옥: 여러 콜백 함수들이 중첩되는 현상

-콜백 함수가 중첩되면서, 코드의 가독성이 안 좋아지고 / 코드의 유지보수가 어려워지는 것!

function getUser(userid, callback){
	setTimeout(()=>{
    	const user = {id: userId, name: 'kim'};
        callback(user);
    }, 1000)
}

function getPosts(userId, callback){
	setTimeout(()=>{
    	const posts = [
        	{id: 1, title: 'Post 1'},
            {id: 2, title: 'Post 2'}
        ]
    }, 200)
}

function getComments(postId, callback){
	setTimeout(()=>{
    	const comments = [
        	{id: 1, text: 'Comments 1'},
            {id: 2, text: 'Comments 2'},
            {id: 3, text: 'Comments 3'}
        ]
        callback(comments);
    }, 1000)
}

getUser(1,()=>{
	console.log('user: ',user);
    getPost(user.id, ()=>{
    	console.log('posts: ',posts)
        getComments(posts[0].id, (comments) =>{
        	console.log('comments: ',comments)
        }
    })
})

 

 

 

https://inf.run/B3fkQ

학습 페이지