๐ŸŸจ JavaScript/๊ฐœ๋…

[๋“œ๋ฆผ์ฝ”๋”ฉ ์™ธ] ์ฝœ๋ฐฑํ•จ์ˆ˜ (Callback function)

Zoeeey 2022. 4. 22. 14:44

์ฝœ๋ฐฑํ•จ์ˆ˜ (Callback function)

์ฝœ๋ฐฑํ•จ์ˆ˜๋Š” ์–ด๋–ค ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ–ˆ๊ฑฐ๋‚˜ ํŠน์ • ์‹œ์ ์— ๋„๋‹ฌํ–ˆ์„ ๋•Œ ์‹œ์Šคํ…œ์—์„œ ํ˜ธ์ถœํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ๋งํ•œ๋‹ค. (ํŠน๋ณ„ํ•œ ์„ ์–ธ๋ฒ•์ด๋‚˜ ๋‹ค๋ฅธ ๋ฌธ๋ฒ•์„ ๊ฐ€์ง„ ํ•จ์ˆ˜๊ฐ€ ์•„๋‹Œ, ํ˜ธ์ถœํ•˜๋Š” ๋ฐฉ์‹์— ๋”ฐ๋ผ ๊ตฌ๋ถ„๋œ ํ•จ์ˆ˜์ด๋‹ค.)

function whatCoder(codingTest, goodCode, badCode) {
  if(codingtest === 'Callback function') {
    goodCode();
  } else {
    badCode();
  }
}
const goodCode = function () {
  console.log('Great!')
};
const badCode = function () {
  console.log('Do it again.')
};

whatCoder(`I don't know.`, goodCode, badCode);
whatCoder('Callback function', goodCode, badCode);

์ฝœ๋ฐฑํ•จ์ˆ˜์˜ ์‹ค์ œ ์‚ฌ์šฉ์˜ˆ์ œ

<button id="button1" onclick="button1_click();">๋ฒ„ํŠผ1</button>
<script>
function button1_click() {
	alert("๋ฒ„ํŠผ1์„ ๋ˆ„๋ฅด์…จ์Šต๋‹ˆ๋‹ค.");
}
</script>

html button์—์„œ ์“ฐ์ธ button1_click()ํ•จ์ˆ˜๋Š” ๋ธŒ๋ผ์šฐ์ €์˜ javascript์—์„œ DOM ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ์— ์ „๋‹ฌ(๋“ฑ๋ก)๋˜๊ณ , ๋ฒ„ํŠผ์˜ ํด๋ฆญ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ๋‹ค.

$( "#target" ).click(function() {
  alert( "Handler for .click() called." );
});

Jquery์—์„œ ์‚ฌ์šฉ๋œ ์ฝœ๋ฐฑํ•จ์ˆ˜์ด๋‹ค.

 


์ฝœ๋ฐฑํ•จ์ˆ˜๋Š” https://www.hanumoka.net/2018/10/24/javascript-20181024-javascript-callback/ ์š” ๋ธ”๋กœ๊ทธ๋ฅผ ์ฐธ์กฐํ•˜๋ฉฐ ๊ณต๋ถ€ํ•˜๋Š” ์ค‘.


์ถœ์ฒ˜ : ๋“œ๋ฆผ์ฝ”๋”ฉ https://www.youtube.com/@dream-coding / MDN https://developer.mozilla.org/ko