declare

Local and global variables in javascript



Sharing buttons:

this is part 26 of JavaScript tutorial

in this video we'll discuss local and

global variables in JavaScript in

JavaScript there are two types of

variables local variables and global

variables let's look at a few examples

here we have a function called hello

world inside this function we are

declaring a variable called greeting and

initializing that with a string hello in

the next line we are modifying its value

creating equals creating Plast

JavaScript so at this time this variable

contains hello JavaScript string and

then we are writing its value to the

document and finally we are calling the

function so when we run this we expect

the string hello' javascript to be

printed on the web page let's try and

access this variable greeting outside of

the function now this variable is

declared inside the function so the

scope of this variable is local to that

function meaning that variable is

available only inside the function but

here we are trying to access it outside

of the function let's see what's going

to happen when we run this notice that

we get this string hallo javascript

printed once on the page that's done by

the function and then we have this error

message greeting is undefined that's

basically because this variable greeting

is available only inside the function

outside the function it's not available

and that's the reason why we get

greeting is undefined error so in this

example variable greeting is a local

variable so local variables are the

variables declared within a function

these variables have local scope meaning

these are available only inside the

function that contains them local

variables are created when a function

starts and deleted as soon as the

function completes execution

what are global variables global

variables of the variables declared

outside a function global variables have

global scope meaning all scripts and

functions on the page can access them

the lifetime of a global variable starts

with its declaration and is deleted when

the page

is closed let's look at an example so

let's move this line outside of this

function so here we are declaring

greeting variable outside of this

function so greeting now is a global

variable

this means this variable will be

available to all the functions on this

page hello world should be able to

access that variable so when this

function is called it is going to change

the value that is present in this

variable and then the function is

writing its value to the document and by

calling the function here so it should

print hello JavaScript to the web page

and let's print an HTML break and then

we are accessing greeting variable again

outside of the function since it's a

global variable now it should be

available even outside the function so

when we run this we expect Hello

JavaScript string to be printed two

times so in this example this variable

greeting is a global variable so what's

a global variable a global variable is a

variable that is declared outside a

function not only that if we assign a

value to a variable that has not been

declared then it will automatically

become a global variable even if it is

present inside the function so let's

look at an example of that so I'm going

to get rid of this variable declaration

so at the moment outside of the function

we don't have greeting variable declared

and inside the function I'm not going to

use the VAR keyword instead I'm going to

directly assign a string to the variable

so in this example greeting is not

defined but we are assigning a value

directly to it so in this example this

variable greeting is going to

automatically become a global variable

so here we are writing its value you

know to the document and then notice

here we are trying to again access this

variable greeting outside of the

function and it is perfectly okay

because of the fact that you know if you

assign a value to a variable that has

not been declared it will automatically

become a global variable so when we run

this piece of code

we expect the string hello javascript to

be printed two times a local variable

can have the same name as a global

variable changing the value of one

variable has no effect on the other if

the variable value is changed inside a

function and if a local version of the

variable exists then the local variable

gets modified if the variable value is

changed outside a function then the

global variable gets modified let's look

at an example so let's define a variable

here let's call it greeting and let's

initialize that to hello from global

variable now since we have defined this

variable outside the function it's a

global variable now what I'm going to do

is declare another variable with the

same name inside the function so at the

moment we've got a global and a local

variable with the same name and inside

the function you know I'm going to

access this greeting variable and append

three question marks to it and let's

change the string here to hologram local

variable and then outside of the

function I'm going to access again the

greeting variable and then append three

exclamation marks to okay so far within

this program we have got two variables

that is greeting a local and a global

variable with the same name now remember

inside the function only local variables

has got meaning so if you try to access

or modify a variable called greeting

inside this hello world function only

the local version gets modified so this

local version of the variable contains

hello from local variable with three

question marks appended to it and then

outside of this function we also have a

global variable with the same name and

at the moment it is initialized with the

string

from global variable and here we are

again accessing greeting variable so

will the global version of this variable

be modified or will the local version be

modified outside of the function in a

global variables have meaning so only

the global variable gets modified so

hello from global variable with three

exclamation marks will be present so we

are calling the function printing the

HTML break and then we're printing the

value within the creating variable so

when this program completes execution we

expect hello from local variable with

three question marks to be printed first

and then an HTML break and then hello

from global variable with three

exclamation marks let's run this and see

if that's what we care notice that hello

from local variable hello from global

variable sometimes due to the concept of

variable hoisting and local and global

variables with the same name can cause

unexpected behavior let's look at an

example so here we have a very simple

example we have a variable called

greeting and this is a global variable

okay and that's initialized to this is

from global variable string and then we

are calling this function hello world

and that function is defined right here

so within the hello world function we

are accessing greeting variable now we

have a global variable with that name

okay and then what we are doing later in

this function is creating another

variable greeting with you know but we

on this page we already have a global

variable with that name so here in this

example we have a global and a local

variable with the same name okay and in

JavaScript this concept called variable

hoist and we already discussed what is

function hoisting function hoisting

means JavaScript moves all function

declarations to the top of the page that

concept allows us to call a function

even before that's defined okay this

code is okay because function hoisting

is cotton is going to move this function

declaration to the top of the page so we

can call the function before

it is defined the same concept is also

applicable to variables so we have a

concept called variable hoisting so what

do we mean by variable hoisting

depending on the variable scope they

will either be moved automatically to

the top of the page or to the top of the

function if it's a local variable that's

called as variable hoisting so here

notice in this function we have this

local variable greeting so at runtime

what actually happens is you know this

variable declaration will be moved to

the top of the function because that's a

local variable and at the moment we're

greeting will not be initialized to

anything because only the declaration

will be moved to the top and then we are

printing its value directly you know to

the document object since we don't have

any value defined this is going to print

this message undefined okay so do the

concept of variable hoisting and local

and global variables in this script have

the same name so a combination of this

can cause unexpected behavior you know

undefined because here our intention is

basically to print the value that is

present in this global variable and then

initialize another local variable with

this string

but then you know Java Script is going

to work slightly differently if you have

a global variable and local variable

with the same name inside of the

function only the local variable has got

meaning it will not be referencing the

global variable and because of variable

hoisting concept we get that unexpected

behavior undefined so basically so here

we have a global variable and then let's

try to call that function hello world

and let's get rid of all this code and

inside the function

so if we do this then this is perfectly

fine it's going to print that message

hello from global variable because

inside this function we don't have a

local variable of the same name so when

we access creating it level access the

global variable but the moment we

declare a global variable I mean a local

variable with the same name due to the

concept of variable hoisting at runtime

the variable declaration will be moved

to the top and because of that we get

undefined error in JavaScript braces do

not create scope if you look at the

example right here notice this other

number variable is actually declared as

part of this two braces now in many

languages like C sharp in Java breast

braces create scope but not in

JavaScript so this other number variable

in this example it's a global variable

because of the fact that braces do not

create scope in JavaScript so when I say

document or tried other number it will

be available outside of those braces as

well thank you for listening and have a

great day