JavaScript Closures: Understanding the Power Behind the Scenes 🧐

Closures are one of the most powerful features of JavaScript, but they can also be a source of confusion for many developers. In a nutshell, a closure is a function that remembers values in the enclosing scope even if they are not present in memory.

T…


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Matheus Costa

Closures are one of the most powerful features of JavaScript, but they can also be a source of confusion for many developers. In a nutshell, a closure is a function that remembers values in the enclosing scope even if they are not present in memory.

This allows us to create functions that have a private scope, and to maintain state and encapsulation in our code. Closures have some pretty neat use cases such as implementing private variables and methods, event handling, async operations. They're also fundamental to functional programming, used for implementing higher-order functions and currying.

Creating OOP with closures:

function createPerson(name, age) {
  let person = { name, age };

  return {
    getName: function() {
      return person.name;
    },
    getAge: function() {
      return person.age;
    },
    setName: function(newName) {
      person.name = newName;
    },
    setAge: function(newAge) {
      person.age = newAge;
    }
  };
}

const person = createPerson("John Doe", 30);
console.log(person.getName()); // John Doe
console.log(person.getAge()); // 30
person.setName("Jane Doe");
person.setAge(32);
console.log(person.getName()); // Jane Doe
console.log(person.getAge()); // 32

In this example, we use a closure to create a createPerson function that returns an object with private state (the person object) and public methods for accessing and modifying that state (getName, getAge, setName, and setAge). This allows us to create objects with a defined interface and private state, just like in traditional OOP.

Closures provide a powerful and flexible way to implement OOP in JavaScript, and they are widely used in many libraries and frameworks to create objects and maintain state. If you're not already familiar with closures, I highly recommend taking the time to learn and understand this important concept. 💡


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Matheus Costa


Print Share Comment Cite Upload Translate Updates
APA

Matheus Costa | Sciencx (2023-02-01T20:56:23+00:00) JavaScript Closures: Understanding the Power Behind the Scenes 🧐. Retrieved from https://www.scien.cx/2023/02/01/javascript-closures-understanding-the-power-behind-the-scenes-%f0%9f%a7%90/

MLA
" » JavaScript Closures: Understanding the Power Behind the Scenes 🧐." Matheus Costa | Sciencx - Wednesday February 1, 2023, https://www.scien.cx/2023/02/01/javascript-closures-understanding-the-power-behind-the-scenes-%f0%9f%a7%90/
HARVARD
Matheus Costa | Sciencx Wednesday February 1, 2023 » JavaScript Closures: Understanding the Power Behind the Scenes 🧐., viewed ,<https://www.scien.cx/2023/02/01/javascript-closures-understanding-the-power-behind-the-scenes-%f0%9f%a7%90/>
VANCOUVER
Matheus Costa | Sciencx - » JavaScript Closures: Understanding the Power Behind the Scenes 🧐. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/02/01/javascript-closures-understanding-the-power-behind-the-scenes-%f0%9f%a7%90/
CHICAGO
" » JavaScript Closures: Understanding the Power Behind the Scenes 🧐." Matheus Costa | Sciencx - Accessed . https://www.scien.cx/2023/02/01/javascript-closures-understanding-the-power-behind-the-scenes-%f0%9f%a7%90/
IEEE
" » JavaScript Closures: Understanding the Power Behind the Scenes 🧐." Matheus Costa | Sciencx [Online]. Available: https://www.scien.cx/2023/02/01/javascript-closures-understanding-the-power-behind-the-scenes-%f0%9f%a7%90/. [Accessed: ]
rf:citation
» JavaScript Closures: Understanding the Power Behind the Scenes 🧐 | Matheus Costa | Sciencx | https://www.scien.cx/2023/02/01/javascript-closures-understanding-the-power-behind-the-scenes-%f0%9f%a7%90/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.