콜백함수
- 함수안에 인자로 들어가는 함수
- ex) setTimeout, 배열에 대한 forEach
- 콜백함수를 넘겨 받은 아래와 같은 코드등은 이 콜백 함수를 필요에따라 적잘한 시점에 실행하게됨
- call(부르다) back(되돌아오다) : 제어권을 넘겨줄테니 너가 알고있는 그 로직으로 처리해줘!
// setTimeout
setTimeout(function() {
console.log("Hello, world!");
}, 1000);
// forEach
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
console.log(number);
});
//1
//2
//3
//4
//5
//Hello world!제어권
- 콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수 호출 시점에 대한 제어권을 가져요!
- 콜백 함수의 제어권을 넘겨받은 코드(setInterval)가 언제 콜백함수를 호출할지에 대한 제어권을 가지게됨
var count = 0;
// timer : 콜백 내부에서 사용할 수 있는 '어떤 게 돌고있는지'
// 알려주는 id값
var timer = setInterval(function() {
console.log(count);
if(++count > 4) clearInterval(timer);
}, 300);var count = 0;
var cbFunc = function () {
console.log(count);
if (++count > 4) clearInterval(timer);
};
var timer = setInterval(cbFunc, 300);
// 실행 결과
// 0 (0.3sec)
// 1 (0.6sec)
// 2 (0.9sec)
// 3 (1.2sec)
// 4 (1.5sec)- 원래 cbFunc()를 수행한다면 그 **호출주체**와 **제어권**은 모두 사용자가 되죠.
- setInterval로 넘겨주게 되면 **그 호출주체**와 **제어권**은 모두 setInterval이 돼요.
code 호출 주체 제어권
| code | 호출 주체 | 제어권 |
| cbFunc(); | 사용자 | 사용자 |
| setInterval(cbFunc, 300); | setInterval | setInterval |
인자
- map함수는 각 배열요소를 변환하여 새로운 배열을 반환한다. 기존배열을 변경하지 않음.
// map 함수에 의해 새로운 배열을 생성해서 newArr에 담고 있네요!
var newArr = [10, 20, 30].map(function (currentValue, index) {
console.log(currentValue, index);
return currentValue + 5;
});
console.log(newArr);
// -- 실행 결과 --
// 10 0
// 20 1
// 30 2
// [ 15, 25, 35 ]map 메서드를 호출해서 원하는 배열을 얻고자 한다면 정의된 규칙대로 작성해야한다. 인자의 순서까지도 제어권이 넘겨받은 코드에 있다.
// map 함수에 의해 새로운 배열을 생성해서 newArr에 담고 있네요!
var newArr2 = [10, 20, 30].map(function (index, currentValue) {
console.log(index, currentValue);
return currentValue + 5;
});
console.log(newArr2);
// -- 실행 결과 --
// 10 0
// 20 1
// 30 2
// [ 5, 6, 7 ]this
- 콜백 함수도 함수이기 때문에 기본적으로 this가 전역객체를 참조한다.
- 예외: 제어권을 넘겨받을 코드에서 콜백 함수에 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참조한다.
// Array.prototype.map을 직접 구현해봤어요!
Array.prototype.mapaaa = function (callback, thisArg) {
var mappedArr = [];
for (var i = 0; i < this.length; i++) {
// call의 첫 번째 인자는 thisArg가 존재하는 경우는 그 객체, 없으면 전역객체
// call의 두 번째 인자는 this가 배열일 것(호출의 주체가 배열)이므로,
// i번째 요소를 넣어서 인자로 전달
var mappedValue = callback.call(thisArg || global, this[i]);
mappedArr[i] = mappedValue;
}
return mappedArr;
};
const a = [1, 2, 3].mapaaa((item) => {
return item * 2;
});
console.log(a);콜백 함수는 함수다
- 콜백함수로 어떤 객체의 메서드를 전달하더라도 그 메서드는 메서드가 아닌 함수로 호출한다.
var obj = {
vals: [1, 2, 3],
logValues: function(v, i) {
console.log(this, v, i);
}
};
//method로써 호출
obj.logValues(1, 2);
//callback => obj를 this로 하는 메서드를 그대로 전달한게 아니에요
//단지, obj.logValues가 가리키는 함수만 전달한거에요(obj 객체와는 연관이 없습니다)
[4, 5, 6].forEach(obj.logValues);콜백 함수 내부의 this에 다른 값 바인딩하기
- 전통적 방식
var obj1 = {
name: 'obj1',
func: function() {
var self = this; //이 부분!
return function () {
console.log(self.name);
};
}
};
// 단순히 함수만 전달한 것이기 때문에, obj1 객체와는 상관이 없어요.
// 메서드가 아닌 함수로서 호출한 것과 동일하죠.
var callback = obj1.func();
setTimeout(callback, 1000);- 다른방법
var obj1 = {
name: 'obj1',
func: function() {
var self = this; //이 부분!
return function () {
console.log(self.name);
};
}
};
// ---------------------------------
// obj1의 func를 직접 아래에 대입해보면 조금 더 보기 쉽습니다!
var obj2 = {
name: 'obj2',
func: obj1.func
};
var callback2 = obj2.func();
setTimeout(callback2, 1500);
// 역시, obj1의 func를 직접 아래에 대입해보면 조금 더 보기 쉽습니다!
var obj3 = { name: 'obj3' };
var callback3 = obj1.func.call(obj3);
setTimeout(callback3, 2000);- bind 메서드의 활용
var obj1 = {
name: 'obj1',
func: function () {
console.log(this.name);
}
};
//함수 자체를 obj1에 바인딩
//obj1.func를 실행할 때 무조건 this는 obj1로 고정해줘!
setTimeout(obj1.func.bind(obj1), 1000);
var obj2 = { name: 'obj2' };
//함수 자체를 obj2에 바인딩
//obj1.func를 실행할 때 무조건 this는 obj2로 고정해줘!
setTimeout(obj1.func.bind(obj2), 1500);콜백 지옥과 비동기 제어
- 콜백지옥이란: 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 지옥 수준인 경우
- 주로 이벤트 처리 및 서버 통신과 같은 비동기적 작업을 수행할 때 발생하죠.
- 가독성이 별로다, 코드 유지보수하기에 좋지 않다.
동기 vs 비동기
동기
- 동기: 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식
- cpu의 계산에 의해 즉시 처리가 가능한 대부분의 코드는 동기적 코드이다.
- 계산이 복잡해서 cpu가 계산하는 데에 오래 걸리는 코드 역시도 동기적 코드이다.
비동기
- 실행 중은 코드의 완료여부와 무관하게 즉시 다음코드로 넘어가는 방식
- setTimeout, addEventListner
- api 요청
- 웹의 복잡도가 올라갈 수록 비동기적 코드의 비중이 늘어난다.
콜백 지옥의 예시와 해결방안
예시)
// setTimeout 함수의 동작원리
setTimeout(function(){
// 기본적으로 1000ms이 지나야 여기 로직이 실행이 된답니다 :)
console.log('hi');
}, 1000);setTimeout(
function (name) {
var coffeeList = name;
console.log(coffeeList);
setTimeout(
function (name) {
coffeeList += ", " + name;
console.log(coffeeList);
setTimeout(
function (name) {
coffeeList += ", " + name;
console.log(coffeeList);
setTimeout(
function (name) {
coffeeList += ", " + name;
console.log(coffeeList);
},
500,
"카페라떼"
);
},
500,
"카페모카"
);
},
500,
"아메리카노"
);
},
500,
"에스프레소"
);기명함수로 변환하는 방법
- 가독성은 좋으나 함수를 재활용 하지 않기때문에 가독성이 좋은 부분 말고는 없다
var coffeeList = '';
var addEspresso = function (name) {
coffeeList = name;
console.log(coffeeList);
setTimeout(addAmericano, 500, '아메리카노');
};
var addAmericano = function (name) {
coffeeList += ', ' + name;
console.log(coffeeList);
setTimeout(addMocha, 500, '카페모카');
};
var addMocha = function (name) {
coffeeList += ', ' + name;
console.log(coffeeList);
setTimeout(addLatte, 500, '카페라떼');
};
var addLatte = function (name) {
coffeeList += ', ' + name;
console.log(coffeeList);
};
setTimeout(addEspresso, 500, '에스프레소');비동기 작업의 동기적 표현 : Promise
- Promise는 비동기 처리에 대해 처리가 끝나면 알려달라는 약속이다.
- new 연산자로 호출한 Promise의 인자로 넘어가는 콜백은 바로 실행된다.
- 그 내부의 resolve또는 reject 함수를 호출하는 구문이 있을 경우 resolve , reject둘중 하나가 실행되기 전까지는 다음(then), 오류(catch)로 넘어가지 않는다.
- 따라서 비동기 작업이 완료될때 비로소 resolve, reject를 호출한다.
new Promise(function (resolve) {
setTimeout(function () {
var name = '에스프레소';
console.log(name);
resolve(name);
}, 500);
}).then(function (prevName) {
return new Promise(function (resolve) {
setTimeout(function () {
var name = prevName + ', 아메리카노';
console.log(name);
resolve(name);
}, 500);
});
}).then(function (prevName) {
return new Promise(function (resolve) {
setTimeout(function () {
var name = prevName + ', 카페모카';
console.log(name);
resolve(name);
}, 500);
});
}).then(function (prevName) {
return new Promise(function (resolve) {
setTimeout(function () {
var name = prevName + ', 카페라떼';
console.log(name);
resolve(name);
}, 500);
});
});비동기 작업의 동기적 표현 : Promise 2
var addCoffee = function (name) {
return function (prevName) {
return new Promise(function (resolve) {
setTimeout(function () {
var newName = prevName ? (prevName + ', ' + name) : name;
console.log(newName);
resolve(newName);
}, 500);
});
};
};
addCoffee('에스프레소')()
.then(addCoffee('아메리카노'))
.then(addCoffee('카페모카'))
.then(addCoffee('카페라떼'));비동기 작업의 동기적 표현(4) - Promise + Async/await
- promise - then과 같은 효과를 얻을 수 있다.
var addCoffee = function (name) {
return new Promise(function (resolve) {
setTimeout(function(){
resolve(name);
}, 500);
});
};
var coffeeMaker = async function () {
var coffeeList = '';
var _addCoffee = async function (name) {
coffeeList += (coffeeList ? ', ' : '') + await addCoffee(name);
};
await _addCoffee('에스프레소');
console.log(coffeeList);
await _addCoffee('아메리카노');
console.log(coffeeList);
await _addCoffee('카페모카');
console.log(coffeeList);
await _addCoffee('카페라떼');
console.log(coffeeList);
};
coffeeMaker();
