[CS] 비동기 Day-36

비동기 쉽게 이해하기

하나의 작업이 끝날 때 까지, 이어지는 작업을 "막는 것"입니다. (blocking)

Node.js는 non-blocking하고 비동기적(asynchronous)로 작동하는 런타임으로 개발됐습니다.
JavaScript의 비동기적 실행(Asynchronous execution)이라는 개념은 웹 개발에서 유용합니다.

비동기 흐름

• callback
• promise
• async/await

위 문법을 이용하여 구현할 수 있습니다.

고차함수와 Callback

고차 함수(Higher order function)

• 다른 함수를 인자(argument)로 전달받을 수 있습니다.
  고차함수의 인자로 전달되는 함수를 콜백 함수(callback function)이라고 합니다. 콜백 함수는 어떤 작업 중 호출하는 경우가 많아 업무 중 걸려온 전화에 답신하는 전화를 나타내는 콜백이라는 이름이 붙여졌습니다.

• 고차함수는 다른 함수를 리턴할 수 있습니다
  함수를 리턴하는 함수를 커리 함수라고 합니다.

• 함수를 리턴하는 함수, 함수를 인자로 받는 함수 모두 고차함수입니다.

• 고차함수는 콜백 함수와 커리 함수의 상위 개념입니다.

ForEach, map, filter, reduce 이해

forEach

forEach() 메소드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

map

map() 메소드는 배열 내의 모든 요소 각각에 대하여 함수를 호출한 결과를 모아 새로운 배열로 반환합니다.

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

filter

filter() 메소드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

reduce

reduce() 메소드는 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값을 반환합니다.

const array1 = [1, 2, 3, 4];
const reducer = (previousValue, currentValue) => previousValue + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

비동기 호출 (Asynchronous call)

callback review

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

parameter를 넘겨받는 함수(A)는 callback 함수(B)를 필요에 따라 즉시 실행(synchronously)할 수 있고, 아니면 asynchronously 실행할 수 있다.

function B() {
	console.log('called at the back');
}

function A(callback){
	callback();
};

A(B);
// called at the back 출력

blocking

• 하던 일을 멈추고 하나의 일만 진행한다.
• 요청에 대한 결과가 동시에 일어난다. (synchronous)

non-blocking

• 확인 후, 나중에 진행할 수 있다.
• 요청에 대한 결과가 동시에 일어나지 않는다. (asynchronous)

비동기 함수 전달 패턴 1: callback 패턴

let request = 'caffelatte';
orderCoffeeAsync(request, function(response){
	drink(response);
});

비동기 함수 전달 패턴 2: 이벤트 등록 패턴

let request = 'caffelatte';
orderCoffeeAsync(request).onready = function(response){
	drink(response);
};