or lesson 3 of Learn

JavaScript Object Oriented Programming concepts.

In the first lab we talked about what are JavaScript objects, in the 2nd lab we talked about

Prototype.

In this lab

will talk about something called as

JavaScript Closures.

In this 16 minutes of video

will first talk about

the basic concept of Closures in JavaScript.

In the remaining part of the video

will talk about how JavaScript Closures

helps us to implement

proper Object Oriented Programming concept

in JavaScript Language.

JavaScript Closures are

Stateful Functions.

Means what?

When we create a function in JavaScript

by default it is

Stateless.

Let us say, we create a function here called as Counter

and create a

variable

inside the function called as

counter.

and increment the variable.

If we call this function over here

if we run this

this is the first call, it shows 1.

if click

again the second call show 1.

In short

this call of the counter

has a different state than this call of the counter.

When a function or a method runs

it creates a running memory.

All these variables like counter etc...

gets created on running memory called as Stack.

The counter variable gets allocated on the Stack

It gets incremented,

displayed and then released.

It happens for the first time.

When we run for the second time a new running memory is created.

The first one is then disallocated.

On stack when any variable is created

the function is executed,

the variable is created then released.

Lot of times

we want

the functions and the variable should stay in the memory.

For example, we want

everytime we call the counter we want

the value to get incremented.

In other words,

we want this variable to be remembered.

One of the things which can come to our mind is

why don't we create a variable

globally?

If run this

the variable is created globally on the browser.

What is the problem

with the approach of creating the variables globally.

One of the rule of good programming is

modules, functions, methods. They should be self contained.

They should be isolated self contained modules.

If we going to have such kind of global variables and they are accessed by the counter function, we can have problems.

If there is some other function called as MyCounter.

It is also incrementing the same variable then we can have unwanted

errors or unwanted defects.

When we talk about modular programming

we want the module to be self contained, they should be isolated, they should be a single unit.

This variable should be private .

It should have a different instance all together.

That's where JavaScript Closures comes into picture.

Closures

helps us to achieve

isolated

stateful

functions.

To write a closure

a Closure is a function inside a function.

One function encloses an other function.

Will create a method called as Increment.

This method

will return back.

A closure is

a function

inside a function.

This

function

is

enclosed

inside

the other function.

Say here

var x= Counter

then

x.Increment

Again we can create a different instance.

or a different isolated memory.

This is the first time we are calling and this is the second time.

Both of them are different isolated memory.

Here

it should show the value 1 and here it should show the value 2.

Here it should the value 1 because this is a different instance.

In every call it is remembering the local variable.

In reality when we are doing projects

what is the use of such isolated stateful functions or a closures.

If we put in one single sentence

Closures

helps to implement Object Oriented Programming concept in JavaScript in a very neat way.

How JavaScript Closures helps to achieve that.

Cut this code out here

and paste it right down below to see the later.

Put this as a comment.

This code of Counter was only to understand the basic concept of Closures.

How can we use this stateful function to create

proper

object oriented programming in JavaScript.

Some of the principles of Object Oriented Programming is

Abstraction.

Abstraction says

show only what is necessary.

Second principle is Encapsulation.

Encapsulation says

hide complexity.

Then we have

Inheritance

Parent child

relationship.

then we have Polymorphism

which says

depending on situations, the object will behave differently.

How are these principles

implemented

by Closures.

First will start with Abstraction and Encapsulation.

Let us say we want to create

a Customer

object.

In the Customer object

we have some properties

the CustomerName property,

CustomerCode property

we can have

some

Validate function

and so on.

We have one function here

which says

DbConnect

this connects to database and

get some data.

In the validate

method

we are calling the DbConnect first then doing some

validations.

By default

we have

made

all

the things

private. In other words, we have implemented

Encapsulation.

Whatever is the complexity we have hidden it.

Abstraction says

show only what is necessary. What is needed to be shown to the end user, we have to him the CustomerName property,

CustomerCode,

Validate method

but we don't want to show the DbConnect method.

This is

Encapsulated

We don't want

the person who is consuming the component

to connect to DB.

It is done internally by the validate function.

Now will implement

Abstraction

In the return

we want

the CustomerName to be public.

When we are making things public

will call them with some user name.

Internally this is

_CustomeName but from outside we want people to call it by CustomerName.

When

anybody sets a property to CustomerName or a value to CutomerName

internally it will store it in _CustomerName.

If we call to CustomerCode

internally it will set to CustomerCode.

In the same we if we call Validate

internally it will call

Validate.

In the return

we have not given DbConnect

DbConnect cannot be call from

outside.

Because of Closures

we can implement

proper Object Oriented Programming concept because this is a closure a self contained object

that's make the good module.

We have a Customer,

an object here.

These are the private

things

and these are

public or abstraction which we want

the developer who is consuming the component to know about it.

We can start using

the self contained customer object.

The self contained customer object

is clean

it is not

confusing with the Global Variables.

It is completely isolated.

We have a very beautiful object here

which is following abstraction, Encapsulation

it is self contained.

To implement inheritance

we need to set

the prototype objects.

For Abstraction, Encapsulation

will use Closures. This implemented by Closures.

This is implemented by Prototype

We can do proper object oriented programming in JavaScript.

Polymorphism

depending on situations the object should change the behavior.

JavaScript is a dynamic language

there is not any polymorphism or rather

there is always polymorphism

Any variable can become of any data type.

We can say var cust = new customer. This points to the

parent at some moment of time

and the same customer can appoint towards

Customer child.

When we talk about polymorphism in JavaScript

it is

by default

the behavior of JavaScript.

Because of closures

because of

self contained

function which is tied up to an environment

at that time

we are able to achieve proper object oriented programming concept.

Closure is a function inside a function. This is Customer and the _Validate

is the closure inside it.

Closures are isolated stateful functions. Because of that

we can implement abstraction, encapsulation,

we can implement proper object oriented programming concepts

using closers.

In this video we were trying to understand what exactly are JavaScript Closures.

In the next video we are going to discuss about very very important thing called as

IIFE(Immediately Invoked Function Expression).

When we talk about good object oriented programming

one of the thing is we want to

put the components into modules like in C# and Java we have something called as namespaces.

In the next video will talk about

how immediately invoke function expression

helps to implement namespaces

in JavaScript.

Thank you very much