JavaScript Closures

JavaScript Closures

• A closure in JavaScript is created when a function is defined inside another function.
• It retains access to variables from its parent function's scope, even after the outer function has finished executing.
• Closures allow a function to "remember" its creation environment, including variables in scope at that time.
• Lexical scope defines variable and function accessibility based on their location within the source code. A closure maintains a reference to its lexical environment, capturing the state of the outer function at its creation.

Closure Example

• A function (createCounter()) creates another inner function that uses variables declared in the higher-level function.
• The inner function is a closure.
• The inner function can access and modify variables in the outer function's scope.

Closure Use with Constructors

• JavaScript uses functions, called constructor functions, to create objects.
• A constructor function is defined, and the new keyword creates a new object from that function.
• Inside the function, this is used to attach properties and methods to the new object.

Example of Constructor Function

• The code defines a function called Person that takes name and age as arguments.
• Inside the function, this.name = name; and this.age = age; attach the name and age to the new object.
• person1 and person2 are new objects created from the Person function.
• console.log(person1.name) //Output: Alice
• console.log(person2.age) //Output: 35

Closures and Private Members

• Using closures, private members can be created within constructor functions, enforcing data encapsulation and preventing direct access to sensitive information.
• Private data is typically held within a const or let that is enclosed in the constructor's scope.
• A getter function can be used to access private data, this prevents direct access.

Unique Identifier Function

• Closures and Immediately Invoked Function Expressions (IIFEs) can be used to create a unique identifier function.
• The function generates a unique id each time it's called
• The code maintains a counter within a closure that increments each time a unique id is needed.

Document Object Model (DOM)

• The DOM is a programming interface that makes it possible to access and manipulate HTML elements.
• The browser creates a hierarchical tree representation of the HTML document when the page loads.
• The components are called nodes.

DOM Node Types

• HTML elements, text, comments, are types of nodes.
• Each node has a nodeType property indicating its type.

Accessing DOM Elements

• document.getElementById() takes an element ID to find that element within the HTML document.
• document.getElementsByTagName() takes a tag name to find all the elements with that tag.
• document.querySelector() selects the first element matching a CSS selector.
• document.querySelectorAll() selects all elements matching a CSS selector.

Additional DOM Selectors

• Class Selectors allow you to select elements with a given class.
• ID Selectors allows you to select elements based on their unique ID.
• Attribute Selectors let you choose elements with specific attributes.