동기 실행

JavaScript에서 동기 실행은 코드가 작성된 순서대로 차례대로 실행되는 방식을 말합니다. 한 작업이 끝나야 다음 작업이 시작되므로 코드의 흐름을 쉽게 이해하고 예측할 수 있습니다. 그러나, JavaScript가 단일 스레드를 사용하기 때문에 하나의 작업이 긴 시간을 소요하면 전체 프로그램의 반응성이 떨어질 수 있습니다.

비동기 처리

비동기 처리를 사용하면 작업의 완료를 기다리지 않고 다음 코드를 실행할 수 있습니다. 이는 JavaScript의 응답성을 향상시키고, 사용자 경험을 개선합니다. JavaScript에서 비동기 처리를 위해 콜백 함수, 프로미스(Promise), async/await 등을 사용할 수 있습니다.

코드 예제

// 동기적 실행 예제
function displayValue() {
  let value = 10;
  console.log("Value:", value);
}

displayValue();

// 비동기적 실행 예제
setTimeout(() => {
  console.log("Displayed after 2 seconds");
}, 2000);

console.log("Displayed immediately");

이 예제에서는 displayValue 함수가 동기적으로 실행되어 값을 즉시 출력하고, **setTimeout**은 비동기적으로 설정된 시간(2초) 후에 메시지를 출력합니다. **console.log("Displayed immediately")**는 setTimeout이 완료될 때까지 기다리지 않고 즉시 실행됩니다.

Callback 함수

콜백 함수는 다른 함수에 인자로 전달되어 특정 조건이 충족되거나 이벤트가 발생했을 때 실행되는 함수입니다. 이를 통해 비동기적인 작업을 처리할 수 있으며, 파일 읽기 작업이 완료될 때 결과를 처리하는 등의 용도로 사용됩니다.

간단한 콜백 함수 예제

jsxCopy code
function calculateSum(num1, num2, callback) {
  let sum = num1 + num2;
  callback(sum);
}

calculateSum(5, 3, result => {
  console.log("Sum:", result);
});

이 코드는 calculateSum 함수에서 두 숫자의 합을 계산한 다음, 결과를 콜백 함수를 통해 출력합니다. 이는 콜백 함수를 사용하여 비동기 처리를 간단히 구현할 수 있는 예시입니다.

setTimeout / setInterval

setTimeout

setTimeout 함수는 지정된 시간 후에 코드를 한 번 실행합니다.

setTimeout(() => {
  console.log("This message is shown after 3 seconds");
}, 3000);

setInterval

setInterval 함수는 지정된 간격마다 코드를 반복해서 실행합니다.

setInterval(() => {
  console.log("This message is shown every second");
}, 1000);

Promise, async / await