< Javascript > 자바스크립트의 비동기

초초·2023년 1월 18일
0

💻📚 TIL

목록 보기
20/22

🎈 자바스크립트에서의 동기와 비동기

앞서 고차함수에서 간단히 동기와 비동기에 대해 설명했다 이번시간에는 좀 더 자세히 자바스크립트에서 이러한 특성이 어떻게 나타나고, 이용하는지 알아보자

동기

  • 특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음 코드를 수행
  • 긴 코드가 있을시 다음 코드 실행까지의 대기 시간이 오래걸림
  • 자바스크립트는 싱글 스레드 기반으로 동작하는 언어로, 한줄씩 읽고 실행을 시작하는 동기적 작동을 함

비동기

  • 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 수행
  • 무겁거나 긴 코드가 있을때 효율적으로 처리됨
  • 자바스크립트에서는 실행은 순차적으로 되지만 실행이 완료되기 전에 다음 코드를 실행한다

자바스크립트의 비동기 맛보기

setTimeout(callback, millisecond)

일정 시간 후에 함수를 실행

  • 매개변수 = 실행되는 콜백함수, 콜백함수가 실행되기 전 기다리는 시간
setTimeout(function () {
  console.log('1초 후 실행');
}, 1000);
// 1초 뒤에 콘솔 출력

clearTimeout(timerId)

setTimeout 타이머를 종료

  • 매개변수 = setTimeout을 할당한 변수
  • return 값은 없음
const timer = setTimeout(function () {
  console.log('10초 후 실행');
}, 10000);
clearTimeout(timer);
// setTimeout이 종료됨.

setInterval(callback, millisecond)

일정 시간의 간격을 가지고 함수를 반복적으로 실행

  • 매개변수 = 실행되는 콜백함수, 반복적으로 실행되는 행위 사이의 시간 간격
setInterval(function () {
  console.log('1초마다 실행');
}, 1000);

// 1초마다 실행
// 1초마다 실행
// 1초마다 실행
// ...

clearInterval(timerId)

setInterval 타이머를 종료

  • 매개변수 = setInterval을 할당한 변수
  • return 값은 없음
const timer = setInterval(function () {
  console.log('1초마다 실행');
}, 1000);

clearInterval(timer);
// setInterval이 종료

콜백함수

콜백함수를 통해 비동기 코드의 순서를 제어할 수 있다

const printAll = () => {
  printString('A', () => {
    printString('B', () => {
      printString('C', () => {});
    });
  });
};

printAll(); // A B C

콜백 지옥 Callback Hell

const printAll = () => {
  printString('A', () => {
    printString('B', () => {
      printString('C', () => {
        printString('D', () => {
          printString('E', () => {
            printString('F', () => {
              printString('G', () => {
                printString('H', () => {
                  ...
              });
            });
          });
        });
      });
    });
  });
};
printAll();

콜백함수는 코드가 길어질수록 복잡해지고 가독성이 낮아지는 단점이 있다

profile
잔디 꽉꽉 심쟈 🍀

0개의 댓글