ฟังก์ชัน Callback ใน JavaScript

ฟังก์ชันสามารถถูกส่งผ่านเป็นพารามิเตอร์ ไปยังฟังก์ชันอื่นได้ ฟังก์ชัน-พารามิเตอร์ดังกล่าว เรียกว่า คอลแบ็ก (callback) มาดูตัวอย่าง การทำงานกับพวกมันกัน

สมมติว่าเราต้องการสร้างฟังก์ชันที่รับ พารามิเตอร์แรกเป็นอาเรย์ และพารามิเตอร์ที่สองเป็น callback ซึ่งจะถูกนำไปใช้กับทุกองค์ประกอบ ของอาเรย์:

function each(arr, callback) {
	// โค้ดบางอย่างอยู่ที่นี่
}

มาเขียนการทำงานของฟังก์ชันของเรากัน:

function each(arr, callback) {
	let result = [];
	
	for (let elem of arr) {
		result.push( callback(elem) ); // เรียกใช้ฟังก์ชัน callback
	}
	
	return result;
}

ฟังก์ชัน each ของเราเป็นฟังก์ชันอเนกประสงค์ นั่นหมายความว่าเราสามารถส่ง callback ต่างๆ เข้าไปยังฟังก์ชันนี้ได้ โดยดำเนินการดำเนินการที่ต่างกัน กับอาเรย์ ในขณะที่ โค้ดของฟังก์ชันของเราจะยังคง ไม่เปลี่ยนแปลง — มีเพียง callback ที่ถูกส่งเข้ามาเท่านั้นที่เปลี่ยนแปลง

มาลองยกตัวอย่างโดยใช้ฟังก์ชันของเรา ยกกำลังสองทุกองค์ประกอบ ของอาเรย์บางอาเรย์กัน โดยเราจะส่ง callback ที่ตรงกันเป็นพารามิเตอร์:

let result = each([1, 2, 3, 4, 5], function(num) {
	return num ** 2;
});

console.log(result);

และตอนนี้เรามายกกำลังสามองค์ประกอบของอาเรย์ กัน สำหรับสิ่งนี้ เราจะส่ง callback อีกตัวหนึ่ง ที่ดำเนินการการดำเนินการนี้เป็นพารามิเตอร์

let result = each([1, 2, 3, 4, 5], function(num) {
	return num ** 3;
});

console.log(result);

กำหนดอาเรย์ที่มีตัวเลข โดยใช้ฟังก์ชัน each ที่เราสร้างขึ้น ให้เพิ่มค่า แต่ละองค์ประกอบขึ้นเป็นสองเท่า

กำหนดอาเรย์ที่มีสตริง โดยใช้ฟังก์ชัน each ที่เราสร้างขึ้น ให้พลิกกลับอักขระ ของแต่ละสตริงให้เป็นลำดับตรงกันข้าม

กำหนดอาเรย์ที่มีสตริง โดยใช้ฟังก์ชัน each ที่เราสร้างขึ้น ทำให้เป็นตัวพิมพ์ใหญ่ อักขระตัวแรกของแต่ละสตริง