Closures
A closure is simply a function inside another function that has access to the outer function variable. Now, this definition sounds pretty much straightforward but the real magic is created with the scope. The inner function (closure) can access the variable defined in its scope (variables defined between its curly brackets), in the scope of its parent function, and in the global variables. Now here you need to remember that the outer function can not have access to the inner function variable (we have already discussed this in the scope concept). Let’s take an example and understand it in a better way.
Example: Below is the example of closure.
const first = () => {
const greet = 'Hi';
const second = () => {
const name = 'john';
console.log(greet);
}
return second;
}
const newFunc = first();
newFunc();
Output:
Hi
In the above example, the inner function ‘second()’ is a Closure. This inner function will have access to the variable ‘greet’ which is part of the outer function ‘first()’ scope. Here the parent scope won’t have access to the child scope variable ‘name’.
Now the question is why do we need to learn closures? What’s the use of it? Closures are used when you want to extend behavior such as passing variables, methods, or arrays from an outer function to an inner function. In the above example, second() extends the behavior of the function first() and also has access to the variable ‘greet’.
JavaScript is not pure object-oriented language but you can achieve object-oriented behavior through closures. In the above example, you can think of const ‘newFunc’ as an Object having properties ‘greet’ and ‘second()’ a method as in an OOP language.
Here you need to notice that after the first() statement is executed, variables inside the first() function will not be destroyed (even if it has a ‘return’ statement) because of closures as the scope is kept alive here and the child function can still access the properties of the parent function. So closures can be defined in simple terms as “a function run, the function executed. It’s never going to execute again but it’s going to remember that there are references to those variables so the child scope always has access to the parent scope.”
7 JavaScript Concepts That Every Web Developer Should Know
JavaScript is Everywhere. Millions of web pages are built on JavaScript and it’s not going anywhere at least for now. On one side HTML and CSS give styling to the web pages but on the other side, it’s the magic of JavaScript that makes your web page alive. Today this language is not just limited to your web browser. You can also use it for server-side applications. Isn’t it cool to use a single language for both client-side and server-side applications? A single language fulfills both of the purposes and this is the main reason TONs of job postings are there for JavaScript developers in the tech industry.
According to the Stack Overflow Developer Survey 2019, JavaScript is the #1 programming language. The language is widely used by 95% of all websites Whether it’s a small startup or a big company, most of them are working on some kind of website or an app that requires a good knowledge of this language. A lot of frameworks and libraries are there for JavaScript. These frameworks and libraries can be easily learned if your JavaScript fundamentals are clear. A lot of concepts are confusing and overwhelming for developers but a good knowledge of these concepts will help you in the long run. Frameworks and libraries come and go but the fundamentals always remain the same. It’s easy to build any kind of application and learn any framework and libraries if the fundamentals are clear. Also, it will help you in interviews as well. Let’s discuss some of the basic concepts of JavaScript which are important to learn for any JavaScript developer. Become a good front-end developer with w3wiki JavaScript Foundation – Self-Paced and learn all the aspects of web development with ease.
These are the 7 concepts:
Table of Content
- Scope
- IIFE (Immediately Invoked Function Expression)
- Hoisting
- Closures
- Callbacks
- Promises
- Async & Await
Contact Us