[CS] 비동기(고차함수, Underbar) Day-27

• Blocking: 하나의 작업이 끝날 때까지, 이어지는 작업을 막는 것 입니다.

이런 불편한 작업 방식을 대체하기 위해 Node.js는 non-blocking하고 비동기적(asynchronous)로 작동하는 런타임으로 개발하게 됩니다.

JavaScript는 비동기적 실행이라는 개념은 웹 개발에서 특히 유용합니다.

• 백그라운드 실행, 로딩 창 작업
• 서버 요청, 응답 대기
• 큰 용량의 파일을 로딩하는 작업

JavaScript의 큰 장점 중 하나인 비동기 흐름

비동기 흐름은 callback, promise, async/await 중 하나의 문법을 이용하여 구현할 수 있습니다.

고차함수(Higher Order Function)

• 고차함수는 다른 함수를 인자(argument)로 전달받을 수 있습니다.
• 고차함수는 다른 함수를 리턴할 수 있습니다.
• '함수를 리턴하는 함수'와 '함수를 인자로 받는 함수' 모두 고차함수입니다.
• 고차함수는 콜백함수와 커리함수의 상위 개념입니다.

Underbar

배열과 객체를 다루는 Underbar를 구현하며 자바스크립트 내장 메소드가 어떻게 callback 함수를 활용하는지 학습합니다.

내용을 학습하기 위해서는 아래 메소드 이해가 필요합니다.

• forEach
• map
• filter
• reduce

비동기 호출 (Asynchronous call)

• callback: 다른 함수(A)의 전달인자(argument)로 넘겨주는 함수(B)

callback 주의 사항

callback은 함수 자체를 연결해야하는 것이지, 함수 실행을 연결하면 안됩니다.

ex) 잘못된 예

function handleClick() {
	console.log('button clicked');
};
document.querySelector('#btn').onClick = handleClick();
// 함수 실행을 연결하면 안됩니다. 따라서 () 쓰면 안됩니다.

blocking 과 non-blocking

• blocking: 하던 일을 모두 멈춰야 한다. 요청에 대한 결과가 동시에 일어나는 (synchronous) 동기적이다.

• non-blocking: 확인 후 나중에 답장할 수 있다. 요청에 대한 결과가 동시에 일어나지 않는다. (asynchronous) 비동기적
  특정 요청에 따른 결과(=== 이벤트)가 나왔을 때 알려준다(callback).

ex) 비동기 함수 패턴

let request = 'trade';
orderFundAsync(request, function(response){
	//response 는 주문 결과
    buy(response);
});

비동기의 주요 사례

DOM Element의 이벤트 핸들러

• 마우스, 키보드 입력(click, keydown 등)
• 페이지 로딩
  타이머
• 애니메이션 API (requestAnimationFrame)
  서버에 자원 요청 및 응답
• fetch API
• AJAX(XHR)

Async JavaScript

비동기를 사용하는 이유?
클라이언트에서 서버에 요청을 보낼 때 클라이언트는 다른 요청을 계속 할 수 있다. 서버에서 작업을 끝내면 클라이언트로 전달해준다.

callback?
다른 함수가 실행을 끝낸 뒤 실행되는 함수를 callback이라고 얘기합니다.

promise
Callback Hell을 피할 수 있는 기술
잘못사용하면 promise Hell을 생성한다..

• resolve: 다음 Action으로 넘어가거나
• reject: err를 handling 할 수 있습니다.

.than() 을 통해서 계속 이어나갈 수 있습니다.

async await (새롭게 추가된 문법)
promise 함수와 비슷하지만 await을 추가하여 동기적 느낌으로 만들 수 있다.

await을 사용하려면 반드시 async를 추가해줘야 한다.
ex)

/*
함수...
*/

const result = async() => {
	const one = await gotoLibrary();
    console.log(one);
    
    const two = await sitAndStudy();
    console.log(two);
    
    const three = await eatDinner();
    console.log(three);
}

result();

타이머 API

• setTimeout(callback, millisecond): 일정 시간 후에 함수를 실행

setTimeout(function() {
	console.log('1초 후 실행');
}, 1000);

• setInterval(callback, millisecond): 일정 시간의 간격을 가지고 함수를 반복적으로 실행

setInterval(function() {
	console.log('1초 마다 실행');
}, 1000);