{"componentChunkName":"component---src-templates-blog-post-js","path":"/JavaScript/Callback_Function/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"1e8517b9-075c-57d9-a8e7-69a1bcaecd04","excerpt":"콜백 함수 (Callback Function) call + back: something will call this function back sometime somehow 무언가가 이 함수를 호출해서 언젠가 어떻게든 나에게 돌려줄거야!  => 제어권을 넘겨준다. 맡긴다. ex) 1초마다 콜백함수가 실행된다. 콜백함수의 제어권을 setInterval에게 넘긴 것이다.  > 다른 함수 (A)의 매개변수로 콜백함수 (B)를 전달하면, A가 B의 제어권을 갖게 된다. > 특별한 요청(bind…","html":"<h1 id=\"콜백-함수-callback-function\" style=\"position:relative;\"><a href=\"#%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98-callback-function\" aria-label=\"콜백 함수 callback function permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>콜백 함수 (Callback Function)</h1>\n<p>call + back: something will <strong>call</strong> this function <strong>back</strong> sometime somehow</p>\n<p>무언가가 이 함수를 호출해서 언젠가 어떻게든 나에게 돌려줄거야!  => <strong>제어권</strong>을 넘겨준다. 맡긴다.</p>\n<p>ex)</p>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token function\">setInterval</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'1초마다 실행될 겁니다.'</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1000</span><span class=\"token punctuation\">)</span></code></pre></div>\n<ul>\n<li>1초마다 콜백함수가 실행된다. 콜백함수의 제어권을 setInterval에게 넘긴 것이다. </li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token function\">setInterval</span><span class=\"token punctuation\">(</span>callback<span class=\"token punctuation\">,</span> milliseconds<span class=\"token punctuation\">)</span></code></pre></div>\n<h5 id=\"-다른-함수-a의-매개변수로-콜백함수-b를-전달하면-a가-b의-제어권을-갖게-된다\" style=\"position:relative;\"><a href=\"#-%EB%8B%A4%EB%A5%B8-%ED%95%A8%EC%88%98-a%EC%9D%98-%EB%A7%A4%EA%B0%9C%EB%B3%80%EC%88%98%EB%A1%9C-%EC%BD%9C%EB%B0%B1%ED%95%A8%EC%88%98-b%EB%A5%BC-%EC%A0%84%EB%8B%AC%ED%95%98%EB%A9%B4-a%EA%B0%80-b%EC%9D%98-%EC%A0%9C%EC%96%B4%EA%B6%8C%EC%9D%84-%EA%B0%96%EA%B2%8C-%EB%90%9C%EB%8B%A4\" aria-label=\" 다른 함수 a의 매개변수로 콜백함수 b를 전달하면 a가 b의 제어권을 갖게 된다 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>> 다른 함수 (A)의 매개변수로 콜백함수 (B)를 전달하면, A가 B의 <strong>제어권</strong>을 갖게 된다.</h5>\n<h5 id=\"-특별한-요청bind이-없는-한-a에-미리-정해진-방식에-따라-b를-호출한다\" style=\"position:relative;\"><a href=\"#-%ED%8A%B9%EB%B3%84%ED%95%9C-%EC%9A%94%EC%B2%ADbind%EC%9D%B4-%EC%97%86%EB%8A%94-%ED%95%9C-a%EC%97%90-%EB%AF%B8%EB%A6%AC-%EC%A0%95%ED%95%B4%EC%A7%84-%EB%B0%A9%EC%8B%9D%EC%97%90-%EB%94%B0%EB%9D%BC-b%EB%A5%BC-%ED%98%B8%EC%B6%9C%ED%95%9C%EB%8B%A4\" aria-label=\" 특별한 요청bind이 없는 한 a에 미리 정해진 방식에 따라 b를 호출한다 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>> 특별한 요청(bind)이 없는 한 A에 미리 정해진 방식에 따라 B를 호출한다.</h5>\n<h5 id=\"-미리-정해진-방식이란-this에-무엇을-바인딩할지-매개변수에는-어떤-값들을-지정할지-어떤-타이밍에-콜백을-호출할지-등이다\" style=\"position:relative;\"><a href=\"#-%EB%AF%B8%EB%A6%AC-%EC%A0%95%ED%95%B4%EC%A7%84-%EB%B0%A9%EC%8B%9D%EC%9D%B4%EB%9E%80-this%EC%97%90-%EB%AC%B4%EC%97%87%EC%9D%84-%EB%B0%94%EC%9D%B8%EB%94%A9%ED%95%A0%EC%A7%80-%EB%A7%A4%EA%B0%9C%EB%B3%80%EC%88%98%EC%97%90%EB%8A%94-%EC%96%B4%EB%96%A4-%EA%B0%92%EB%93%A4%EC%9D%84-%EC%A7%80%EC%A0%95%ED%95%A0%EC%A7%80-%EC%96%B4%EB%96%A4-%ED%83%80%EC%9D%B4%EB%B0%8D%EC%97%90-%EC%BD%9C%EB%B0%B1%EC%9D%84-%ED%98%B8%EC%B6%9C%ED%95%A0%EC%A7%80-%EB%93%B1%EC%9D%B4%EB%8B%A4\" aria-label=\" 미리 정해진 방식이란 this에 무엇을 바인딩할지 매개변수에는 어떤 값들을 지정할지 어떤 타이밍에 콜백을 호출할지 등이다 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>> 미리 정해진 방식이란 this에 무엇을 바인딩할지, 매개변수에는 어떤 값들을 지정할지, 어떤 타이밍에 콜백을 호출할지 등이다.</h5>\n<blockquote>\n<p>참고</p>\n<ul>\n<li><a href=\"https://www.inflearn.com/course/%ED%95%B5%EC%8B%AC%EA%B0%9C%EB%85%90-javascript-flow\">Javascript 핵심 개념 알아보기</a></li>\n</ul>\n</blockquote>","frontmatter":{"title":"Callback Function","date":"April 18, 2020"}}},"pageContext":{"slug":"/JavaScript/Callback_Function/","previous":{"fields":{"slug":"/Today I Learned/Prevent_CSS_hover_on_touch_devices/"},"frontmatter":{"title":"Prevent CSS hover on touch devices","category":"Today I Learned","draft":false}},"next":{"fields":{"slug":"/Today I Learned/Cant bind input when using_abstract_classes_2+_level_of_hierarchy/"},"frontmatter":{"title":"Cant bind input when using abstract classes 2+ level of hierarchy","category":"Today I Learned","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}