Closure in Javascript
Tags: javascriptfundamentals, interviewing
Published: 2020-05-18 00:00:00

---
slug: 'closure-in-javascript'
title: 'Closure in Javascript'
draft: false
published: true
path: '/posts/closure-in-javascript'
layout: post
description:
tags:
  - 'Javascript fundamentals'
  - 'Interviewing'
category: Coding
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/4f40d80big6b5d0ik5e5.jpg
date: '2020-05-18'
author: 'Marek Dano'
---

The closure in javascript is one of the main concepts which each javascript developer needs to grasp. It is also used in the interviews for frontend developers.

So, what's the **closure**?

We can understand it by great definition from [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) documentation where stays:

> A closure is a special kind of object that combines two things: a function, and the environment in which the function was created. The environment consists of local variables that were in-scope at the time that the closure was created.

In other words, the closure is created when a function is returned from another function and that returned function has access to the outer function's scope. The closure is created at the function creation time.

Let say we have a function of

```javascript
function getFamily(familyName) {
  return firstName => `${firstName} ${familyName}`
}
```

We can create a `family` function by calling the function `getFamily` and passing `familyName` into that function. Calling the function `getFamily` returns a function. The closure is created with the scope defined. The scope contains `familyName`. If we call that returned function (closure) from `getFamily`, in our case `family` and passing `firstName` into that function we can get the full name. The reason we can get `familyName` is that we have access to the outer scope of the returned function where `familyName` exists. Remember the variable `familyName` was created when the function of `family` was created. Hopefully what I said now makes sense when we execute the following code

```javascript
const family = getFamily('Smith')

const fatherFullName = family('John')
const motherFullName = family('Emma')

console.log(fatherFullName) // John Smith
console.log(motherFullName) // Emma Smith
```

The closure is also used when we want to keep the variables defined in the function private, not to be accessible outside of the scope. The variables can then be modified inside of the scope. Consider this extended code

```javascript
function getFamily(familyName) {
  const familyMembers = []

  function addMember(firstName) {
    familyMembers.push(firstName)
  }
  const listOfFamilyMembers = () => familyMembers.toString()
  const getFamilyName = () => familyName

  return {
    addMember,
    listOfFamilyMembers,
    getFamilyName,
  }
}
```

The variable of `familyMember` won't be accessible. It can be called or modified in the functions which are defined in the scope when the function of `getFamily` is created. If we want `familyMember` to be accessible from `getFamily` we can add it to the object returned from that function, but in this case, the variable won't be private anymore.

Now please follow the code and let me know what will be logged. Try to execute the code in your head first before testing it in your preferred javascript console.

```javascript
const family = getFamily('Smith')
family.addMember('John')
family.addMember('Emma')
family.addMember('Josh')

console.log(family.listOfFamilyMembers()) // ???
console.log(family.getFamilyName()) // ???
```