Array.prototype.map()
설명 보신 적 있으시죠?arr.map(**callback**(currentValue[, index[, array]])[, thisArg])
callback
또는 cb
, callbackFn
등등 으로 표기showMessage
, Array.map
등함수를 다른 변수와 동일하게 다루는 언어는 일급 함수를 가졌다고 표현합니다. 예를 들어, 일급 함수를 가진 언어에서는 함수를 다른 함수에 인수로 제공하거나, 함수가 함수를 반환할 수 있으며, 변수에도 할당할 수 있습니다.
- 일급함수의 특징
- 함수를 변수에 할당 가능
- 함수를 또 다른 함수 인자로 전달 가능
- 함수의 반환값으로 함수 전달 가능
- 함수형 프로그래밍 특징 중의 하나가 바로 일급함수 입니다.
- 자바스크립트 언어 또한 함수형 프로그래밍 기법을 구사할 수 있습니다.
// closeFn가 바로 콜백함수!
// closeFn가 비동기로 쓰인건 아닙니다. (sync callback - 동기 콜백)
function showMessage(msg, closeFn) {
// 로직로직~~
closeFn(true);
}
// map 함수의 인자인 el => el*2 함수가 콜백함수!
// 얘도 비동기 아닙니다. (sync callback)
[1,2,3].map(el => el*2);
// addEventListener의 두 번째 인자도 콜백함수!
// 얘가 바로~ 비동기로 동작! (async callback)
window.addEventListener('keydown', e => {
// 로직
});
// setTimeout 함수에 넘긴 익명함수가 콜백함수!
// Hello 또한 3초뒤에 나오죠. 비동기 동작! (async callback)
setTimeout(function(){
alert("Hello");
}, 3000);
$.get('https://api.test.com/proudcts', function(response) {
var firstProductId = response.products[0].id;
$.get('https://api.test.com/proudct/comments?id='+firstProductId, function(response) {
var firstCommentId = response.comments[0].id;
$.get('https://api.test.com/proudct/comment/likes?id='+firstCommentId, function(response) {
var likes = response.likes;
var likesCount = likes.length;
// 첫번째 상품의 -> 첫번째 후기의 좋아요 수 화면에 적용!
});
});
});
[{
"id": 1,
"name": "운동화",
"price": 30000
"comments": [{
"comment": "강추합니다",
"username": "Kim",
"likes": [{
"like": true,
"username": "lee"
}]
}]
}]
→ 위와 같이 한번만 api를 호출하고, 모든 정보가 왔었으면 좋았을텐데.. → 아래와 같이 상품목록 따로, 후기따로 api가 3개로 나뉘어져 있다.[{
"id": 1,
"name": "운동화",
"price": 30000
}]
[{
"comment": "강추합니다",
"username": "Kim"
}]
[{
"like": true,
"username": "lee"
}]
$.get('https://api.test.com/proudcts', function(response) {
var firstProductId = response.products[0].id;
$.get('https://api.test.com/proudct/comments?id='+firstProductId, function(response) {
var firstCommentId = response.comments[0].id;
$.get('https://api.test.com/proudct/comment/likes?id='+firstCommentId, function(response) {
var likes = response.likes;
var likesCount = likes.length;
// 첫번째 상품의 -> 첫번째 후기의 좋아요 수 화면에 적용!
});
});
});
function fetchCommentLikes(commentId) {
$.get('https://api.test.com/proudct/comment/likes?id='+commentId, function(response) {
var likes = response.likes;
var likesCount = likes.length;
});
}
function fetchComments(productId) {
$.get('https://api.test.com/proudct/comments?id='+productId, function(response) {
var firstCommentId = response.comments[0].id;
fetchCommentLikes(firstCommentId);
});
}
$.get('https://api.test.com/proudcts', function(response) {
var firstProductId = response.products[0].id;
fetchComments(firstProductId);
});