인프런 커뮤니티 질문&답변

초록천사님의 프로필 이미지

작성한 질문수

웹 프론트엔드를 위한 자바스크립트 첫걸음

[학습자료] 강의 대본 웹 페이지

비동기 처리 질문있습니다.

해결된 질문

작성

·

222

1

🚨질문 작성법 및 안내사항

질문 작성법
- 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문)
- 질문은 최대한 구체적으로 작성해주세요.
- 비슷한 질문이 올라와있는지 확인해주세요.
- 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요.

console.log("hello world");


안내사항
- 질문에 대한 답변은 보통 주말, 공휴일을 제외한 평일 오전 시간에 답변해드립니다.

 

 

강의에서 종료 라는 문장을 정말 이 코드가 종료됐을 때 출력하고싶다면, 우리는 콜백함수를 이용해 해당 코드를 인수로 넘겨주어야합니다. 이 부분이 이해가 되지 않습니다. 콜백함수로 왜 넘겨줘야하는지 헷갈립니다.

 

<이렇게는 안되나요>

const work = () => {
2  setTimeout(() => {
3    console.log("3초만 기다리세요");
4    console.log("종료");
5  }, 3000);
6};
7

 

 

const work = (callback) => {
2  setTimeout(() => {
3    console.log("3초만 기다리세요");
4    callback();
5  }, 3000);
6};
7
8 work(() => {
9  console.log("종료");
10});

 

setTimeout(() => {
2    console.log("3초만 기다리세요");
3}, 3000);
4
5console.log("종료");

답변 1

0

효빈 Hyobin님의 프로필 이미지
효빈 Hyobin
지식공유자

안녕하세요 :) 우선 좋은 질문 작성해주셔서 감사드립니다.

답변부터 드리자만 초록천사님이 제안해주신 방법으로 작성해도 코드가 알맞게 작동합니다.

const work = () => {
  setTimeout(() => {
    console.log("3초만 기다리세요");
    console.log("종료");
  }, 3000);
};

 

강의 [함수] 챕터에서 배웠던 것처럼 자바스크립트에서 함수는 동일한 동작을 하는 코드들을 하나로 묶어서 하나의 명령으로 실행할 수 있게 도와주는 기능입니다. 비록 예시에서는 "종료"라는 단어를 출력하는 한줄의 코드를 콜백함수로 넘겨주었으나, 어떠한 기능을 하는 긴 코드가 작성되어있는 함수를 비동기 함수가 종료된 이후에 실행되게 하고 싶다면 함수를 콜백함수로 전달해주어야합니다.

이렇게 콜백함수를 사용하게 되면 비동기 처리 방식의 문제점 중 하나인 "실행 순서를 보장하지 못한다"를 해결할 수 있습니다.