{"id":39851,"date":"2024-05-31T14:46:47","date_gmt":"2024-05-31T07:46:47","guid":{"rendered":"https:\/\/an-nur.ac.id\/?p=39851"},"modified":"2024-05-31T14:46:47","modified_gmt":"2024-05-31T07:46:47","slug":"pengertian-closure-dalam-pemrograman-javascript-fungsi-jenis-dan-penerapannya","status":"publish","type":"post","link":"https:\/\/wirabuana.ac.id\/artikel\/pengertian-closure-dalam-pemrograman-javascript-fungsi-jenis-dan-penerapannya\/","title":{"rendered":"Pengertian Closure dalam Pemrograman JavaScript: Fungsi, Jenis, dan Penerapannya"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/wirabuana.ac.id\/artikel\/pengertian-closure-dalam-pemrograman-javascript-fungsi-jenis-dan-penerapannya\/#Pengertian_Closure\" >Pengertian Closure<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/wirabuana.ac.id\/artikel\/pengertian-closure-dalam-pemrograman-javascript-fungsi-jenis-dan-penerapannya\/#Jenis-Jenis_Closure\" >Jenis-Jenis Closure<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/wirabuana.ac.id\/artikel\/pengertian-closure-dalam-pemrograman-javascript-fungsi-jenis-dan-penerapannya\/#1_Lexical_Closure\" >1. Lexical Closure<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/wirabuana.ac.id\/artikel\/pengertian-closure-dalam-pemrograman-javascript-fungsi-jenis-dan-penerapannya\/#2_Closure_dengan_Fungsi_Anonim\" >2. Closure dengan Fungsi Anonim<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/wirabuana.ac.id\/artikel\/pengertian-closure-dalam-pemrograman-javascript-fungsi-jenis-dan-penerapannya\/#3_Closure_dengan_IIFE_Immediately_Invoked_Function_Expression\" >3. Closure dengan IIFE (Immediately Invoked Function Expression)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/wirabuana.ac.id\/artikel\/pengertian-closure-dalam-pemrograman-javascript-fungsi-jenis-dan-penerapannya\/#4_Closure_dengan_Modul\" >4. Closure dengan Modul<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/wirabuana.ac.id\/artikel\/pengertian-closure-dalam-pemrograman-javascript-fungsi-jenis-dan-penerapannya\/#Penerapan_Closure_dalam_Pemrograman\" >Penerapan Closure dalam Pemrograman<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/wirabuana.ac.id\/artikel\/pengertian-closure-dalam-pemrograman-javascript-fungsi-jenis-dan-penerapannya\/#1_Menjaga_Privasi_Variabel\" >1. Menjaga Privasi Variabel<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/wirabuana.ac.id\/artikel\/pengertian-closure-dalam-pemrograman-javascript-fungsi-jenis-dan-penerapannya\/#2_Membuat_Fungsi_Callback\" >2. Membuat Fungsi Callback<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/wirabuana.ac.id\/artikel\/pengertian-closure-dalam-pemrograman-javascript-fungsi-jenis-dan-penerapannya\/#3_Membuat_Event_Handler\" >3. Membuat Event Handler<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/wirabuana.ac.id\/artikel\/pengertian-closure-dalam-pemrograman-javascript-fungsi-jenis-dan-penerapannya\/#4_Pembuatan_Modul\" >4. Pembuatan Modul<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/wirabuana.ac.id\/artikel\/pengertian-closure-dalam-pemrograman-javascript-fungsi-jenis-dan-penerapannya\/#Kesimpulan\" >Kesimpulan<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Pengertian_Closure\"><\/span>Pengertian Closure<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Closure adalah konsep dalam pemrograman komputer, khususnya dalam bahasa pemrograman JavaScript. Secara sederhana, closure adalah fungsi yang memiliki akses ke variabel di dalam lingkup (scope) terluarnya, bahkan setelah fungsi tersebut selesai dieksekusi. Closure memungkinkan fungsi untuk &#8220;mengikat&#8221; variabel-variabel dari lingkup luar dan tetap mengaksesnya meskipun lingkup tersebut sudah tidak aktif.<\/p>\n<p>Closure memungkinkan adanya enkapsulasi data dan merupakan salah satu fitur penting yang membuat JavaScript sangat fleksibel dan powerful. Closure sering digunakan dalam pembuatan fungsi callback, event handler, dan pembuatan modul dalam JavaScript.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Jenis-Jenis_Closure\"><\/span>Jenis-Jenis Closure<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"1_Lexical_Closure\"><\/span>1. Lexical Closure<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Lexical closure adalah closure yang dibuat ketika sebuah fungsi didefinisikan di dalam lingkup lainnya dan memiliki akses ke variabel-variabel dalam lingkup tersebut. Lexical closure memungkinkan fungsi untuk mengakses variabel dari lingkup luar, meskipun fungsi tersebut dipanggil di luar lingkup tersebut.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_Closure_dengan_Fungsi_Anonim\"><\/span>2. Closure dengan Fungsi Anonim<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Closure juga dapat diciptakan dengan menggunakan fungsi anonim. Fungsi anonim adalah fungsi yang tidak memiliki nama dan biasanya digunakan untuk membuat fungsi callback atau event handler.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_Closure_dengan_IIFE_Immediately_Invoked_Function_Expression\"><\/span>3. Closure dengan IIFE (Immediately Invoked Function Expression)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Closure dapat dibuat dengan IIFE, yaitu ekspresi fungsi yang langsung dipanggil setelah didefinisikan. IIFE sering digunakan untuk membuat lingkup lokal agar variabel tidak mencemari lingkup global.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_Closure_dengan_Modul\"><\/span>4. Closure dengan Modul<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Closure juga digunakan dalam pembuatan modul di JavaScript. Modul adalah bagian kode yang terisolasi dan dapat di-reuse. Dengan menggunakan closure, kita dapat menyembunyikan detail implementasi modul dan hanya mengekspos API publik.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Penerapan_Closure_dalam_Pemrograman\"><\/span>Penerapan Closure dalam Pemrograman<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"1_Menjaga_Privasi_Variabel\"><\/span>1. Menjaga Privasi Variabel<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Closure dapat digunakan untuk menjaga privasi variabel dalam sebuah fungsi. Dengan menggunakan closure, variabel-variabel dalam fungsi tidak dapat diakses dari luar fungsi tersebut, sehingga menjaga integritas data.<\/p>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Salin kode<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4 text-left undefined\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">createCounter<\/span>() {<br \/>\n    <span class=\"hljs-keyword\">let<\/span> count = <span class=\"hljs-number\">0<\/span>;<br \/>\n    <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">function<\/span>() {<br \/>\n        count++;<br \/>\n        <span class=\"hljs-keyword\">return<\/span> count;<br \/>\n    };<br \/>\n}<\/p>\n<p><span class=\"hljs-keyword\">const<\/span> counter = <span class=\"hljs-title function_\">createCounter<\/span>();<br \/>\n<span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(<span class=\"hljs-title function_\">counter<\/span>()); <span class=\"hljs-comment\">\/\/ Output: 1<\/span><br \/>\n<span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(<span class=\"hljs-title function_\">counter<\/span>()); <span class=\"hljs-comment\">\/\/ Output: 2<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"2_Membuat_Fungsi_Callback\"><\/span>2. Membuat Fungsi Callback<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Closure sering digunakan untuk membuat fungsi callback. Fungsi callback adalah fungsi yang dikirimkan sebagai argumen ke fungsi lain dan dieksekusi setelah fungsi lain selesai dijalankan.<\/p>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Salin kode<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4 text-left undefined\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">greet<\/span>(<span class=\"hljs-params\">name<\/span>) {<br \/>\n    <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">function<\/span>() {<br \/>\n        <span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(<span class=\"hljs-string\">'Hello, '<\/span> + name);<br \/>\n    };<br \/>\n}<\/p>\n<p><span class=\"hljs-keyword\">const<\/span> greetJohn = <span class=\"hljs-title function_\">greet<\/span>(<span class=\"hljs-string\">'John'<\/span>);<br \/>\n<span class=\"hljs-title function_\">greetJohn<\/span>(); <span class=\"hljs-comment\">\/\/ Output: Hello, John<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"3_Membuat_Event_Handler\"><\/span>3. Membuat Event Handler<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Closure juga dapat digunakan untuk membuat event handler. Event handler adalah fungsi yang dijalankan sebagai respons terhadap suatu event, seperti klik tombol atau pengiriman formulir.<\/p>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Salin kode<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4 text-left undefined\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">setupButton<\/span>() {<br \/>\n    <span class=\"hljs-keyword\">let<\/span> count = <span class=\"hljs-number\">0<\/span>;<br \/>\n    <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">getElementById<\/span>(<span class=\"hljs-string\">'myButton'<\/span>).<span class=\"hljs-title function_\">addEventListener<\/span>(<span class=\"hljs-string\">'click'<\/span>, <span class=\"hljs-keyword\">function<\/span>() {<br \/>\n        count++;<br \/>\n        <span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(<span class=\"hljs-string\">'Button clicked '<\/span> + count + <span class=\"hljs-string\">' times'<\/span>);<br \/>\n    });<br \/>\n}<\/p>\n<p><span class=\"hljs-title function_\">setupButton<\/span>();<br \/>\n<\/code><\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"4_Pembuatan_Modul\"><\/span>4. Pembuatan Modul<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Closure sangat berguna dalam pembuatan modul, di mana kita dapat menyembunyikan detail implementasi dan hanya mengekspos fungsi-fungsi publik.<\/p>\n<div class=\"dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium\">\n<div class=\"flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<\/p>\n<div class=\"flex items-center\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center\">Salin kode<\/button><\/span><\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4 text-left undefined\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> myModule = (<span class=\"hljs-keyword\">function<\/span>() {<br \/>\n    <span class=\"hljs-keyword\">let<\/span> privateVar = <span class=\"hljs-string\">'I am private'<\/span>;<br \/>\n    <span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">privateFunction<\/span>() {<br \/>\n        <span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(privateVar);<br \/>\n    }<br \/>\n    <span class=\"hljs-keyword\">return<\/span> {<br \/>\n        <span class=\"hljs-attr\">publicFunction<\/span>: <span class=\"hljs-keyword\">function<\/span>() {<br \/>\n            <span class=\"hljs-title function_\">privateFunction<\/span>();<br \/>\n        }<br \/>\n    };<br \/>\n})();<\/p>\n<p>myModule.<span class=\"hljs-title function_\">publicFunction<\/span>(); <span class=\"hljs-comment\">\/\/ Output: I am private<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"Kesimpulan\"><\/span>Kesimpulan<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Closure adalah konsep penting dalam pemrograman JavaScript yang memungkinkan fungsi untuk mengakses variabel dari lingkup luar meskipun fungsi tersebut dipanggil di luar lingkup tersebut. Closure dapat digunakan untuk menjaga privasi variabel, membuat fungsi callback, event handler, dan modul. Dengan memahami dan memanfaatkan closure, kita dapat menulis kode JavaScript yang lebih efisien, modular, dan terorganisir.<\/p>\n<p>Memahami konsep closure dan cara penerapannya dapat membantu pengembang dalam menulis kode yang lebih baik dan lebih mudah dipelihara. Dengan memanfaatkan closure, kita dapat membuat aplikasi yang lebih aman, modular, dan fleksibel.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pengertian Closure Closure adalah konsep dalam pemrograman komputer, khususnya dalam bahasa pemrograman JavaScript. Secara sederhana, closure adalah fungsi yang memiliki akses ke variabel di dalam&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[507],"class_list":["post-39851","post","type-post","status-publish","format-standard","hentry","category-ragam","tag-ragam"],"_links":{"self":[{"href":"https:\/\/wirabuana.ac.id\/artikel\/wp-json\/wp\/v2\/posts\/39851","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wirabuana.ac.id\/artikel\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wirabuana.ac.id\/artikel\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wirabuana.ac.id\/artikel\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wirabuana.ac.id\/artikel\/wp-json\/wp\/v2\/comments?post=39851"}],"version-history":[{"count":0,"href":"https:\/\/wirabuana.ac.id\/artikel\/wp-json\/wp\/v2\/posts\/39851\/revisions"}],"wp:attachment":[{"href":"https:\/\/wirabuana.ac.id\/artikel\/wp-json\/wp\/v2\/media?parent=39851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wirabuana.ac.id\/artikel\/wp-json\/wp\/v2\/categories?post=39851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wirabuana.ac.id\/artikel\/wp-json\/wp\/v2\/tags?post=39851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}