[JS] 콜백함수

콜백함수란?

다른 코드 인자로 넘겨주는 함수로, forEach, setTimeout 등이 있다.
해당 함수에 대한 제어권이 나에게 있는 것이 아니라 넘겨준 코드에게 할당된다.
제어권을 위임받은 코드는 적절한 시점에 함수를 실행한다.

콜백함수 => 함수

var obj = {
	vals: [1, 2, 3],
	logValues: function(v, i) {
		console.log(this, v, i);
	}
};
obj.logValues(1, 2);

메서드로써 호출된 코드이다.

var obj = {
	vals: [1, 2, 3],
	logValues: function(v, i) {
		console.log(this, v, i);
	}
};
[4, 5, 6].forEach(obj.logValues);
/*
[4, 5, 6].forEach(function(v, i) {
		console.log(this, v, i);
	});
위 코드와 같다고 보면 된다.
*/ 

메서드가 아닌 함수로 호출되었다.
obj 객체와는 연관이 없다.

콜백함수 내부 this 바인딩

일반적인 방식으로는 함수 내부에 self 라는 변수를 만들어 this를 지정하고 사용한다.

두번째 방법으로는 복제하여 메서드로 불러내는 방법과 call()을 사용하는 방법이 있다.

var obj1 = {
	name: 'obj1',
	func: function() {
		var self = this; //이 부분!
		return function () {
			console.log(self.name);
		};
	}
};

var obj2 = {
	name: 'obj2',
	func: obj1.func
};
var callback2 = obj2.func();
setTimeout(callback2, 1500);

var obj3 = { name: 'obj3' };
var callback3 = obj1.func.call(obj3);
setTimeout(callback3, 2000);

가장 좋은 방법으로는 bind 메서드를 활용하는 것이다.

setTimeout(obj1.func.bind(obj1), 2000);

동기와 비동기

동기는 현 실행중인 코드가 끝나야 다음 코드가 진행되고, 비동기는 완료여부와 무관하게 코드진행이 된다.

비동기를 동기처럼

비동기의 경우 코드의 진행순서를 보장할 수 없기 때문에 동기적 표현을 많이 사용한다.
그 방법에는 promise, Generator, async/await 이 있다.

1. promise
   new 연산자로 promise를 호출하며 내부의 resolve, reject 함수를 호출하는 구문이 있는 경우 실행되기 전까지 then, catch로 넘어가지 않는다.

new Promise(function (resolve) {
	setTimeout(function() {
    // ~~~~~~;
    resolve(name);
    },500);

}).then(function (prev) {
  return new Promise(function (resolve) {
	setTimeout(function() {
    // ~~~~~~;
    resolve(name);
    },500);
});

2. Generator
   iterable 객체가 반환되는 함수로 generator 함수 내부에서 첫 yield에서 멈추고 그다음 yield까지 실행하고 멈춘다.
   즉, 비동기 작업이 완료되는 시점마다 next 함수를 호출해주면 순차적 진행이 된다.

3. async/await
   가장 자주 보이던 방법으로, 비동기 작업 수행함수 앞에 async를 붙여주고 함수 내부 비동기 코드마다 await을 붙여주면 된다.