한번만 더 질문드리고 싶습니다(그림 첨부)

Question

아래의 소스코드를

그림으로 그려봤는데 맞게 그렸는지 봐주시면 감사하겠습니다

var relationship1 = {
    name:'zero',
    friends : ['nero', 'hero', 'xero'],
    logFriends: function(){
        var that = this;
         console.log(`this: ${this}, that: ${that}`);
        this.friends.forEach(function(friend){
            console.log(that.name,friend);
            console.log(`this: ${this}, that: ${that}`);
        });
    }
}

relationship1.logFriends();

경과1.

경과2.

경과3.

경과4.

여기서부터 햇갈리기 시작했습니다

foreach( function(friend){ });

이렇게 foreach( ) 안에 함수 선언된 콜백함수 function(friend)는 태스크 큐에 대기하고 있다면

호출 스택의 relationship1.logfriends( ) 와
anonymous 까지 지워져야

이 콜백함수가 태스크큐에서 호출스택으로 들어가게 됩니다

그런데 아직 호출스택이 비워지지도 않았는데

콜백함수가 실행되고 있습니다

그렇다면 이 콜백함수 function(friend){

            console.log(that.name,friend);
            console.log(`this: ${this}, that: ${that}`);

}는

태스크큐에 안가고, 백그라운드에서 호출스택에 있는 함수들과 동시에 실행되고 있는 건지 질문드리고 싶습니다

Answer

콜백함수라고 무조건 태스크큐로 넘어가는 게 아니고요. '비동기' 콜백함수만 넘어갑니다. forEach의 콜백 함수는 동기 콜백함수라서 호출스택에서 바로 forEach 위에 올라갑니다. 배열의 요소가 3개 있으니 forEach위에 첫번째 콜백이 올라가 실행되고, 끝나면 나오고, forEach 위에 두번째 콜백이 올라가 실행되고, 끝나면 나오고, forEach위에 세번째 콜백이 올라가 실행되고 끝나면 나오겠죠. 이 사실을 토대로 4번부터 다시 분석해보세요.

Like me black

한번만 더 질문드리고 싶습니다(그림 첨부)

경과4.

여기서부터 햇갈리기 시작했습니다

foreach( function(friend){ });

이 글과 비슷한 Q&A

서버 실행 실패

sql 단축키

프론트엔드와 백엔드의 과정

Date 강의 / leetcode 1321 질문