コールバック関数

コールバック関数は、他のコードパラメータに渡される関数です.
イベントが発生したり、特定の時点に到達したりすると、システムはそれを呼び出します.これは、制御権が別のコードに渡されることを意味します.これがコールバック関数です.
代表的な例としてsetInterval,mapなどの関数がある.

SetInterval

var count = 0;
var callbackFunc = function(){
	console.log(count);
  	if(++count > 4) clearInterval(timer);
}

var timer = setInterval(callbackFunc, 400);
// 0, 1, 2, 3, 4 를 0.3초 간격으로 호출함

このように、コールバック関数の制御権を受けるコードは、コールバック関数呼び出し時点の制御権を有する.

使用理由

コールバック関数を使用する理由は、非同期プログラミングが可能であるためです.
プログラミング中にイベント、遅延、ネットワーク応答などを処理する必要がある場合があります.
サーバから20個のイメージをロードする必要がある場合、20個のイメージをロードするときに他のコードが実行されない場合、ある時間に発生したイメージによって他のコードが実行できず、待機する可能性があります.このため,コールバック関数を用いて非同期を処理する必要がある.

結局は関数です。

コールバック関数を学ぶときに感じるのは、コールバック関数は結局関数です.
前回学習時にJavaScriptでthisをメソッドとして使用した場合、使用しているpropertyのオブジェクトを表示できます.
メソッドをコールバック関数で使用すると、メソッドではなく関数として機能するため、このメソッドを指定しない限り、グローバルオブジェクトが表示されます.

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

obj.logValues(1, 2) // obj{}, 1, 2

[4, 5, 6].forEach(obj.logValues) 
// window{}, 4 0 
// window{}, 5 1
// window{}, 6 2

callback地獄と解決方法

何度もカルバック地獄の話を聞いたことがあるはずです.
Javascriptで非同期処理を行う場合、コールバック関数を連続的に使用すると、可読性や変数名などが混同されるため、受けた苦痛をコールバック地獄と呼ぶことになります.例とその解決方法promiseと最近現れたasync/awaitを見て比較してみましょう.

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);
    	}, 500, '아메리카노')
    }, 500, '국밥')
}, 500, '프라푸치노')

少なくとも3行の字は気絶した.この方式はインデントのため可読性も悪く,何から出力されるのかすぐには理解しにくく,書く効率も悪い.
(今は3つですが、このようなコードが10個も続くと思うと、巨大な不等号のようになるのではないでしょうか)
それを補うための約束を見てみましょう.

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);
    })
})

Promise関数を使用すると、インデントによる不便が解消されます.
最新のasync/awaitの使用方法について説明します

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);
}

最近出てきたのかもしれませんが、読んで満足しました.

整理する

コールバック関数は、パラメータを他のコードに渡す関数であり、制御権を同時に渡す.

コールバック関数は最終的に関数であり、この関数を使用する場合は個別に指定する必要があります.(bindメソッドを使用し、関数に保存して使用するなど)