In the previous chapter, we covered the basics of JavaScript such as variables, functions, loops, and events. In this chapter, we will delve into more advanced JavaScript topics such as closures, prototypes, and the Document Object Model (DOM). Additionally, we will also introduce concepts such as event handling and asynchronous programming.
ALSO READ: Complete JavaScript course by Mohit Chaprana

Closures in JavaScript
A closure is a function that retains access to variables in its parent scope even after the parent function has returned. A closure allows you to access variables that are not in the current scope. Closures are created when a function is declared inside another function. The inner function has access to the variables of the outer function, even after the outer function has returned.
Here is an example of a closure:
function outerFunction() { var outerVariable = 'I am outer variable'; function innerFunction() { console.log(outerVariable); } return innerFunction; } var closure = outerFunction(); closure(); // logs 'I am outer variable'
In this example, the innerFunction
has access to the outerVariable
even after the outerFunction
has returned. This is because the innerFunction
is a closure and retains access to the variables in its parent scope.
Closures can be used to create private variables and functions. For example:
function counter() { var count = 0; return { increment: function() { count++; }, getCount: function() { return count; } }; } var myCounter = counter(); myCounter.increment(); console.log(myCounter.getCount()); // logs 1
In this example, the count
variable is a private variable that can only be accessed through the increment
and getCount
functions. This is because these functions are closures that retain access to the count
variable even after the counter
function has returned.
Prototypes in Advanced JavaScript
JavaScript is a prototypal language, meaning that objects inherit properties and methods from prototypes. A prototype is an object that acts as a template for creating other objects. When an object is created, it automatically inherits properties and methods from its prototype.
Here is an example of a prototype in JavaScript:
var person = { name: 'John Doe', sayHello: function() { console.log('Hello, my name is ' + this.name); } }; var student = Object.create(person); student.name = 'Jane Doe'; student.sayHello(); // logs 'Hello, my name is Jane Doe'
In this example, the person
object is the prototype for the student
object. The student
object inherits the name
and sayHello
properties and methods from the person
object. When we change the name
property of the student
object, it does not affect the name
property of the person
object.
Prototypes are a powerful feature of JavaScript that allow us to create objects that inherit properties and methods from other objects. This can help us to create more efficient and reusable code.
The Document Object Model (DOM) in Advanced JavaScript
The Document Object Model (DOM) is a tree-like structure that represents an HTML document. The DOM provides a way for JavaScript to access and manipulate the elements of an HTML document.
Each element in an HTML document is represented as a node in the DOM. Nodes can be elements, attributes, or text. In the DOM, elements are parent nodes and can have child nodes.
Here is an example of how to access an element in the DOM:
<div id="myDiv">Hello, World!</div> var myDiv = document.getElementById('myDiv'); console.log(myDiv.innerHTML); // logs 'Hello, World!'
In this example, we are using the document.getElementById()
method to access the div
element with the id
of myDiv
. We then access the innerHTML
property of the div
element to get its content.
In addition to accessing elements, you can also manipulate elements in the DOM. For example:
var myDiv = document.getElementById('myDiv'); myDiv.innerHTML = 'Goodbye, World!';
In this example, we are changing the content of the div
element by setting its innerHTML
property to a new value.
Event Handling
Event handling is the process of handling events such as user actions, system events, and network events in JavaScript. Events can be anything from a user clicking a button, to a page finishing loading, to an element being updated.
JavaScript provides a number of event-handling methods, including:
addEventListener()
: Attaches an event listener to an element.removeEventListener()
: Removes an event listener from an element.dispatchEvent()
: Dispatches an event to an element.preventDefault()
: Prevents the default action of an event.
Here is an example of event handling in JavaScript:
var button = document.getElementById('myButton'); button.addEventListener('click', function() { console.log('Button was clicked'); });
In this example, we are using the addEventListener()
method to attach a click event listener to the button with the id
of myButton
. When the button is clicked, the event listener will log a message to the console.
Event handling is an important aspect of JavaScript programming, as it allows us to respond to user actions and system events in real-time.
Asynchronous Programming
Asynchronous programming is a programming paradigm that allows multiple operations to be executed concurrently. In JavaScript, asynchronous programming is used to execute code in the background without blocking the main thread.
JavaScript provides several methods for performing asynchronous operations, including:
setTimeout()
: Executes a function after a specified number of milliseconds.setInterval()
: Executes a function repeatedly after a specified number of milliseconds.Promise
: Represents the result of an asynchronous operation.
Here is an example of asynchronous programming in JavaScript:
function slowFunction() { console.log('Starting slow function'); setTimeout(function() { console.log('Slow function finished'); }, 1000); } console.log('Starting program'); slowFunction(); console.log('Program finished');
In this example, the slowFunction
is executed asynchronously, so it does not block the main thread. The program logs a message to the console when it starts, then when the `slowFunction is finished, and finally when the program is finished.
The output of this program would be:
Starting program Starting slow function Program finished Slow function finished
As you can see, the slowFunction
is executed in the background and does not block the main thread. This allows for smoother and more responsive user interfaces in web applications.
In addition to using setTimeout
and setInterval
, promises can also be used for asynchronous programming in JavaScript. A promise is an object that represents the result of an asynchronous operation.
Here is an example of using promises in JavaScript:
function slowFunction() { return new Promise(function(resolve, reject) { console.log('Starting slow function'); setTimeout(function() { console.log('Slow function finished'); resolve(); }, 1000); }); } console.log('Starting program'); slowFunction().then(function() { console.log('Program finished'); });
In this example, the slowFunction
returns a promise that resolves when the asynchronous operation is complete. The program logs a message to the console when it starts, and then another message when the promise is resolved and the program is finished.
The output of this program would be:
Starting program Starting slow function Program finished Slow function finished
As you can see, promises provide a more elegant and structured way of handling asynchronous operations in JavaScript.
In conclusion, this chapter has covered advanced topics in JavaScript including closures, prototypes, the Document Object Model, event handling, and asynchronous programming. These concepts are essential for building complex and dynamic web applications. Understanding these concepts will help you become a more skilled and versatile JavaScript programmer.
ALSO READ: Complete JavaScript course by Mohit Chaprana
ALSO, READ:
- Tips for debugging and troubleshooting code.
- Top programing languages & tools to learn in 2023
- Techniques for optimizing and improving code performance
- Strategies for staying motivated and productive while coding
- Best practices for user interface design in 2023
- 10 important things that every developer should remember
- Latest tools & trends in software development industry
- Five programming languages that freshers should consider learning in 2023
- The benefits of using a DevOps approach to software development.
- The benefits of serverless architecture for web and mobile apps.
- What are Low-code and no-code platforms?
- The importance of performance optimization in software development
- Mastering Time Management: Tips and Strategies for Achieving Success and Happiness in All Areas of Life
GIPHY App Key not set. Please check settings