동기 vs 비동기 (1)

🚀 자바스크립트는 '동기적(synchronous)'이다.

Excute the code block in order after hoisiting.
자바스크립트는, 호이스팅(hoisting)된 이후부터 순차적으로 코드가 실행된다.
즉, 동기적으로 코드가 실행된다.

❗ hoising
var 변수선언 또는 function declaration(함수선언) 들이 자동으로 제일 위로 올라가는 것.
호이스팅이 된 이후부터, 코드가 나타나는 순서대로 코드가 실행된다.

🚀 비동기 처리(asynchronous)

자바스크립트의 비동기 처리란, 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미.

// 1
console.log("1");

// 2
setTimeout(() => console.log("2"), 1000);

// 3
console.log("3");

// 4
function printImmediately(print) {
  print()
}
printImmediately( () => console.log("hello");


// 출력결과: 
// 1
// 3
// hello
// 2


// 함수선언은 hoisting이 되기 때문에, 맨 위로 끌어올려진다. 아래와 같은 순서가 된다
function printImmediately(print) {
  print()
}

console.log("1");

setTimeout(() => console.log("2"), 1000);

console.log("3");

printImmediately( () => console.log("hello");

// 함수선언 ➡ 1출력 ➡ (2는 1초뒤에 출력하도록 비동기 처리) ➡ 3출력 ➡ hello출력 ➡ 2출력 

---

🎃 콜백함수

• 나중에 호출되는 함수를 뜻함. 즉 인자로 받는 함수이다.
• 콜백 함수는 코드를 통해 명시적으로 호출하는 함수가 아니라, 단지 함수를 동록하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다.
  ❗ 즉, 콜백함수는 유니크한 문법적 특징을 가지고 있는 것이 아니라, 호출방식에 의한 구분

<button id="button" onclick="button_click();">버튼1</button>

<script>
function button_click() {
    alert("버튼1을 누르셨습니다.");
}
</script>

<!--
Html에 onclick에 button_click함수는, 브라우저의 javascript API에서 DOM 이벤트 핸들러에 전달(등록)되고, 
해당 버튼에 클릭이벤트가 발생했을 이벤트 핸들러가 콜백함수를 호출한다.
-->

---

🎃 Callback을 활용한 비동기적 프로그래밍

• Callback 함수를 사용하는 이유는, 자바스크립트에서 비동기적 프로그래밍을 할수 있기 때문이다.
• 이 콜백함수기법은 자바스크립트에서 가장 오래된 비동기적 메커니즘이라고 한다.

  ❗ 비동기적 테크닉
  싱글스레드( 프로세스 내에서 실제로 한번에 단 하나의 작업만 수행하는 주체를 의미 )의 멈춤을 방지한다.
  즉, 블록킹(blocking, 중괄호({})로 감싸진 구간)을 방지하여 싱글스레드가 논블록킹으로 동작하게 한다.

---

🪐 비동기적 테크닉을 사용하는 경우

1. 사용자 이벤트 처리
브라우저에서 발생하는 사용자의 이벤트는 예측이 불가능하기 때문에, 이벤트를 관리/담당하는 eventListner에게 특정 이벤트가 발생할 때 호출을 원하는 내용을 callback 함수에 전달하게 된다.

2. 네트워크 응답 처리
웹브라우저에서 서버(server)에게 요청을 보냈을 때, 그 응답이 언제 올지 알 수 없다.
따라서 이런 서버에 대한 응답처리 등도 비동기적으로 처리해야 한다.

3. 파일을 읽고 쓰는 등의 파일 시스템 작업

4. 의도적으로 시간 지연을 사용하는 기능(알람 등)
위와 같이 이벤트 등을 기다리는데 하나뿐인 스레드를 사용한다면, 또 서버의 응답을 기다리기 위해 하나뿐인 스레드를 사용한다면, 사용자는 멈춰져 있는 화면을 보게되는 것이다.
위와 같이 스레드의 블록킹을 야기하는 작업은 필수적으로 비동기적 프로그래밍을 해야 한다.
ex) setTimeout(), setInterval() 등으로 의도적 지연이 가능하다.

---

🪐 Callback 함수의 비동기적 사용의 예

• 콜백 함수는 일반적으로 다른 함수에 넘기거나 객체의 프로퍼티(인자)로 사용
• 콜백 함수는 일반적으로 익명함수로 사용
• 콜백함수는 그냥 일반적인 함수이다.
  비동기적 프로그래밍을 하기 위해서는, 비동기적으로 콜백함수를 호출하는 함수에게 비동기적으로 호출되기를 원하는 코드를 콜백함수에 담아서 전달해야 한다.

---

🪐 비동기적으로 콜백함수를 실행하는 시스템 함수 예

✅ setTimeout 함수
setTimeout은 콜백함수의 실행을 지정된 밀리초만큼 지연하는 내장함수(Web API의 한 종류)
즉,코드를 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행

function newCallBack(){
  console.log("비동기적으로 호출");
}

console.log("-------  호출 직전 -------");

setTimeout(newCallBack, 3 * 1000);      // 3초 뒤 콜백 호출

console.log("-------  호출 이후 -------");

// -------  호출 직전 -------
// -------  호출 이후 -------
// 비동기적으로 호출되고 싶다.

---

🎃 Ajax (Asynchronous Javascript and XML)

• 비동기 처리의 대표적인 다른 예시로, 자바스크립트 서버 통신방법인 Ajax가 있다.
• 비동기적 자바스크립트와 XML의 약자로, 풀이 그대로 자바스크립트가 비동기적으로 데이터 통신을 하는 형태이다.