<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Emmanuel</title>
    <description>The latest articles on DEV Community by Emmanuel (@emmanueliyanu21).</description>
    <link>https://dev.to/emmanueliyanu21</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1001992%2F35110159-2c3d-45dc-b5de-5468156113b5.jpeg</url>
      <title>DEV Community: Emmanuel</title>
      <link>https://dev.to/emmanueliyanu21</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/emmanueliyanu21"/>
    <language>en</language>
    <item>
      <title>JavaScript Closures: The Power Behind the Curtain</title>
      <dc:creator>Emmanuel</dc:creator>
      <pubDate>Thu, 05 Jun 2025 22:06:10 +0000</pubDate>
      <link>https://dev.to/emmanueliyanu21/javascript-closures-the-power-behind-the-curtain-4e6c</link>
      <guid>https://dev.to/emmanueliyanu21/javascript-closures-the-power-behind-the-curtain-4e6c</guid>
      <description>&lt;p&gt;In the world of JavaScript, few concepts are as powerful—and misunderstood—as closures. At first glance, they seem like a quirky side-effect of nested functions. But under the hood, closures are one of JavaScript’s most essential features, enabling private variables, callbacks, and much more.&lt;/p&gt;

&lt;p&gt;🔍 What is a Closure?&lt;/p&gt;

&lt;p&gt;A closure is created when a function remembers the variables from its lexical scope, even after the outer function has finished executing.&lt;/p&gt;

&lt;p&gt;Let’s look at a simple example:&lt;/p&gt;

&lt;p&gt;function outer() {&lt;br&gt;
  let count = 0;&lt;br&gt;
  return function inner() {&lt;br&gt;
    count++;&lt;br&gt;
    console.log(count);&lt;br&gt;
  };&lt;br&gt;
}&lt;/p&gt;

&lt;p&gt;const counter = outer();&lt;br&gt;
counter(); // 1&lt;br&gt;
counter(); // 2&lt;/p&gt;

&lt;p&gt;Here’s what’s happening:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;outer&lt;/code&gt; creates a variable &lt;code&gt;count&lt;/code&gt; and returns a function &lt;code&gt;inner&lt;/code&gt;.&lt;br&gt;
&lt;code&gt;counter&lt;/code&gt; holds the returned &lt;code&gt;inner&lt;/code&gt; function.&lt;br&gt;
Even though &lt;code&gt;outer&lt;/code&gt; has finished running, &lt;code&gt;count&lt;/code&gt; is not garbage collected.&lt;br&gt;
Why? Because &lt;code&gt;inner&lt;/code&gt; closes over the &lt;code&gt;count&lt;/code&gt; variable.&lt;/p&gt;

&lt;p&gt;This is a closure in action: a function “remembering” the environment it was created in.&lt;/p&gt;

&lt;p&gt;🎯 Why Should You Care?&lt;/p&gt;

&lt;p&gt;Closures unlock some powerful patterns in JavaScript:&lt;/p&gt;

&lt;p&gt;Data Privacy&lt;/p&gt;

&lt;p&gt;function createUser(name) {&lt;br&gt;
  let password = 'secret';&lt;br&gt;
  return {&lt;br&gt;
    getName: () =&amp;gt; name,&lt;br&gt;
    checkPassword: (input) =&amp;gt; input === password&lt;br&gt;
  };&lt;br&gt;
}&lt;/p&gt;

&lt;p&gt;const user = createUser("Alice");&lt;br&gt;
console.log(user.getName());        // "Alice"&lt;br&gt;
console.log(user.checkPassword("123")); // false&lt;/p&gt;

&lt;p&gt;You can't access &lt;code&gt;password&lt;/code&gt; directly—only through &lt;code&gt;checkPassword&lt;/code&gt;. This mimics private variables.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Callbacks and Event Handlers&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Closures keep context in asynchronous code:&lt;/p&gt;

&lt;p&gt;for (let i = 0; i &amp;lt; 3; i++) {&lt;br&gt;
  setTimeout(() =&amp;gt; console.log(i), 1000);&lt;br&gt;
}&lt;br&gt;
// Prints: 0, 1, 2 (not 3, 3, 3 — thanks to &lt;code&gt;let&lt;/code&gt; creating block-level closure)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Functional Programming&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Closures are fundamental to currying, memoization, and other advanced functional patterns.&lt;/p&gt;

&lt;p&gt;Pro Tip&lt;/p&gt;

&lt;p&gt;Closures capture &lt;strong&gt;references&lt;/strong&gt;, not values. Be careful when sharing references across multiple closures—they can mutate unexpectedly.&lt;/p&gt;

&lt;p&gt;In Summary&lt;/p&gt;

&lt;p&gt;Closures may feel tricky at first, but they’re the silent workhorses behind many of JavaScript’s most elegant patterns. Whether you're writing reusable components, asynchronous logic, or encapsulated modules—closures make it all possible.&lt;/p&gt;

&lt;p&gt;Next time you find yourself nesting a function, ask: &lt;em&gt;Am I about to create a closure?&lt;/em&gt;&lt;br&gt;
You probably are—and that’s a good thing.&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
