{"id":2433,"date":"2015-02-12T17:45:04","date_gmt":"2015-02-12T15:45:04","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=2433"},"modified":"2015-02-06T11:41:05","modified_gmt":"2015-02-06T09:41:05","slug":"javascript-closures-pass-parameters-callbacks","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/","title":{"rendered":"JavaScript Closures: Pass parameters to callbacks"},"content":{"rendered":"<p>Many JavaScript libraries allow to define callbacks. We often need to pass various parameters oder some context from outside to the same callbacks.<br \/>\n<a href=\"https:\/\/developer.mozilla.org\/en\/docs\/Web\/JavaScript\/Guide\/Closures\">JavaScript Closures<\/a> makes it possible.<\/p>\n<p>The idea is to define two functions &#8211; one outer and one inner which acts as callback. The outer function can take parameters and pass them to the inner function. Thanks to Closures, the inner function can access the parameters in the parent scope. The outer function should now returns the inner one. That is actually a well-known trick.<\/p>\n<p>Assume you use the\u00a0<a href=\"http:\/\/select2.github.io\/\">Select2<\/a> plugin and want to have two callbacks. One is defined via the option\u00a0<strong>templateResult<\/strong> and used for formatting select items in dropdown. Another is defined via the option\u00a0<strong>templateSelection<\/strong> and used for formatting the displayed value in select field.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">$(this).select2({\r\n    ...\r\n    templateResult: formatResultTemplate,\r\n    templateSelection: formatSelectionTemplate\r\n});\r\n\r\nfunction formatResultTemplate(data) {\r\n    ...\r\n}\r\n\r\nfunction formatSelectionTemplate(data) {\r\n    ...\r\n}<\/pre>\n<p>Assume, in both cases, the HTML code and formatting are similar except small differences in CSS styles. The functions have much repeated code and we would like to follow the\u00a0<strong>don&#8217;t-repeat-yourself principle<\/strong> (DRY). What is about to pass CSS style as parameter? And here you go (real example from project).<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">$(this).select2({\r\n    ...\r\n    templateResult: formatTemplate('margin:0 6px 0 0;'),\r\n    templateSelection: formatTemplate('height:28px;')\r\n});\r\n\r\nfunction formatTemplate(style) {\r\n    function formatWithStyle(data) {\r\n        var imgSrc = $(data.element).data('image');\r\n        if (imgSrc) {\r\n            return '&lt;img src='' + imgSrc + '' style='' + style + ''\/&gt;;&lt;span class='option-text'&gt;' + data.text + '&lt;\/span&gt;;';\r\n        } else {\r\n            return '&lt;span class='option-text'&gt;' + data.text + '&lt;\/span&gt;';\r\n        }\r\n    }\r\n\r\n    return formatWithStyle;\r\n}<\/pre>\n<p>The code is optimized now. The outer function\u00a0<strong>formatTemplate<\/strong> returns the inner one\u00a0<strong>formatWithStyle<\/strong>, &#8220;parametrized&#8221; with style. This inner function can be reused as &#8220;formatting callback&#8221;.<\/p>\n<p>I hope you got the idea.<\/p>\n<div class=\"attribution\">\n<table>\n<tbody>\n<tr>\n<td><span class=\"reference\">Reference: <\/span><\/td>\n<td><a href=\"http:\/\/ovaraksin.blogspot.com\/2015\/01\/javascript-closures-pass-parameters-to.html\">JavaScript Closures: Pass parameters to callbacks<\/a> from our <a href=\"http:\/\/www.webcodegeeks.com\/wcg\/\">WCG partner<\/a> Oleg Varaksin at the <a href=\"http:\/\/ovaraksin.blogspot.com\/\">Thoughts on software development<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Many JavaScript libraries allow to define callbacks. We often need to pass various parameters oder some context from outside to the same callbacks. JavaScript Closures makes it possible. The idea is to define two functions &#8211; one outer and one inner which acts as callback. The outer function can take parameters and pass them to &hellip;<\/p>\n","protected":false},"author":15,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[35],"class_list":["post-2433","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-closures"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript Closures: Pass parameters to callbacks - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Many JavaScript libraries allow to define callbacks. We often need to pass various parameters oder some context from outside to the same callbacks.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Closures: Pass parameters to callbacks - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Many JavaScript libraries allow to define callbacks. We often need to pass various parameters oder some context from outside to the same callbacks.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2015-02-12T15:45:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Oleg Varaksin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Oleg Varaksin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/\"},\"author\":{\"name\":\"Oleg Varaksin\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/907f82ccdf11dbd8f7b6af2c1024d712\"},\"headline\":\"JavaScript Closures: Pass parameters to callbacks\",\"datePublished\":\"2015-02-12T15:45:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/\"},\"wordCount\":312,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"keywords\":[\"Closures\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/\",\"name\":\"JavaScript Closures: Pass parameters to callbacks - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2015-02-12T15:45:04+00:00\",\"description\":\"Many JavaScript libraries allow to define callbacks. We often need to pass various parameters oder some context from outside to the same callbacks.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript Closures: Pass parameters to callbacks\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/907f82ccdf11dbd8f7b6af2c1024d712\",\"name\":\"Oleg Varaksin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/fda1ce47105421f7a352a13dbefec14ab59d59ffae99c6c3002e5841578979d3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/fda1ce47105421f7a352a13dbefec14ab59d59ffae99c6c3002e5841578979d3?s=96&d=mm&r=g\",\"caption\":\"Oleg Varaksin\"},\"sameAs\":[\"http:\/\/ovaraksin.blogspot.com\/\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/oleg-varaksin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Closures: Pass parameters to callbacks - Web Code Geeks - 2026","description":"Many JavaScript libraries allow to define callbacks. We often need to pass various parameters oder some context from outside to the same callbacks.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Closures: Pass parameters to callbacks - Web Code Geeks - 2026","og_description":"Many JavaScript libraries allow to define callbacks. We often need to pass various parameters oder some context from outside to the same callbacks.","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2015-02-12T15:45:04+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Oleg Varaksin","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Oleg Varaksin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/"},"author":{"name":"Oleg Varaksin","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/907f82ccdf11dbd8f7b6af2c1024d712"},"headline":"JavaScript Closures: Pass parameters to callbacks","datePublished":"2015-02-12T15:45:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/"},"wordCount":312,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","keywords":["Closures"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/","name":"JavaScript Closures: Pass parameters to callbacks - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2015-02-12T15:45:04+00:00","description":"Many JavaScript libraries allow to define callbacks. We often need to pass various parameters oder some context from outside to the same callbacks.","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-closures-pass-parameters-callbacks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript Closures: Pass parameters to callbacks"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/907f82ccdf11dbd8f7b6af2c1024d712","name":"Oleg Varaksin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/fda1ce47105421f7a352a13dbefec14ab59d59ffae99c6c3002e5841578979d3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fda1ce47105421f7a352a13dbefec14ab59d59ffae99c6c3002e5841578979d3?s=96&d=mm&r=g","caption":"Oleg Varaksin"},"sameAs":["http:\/\/ovaraksin.blogspot.com\/"],"url":"https:\/\/www.webcodegeeks.com\/author\/oleg-varaksin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/2433","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=2433"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/2433\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=2433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=2433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=2433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}