1. Callback
: 자바스크립트에서 함수는 객체이며, 객체를 함수의 파라미터로 전달가능하기에, 즉 함수를 파라미터로 전달하는것을
콜백함수라 하며, 함수내에서 파라미터로 전달된 함수가 먼저 실행하게끔하여 비동기에서의 취약점을 보완
: 과거에는 많이 사용되었으나, 콜백X1000 되어 사용되는 경우가 많으며 이를 콜백지옥이라고도 표현하는데, 코드 디버
깅, 가독성등의 문제가 발생
// 일반적인 함수
const getFriend = () => {
return{name: "John"}
};
// 친구정보 가져오기
const myFriend = getFriend();
console.log("My friend is ", myFriend.name); // My friend is John
// 매 2초마다 함수실행 - 서버에서 데이터 가져오는 상황설정
const getFriend = () => {
setTimeout(() => {
return {name: "John"}
}, 2000);
};
// 데이터는 2초마다 가져오는데, 가지고 오지도 않았는데 출력하니 에러가 난다
const myFriend = getFriend();
console.log("My friend is ", myFriend.name);
// 파라미터로 cb를 넣어줌...cb는 객체이며, 이는 결국 함수이다.
// 자바스크립트에서 함수는 객체.
// 즉 콜백은 함수를 파라미터로 넣어서 전달하는것이며, 이를 콜백 함수라 한다
const getFriend = (cb) => {
setTimeout(() => {
cb({ name: "John"});
}, 2000);
};
// 함수를 실행할때, 익명 함수에 인자로 friend를 전달 - 함수를 파라미터로 사용
// getFriend에 파라미터를 받아서 일처리를 먼저 한 후 출력한다.
getFriend((friend) => {
console.log(friend.name);
})
// 확실하게 보기 위해서 아직은 헷깔리는 Arrow Function을 제거후 확인하기
function getFriend(cb){
setTimeout(){
cb(name:"John"})
}, 2000);
}
getFriend(function(friend){
console.log(friend.name);
})
2. Promise
: 콜백함수의 문제를 해결하고, 콜백 함수를 연결하기 위해 제시된 promise
: 상태는 pending, fulfilled, rejected로 구분되며, then 메서드를 통해 연결한다
// Promise 예제
let myFirstPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Success!");
}, 250);
});
myFirstPromise.then((successMessage) => {
console.log("Yay! " + successMessage);
});
// Yay! Success!
// Promise 체이닝
new Promise(function(resolve, reject) {
setTimeout(() => resolve("one"), 1000);
}).then(result => {
console.log(result); // one
return "two";
}).then(result => { //
console.log(result); // two
return "three";
}).then(function(result) {
console.log(result); // three
}).catch(error => console.log(error.message));
// 간단한 예 추가
let promise = new Promise((resolve, reject) => {
const button = document.querySelector('button');
button.addEventListener('click', () => {
resolve(button.textContent);
});
});
promise
.then( (result) => {
console.log(result);
}).then(() => {
document.getElementById("res").innerHTML = "promise";
})
.catch(error => console.log(error.message));
3. Rxjs Observable
: 하나 이상의 아이테을 처리할때, push 방법으로, subscribe를 통해 실현
: observer객체는 next(), error(), complete() 함수를 가지고 있다.
const button = document.querySelector('button');
const observable = Rx.Observable.fromEvent(button, 'click');
observable.subscribe(event => {
document.getElementById("res").innerHTML = "Observable";
console.log(event.target);
});
4. async & await
: 함수앞에 async, 비동기 처리되는 메서드 앞에 await
: Promise, Callback 보다 더 뛰어난 가독성
// 기본문법
async function test() {
const res = await fetchUser('...');
console.log(res);
}