15주차: 비동기 기반

이번 주 초점은 Colt Steele The Advanced Web Developer Bootcamp의 Async Foundations였습니다.

 -Callback Functions  
 -findIndex 
 -The Stack and The Heap 
 -The Stack: An Example 
 -setTimeout and setInterval
 -The Event Loop and The Queue
 -Promise Basics 

콜백 함수

콜백 함수 정의

콜백 함수는 다른 함수에 매개변수로 전달된 다음 다른 함수에 의해 호출됩니다.

function callback() {
  console.log("Coming from callback"); 
}

function higherOrder(fn) {
 console.log("About to call callback"); 
 fn(); 
 console.log("Callback has been invoked"); 
}
higherOrder(callback) 

고차 함수 정의

고차 함수는 콜백을 매개변수로 받는 함수입니다.

콜백은 무엇을 위해 사용됩니까?

고급 배열 방법
브라우저 이벤트(클릭, 제출 등...)
AJAX 요청
리액트 개발

콜백이 없는 코드

function sendMessageConsole(message) {
 console.log(message); 
}

function sendMessageAlert(message) {
 alert(message); 
}

function sendMessageConfirm(message) {
 return confirm(message); 
}

sendMessageAlert("Lots of duplication"); 

콜백이 있는 동일한 코드

function sendMessage(message, callback) {
 return callback(message); 
}

sendMessage("Message for console", console.log); 

sendMessage("Message for alert", alert); 

var answer = sendMessage("Are you sure??", confirm); 

콜백 함수의 또 다른 예

function greet(name, formatter) {
 return "Hello, + formatter(name); 
} 

function upperCaseName(name) {
 return name.toUpperCase(); 
} 

greet("Tim", upperCaseName); 

익명 함수를 사용한 콜백

function greet(name, formatter) {
 return "Hello, " + formatter(name); 
}

greet("Tim", function(name) {
 return name.toUpperCase(); 
}); 

greet("Tim", function(name) {
 return name + "!!!!!"; 
}); 

콜백 함수를 사용하여 코드를 보다 일반화하십시오.

익명 함수를 사용하여 콜백 생성

인덱스 찾기

findIndex 함수 설명 및 사용

findIndex는 콜백이 true 값을 반환하는 배열의 첫 번째 요소 인덱스를 반환합니다. 콜백이 진실한 값을 반환하지 않으면 -1이 반환됩니다.

function findIndex(array, callback) {
//findIndex code to be implemented 
}

function callback(curElement, curIndex, array) {
}

findIndex 예: 숫자 찾기

var arr = [3,4,6,2,1]; 
findIndex(arr, function(num, index, array) {
return num === 6; 
}); 

findIndex 예: 처음 짝수 찾기

var arr = [5,11,13,8,6,7]; 
findIndex(arr, function(num, index, array) {
 return num % 2 === 0; 
}); 

스택과 힙

스택이 무엇인지 설명

스택 프레임 설명

힙 설명

스택이란 무엇입니까?

스택은 함수 호출을 추적하는 정렬된 데이터 구조입니다.

코드가 스택을 변경하는 방법

함수를 호출할 때마다 호출 세부 정보가 스택 맨 위에 저장됩니다(맨 위로 푸시됨).
함수가 반환될 때마다 호출에 대한 정보가 스택의 맨 위에서 제거됩니다(맨 위에서 팝됨).

스택 정의

가장 최근에 호출된 함수의 정렬된 스택 프레임 세트가 스택의 맨 위에 있습니다. 스택의 맨 아래는 호출된 첫 번째 함수입니다. 스택은 위에서 아래로 처리됩니다.

힙 정의

데이터가 저장되는 메모리 영역입니다.

setTimeout 및 setInterval

setTimeout

setTimeout은 밀리초 단위로 지연된 후 콜백을 비동기식으로 호출하는 함수입니다.

function callback() {
 console.log("callback function"); 
}
var delay = 1000; //delay is in milliseconds
setTimeout(callback, delay); 

setTimeout(function() {
 console.log("Runs in approx. 200ms"); 
}, 2000); 

setInterval

setInterval은 매 X밀리초마다 계속 콜백을 호출하는 함수입니다. 여기서 X는 setInterval에 제공됩니다.

function callback() {
 console.log("callback is called continuously"); 
}
 var repeat = 3000; 
 setTimeout(callback, repeat); 

이벤트 루프와 대기열

이벤트 루프 및 대기열 정의

JavaScript를 단일 스레드 언어로 정의

대기열

큐는 스택에 배치되기를 기다리는 순서가 지정된 함수 목록입니다. 대기열의 함수는 선입 선출 방식(FIFO)으로 처리됩니다.

이벤트 루프

스택이 비어 있을 때 대기열을 확인하는 JavaScript 런타임의 기능입니다. 스택이 비어 있으면 대기열의 앞부분이 스택에 배치됩니다.

Javascript는 단일 스레드입니다.

단일 스레드: 코드 실행은 선형입니다. 실행 중인 코드는 프로그램에서 진행 중인 다른 작업으로 인해 중단될 수 없습니다.

단일 스레드 예제

setTimeout(function() {
 console.log("Hello from the timeout"); 
}, 0); 

for (var 1 = 0; i < 1000000000; i++) {
 var x = i * 2; 
}
console.log("Done with loop");

약속 기본 사항

약속을 정의하다

약속은 미래에 완료될 작업을 나타내는 개체입니다.

약속 만들기

var p1 = new Promise(function(resolve, reject) {
 resolve([1,2,3,4]); 
}); 

p1.then(function(arr) {
 console.log("Promise p1 resolved with data:" , arr); 
}); 

약속: 오류 처리

javascript 

var p1 = new Promise(function(resolve, reject) {
reject("ERROR"); 
}); 

p1.then(function(data) {
 console.log("Promise p1 resolved with data:", data);
}).catch(function(data) {
  console.log("Promise p1 was rejected with data:", data);
});