JavaScript Function Closures
Tags: javascript, node, tutorial, webdev
Published: 2021-02-18 21:40:02

[![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613713524919/0GDCUBUQX.png)](https://www.sitepoint.com/?ref=osagiebello&utm_source=osagiebello)

---
A global variable in the global scope can also be used in a local scope. This means expressions in a local scope can reach out to variables in a global scope.

See the example below:

```js
const name = 'Bello'; // global variable

const outerFunc = () => {
    console.log(`My name is ${name}.`); 
     // global variable in a local scope
};

const outer = outerFunc(); 
outer; // My name is Bello. => global variable
```

Below is another example:

```js
const outerFunc = () => {
  const outerScope = "outer scope";
  
  const innerFunc = () => {
    console.log(outerScope);
  };

  // console.log( innerFunc() );
  return innerFunc()
};

const outer = outerFunc();
outer; // outer scope
```

Let's omit the parenthesis &mdash; `return innerFunc` not `return innerFunc()`.

With **closure**, a global variable can be made local.

See the example below:

```js
const outerFunc = () => {
  const outerScope = "outer scope";
  
  const innerFunc = () => {
    const outscopeInLocalScope = outerScope;
    console.log(outscopeInLocalScope);
  };

  return innerFunc;
};

const outer = outerFunc();
outer; // [Function: innerFunc]
```

`innerFunc` function has access to both its own scopes (e.g variables `outscopeInLocalScope`) and the outer scope (e.g  variables `outerScope`). The function in closure above is `innerFunc`.

> Closure makes the `innerFunc()` have access to the `outerFunc`, but the `outerFunc()` has no access to the `innerFunc`. 

`[Function: innerFunc]` is returned because the `innerFunc` function has to be returned from the `outerFunc` function before being executed - `outerFunc()()`.

```js
// outerFunc()();

const outer = outerFunc();
outer(); // outer scope
```

Check out the alternative way to return a closed function (any function though) `return innerFunc...` below:

```js
const outerFunc = () => {
  const outerScope = "outer scope";

  let innerFunc;
  return innerFunc = () => { 
    const outscopeInLocalScope = outerScope;
    console.log(outscopeInLocalScope);
  };

};

const outer = outerFunc();

outer; // [Function: innerFunc]
outer(); // outer scope
```

---
### Helper Nested Function
The helper function helps prevent scope pollution. For example, it prevents duplicate variables in a global scope (global namespace) and makes your code more organized, maintainable, and easier to read. If bugs arise, it becomes easier to debug. 

Let's pass arguments to parameters:

```js
const outerFunc = x => {
  const a = x;

  const innerFunc = y => { 
    const b = y;
    return a * b;
  };

  return innerFunc;
};

const helperFunc = () => {
  const outer = outerFunc(4);
  outer; // [Function: innerFunc]
  console.log( outer(3) ); // outer scope
};

helperFunc(); // 12 
```

The helper function above is the same as below:

```js
const helperFunc = () => {
  const outer = outerFunc(4)(3);
  console.log(outer); 
};

helperFunc(); // 12 
```

We can pass arguments to the parameters as well in the `helperFunc` function.

```js
const helperFunc = (i, o) => {
  const outer = outerFunc(i); // i = a
  outer; // [Function: innerFunc]
  console.log( outer(o) ); // i * o => o = b
};

helperFunc(3, 4); // 12
```

The helper function above is the same as below:

```js
const helperFunc = (i, o) => {
  const outer = outerFunc(i)(o);
  console.log(outer); 
};

helperFunc(3, 4); // 12 
```

**Happy coding**

---

[![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613713705217/uiPmj9ciw.png)](https://buymeacoffee.com/techstackmedia)

---

[![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613713646252/GDDSdqXof.png)](https://www.datacamp.com/?tap_a=82040-4385c0&tap_s=1301289-aaa316)