JavaScript - SPLessons

JavaScript Scope

Chapter 13

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

JavaScript Scope

JavaScript Scope

shape Introduction

JavaScript Scope is defined as the set of variables, objects, and functions that are to be accessed. JavaScript supports function scope, which allows the scope to change inside the functions. JavaScript Scope allows a variable to change as per the requirement of the user.

shape Description

JavaScript Scope determines the existence of a variable. If the JavaScript Scope rules are not followed, they are not accessible outside that program. There are two kinds of variables based on scope, they are:

Local Variables

shape Description

The variables declared in a block of code are called as “Local Variables”. The scope of the local variable is within the block or a function only.

  • Local variables cannot be accessed by other blocks.
  • Local variables will be represented with the same name in different functions, as they are recognized by the function in which they are declared.

To define a variable as local to the scope, it is important to use the var keyword. When a variable is defined inside a function using var, variable will be destroyed as soon as the function exits.

shape Examples

<!Doctype html>
<html>
	<head>
		<title>JavaScript Tutorials</title>
		<script type="text/javascript">
			function helloWorld()
			{
			//greeting is locally declared
			var greeting = "Hey!!";
			greeting = greeting + " Please subscribe if you like our tutorials";
			document.write(greeting);
		
			}
			helloWorld();
			
			//greeting variable cannot be accessed as it is local variable
			document.write(greeting);	
		</script>
	</head>
	
	<body>
	
	</body>
	
</html>

In the above example, greeting is local variable and cannot be accessed outside the function. So, write() function cannot print the result again.

Output

Global Variables

shape Description

The variables declared inside a program and outside the functions are called as “Global Variables”. The scope of the global variable exists throughout the program.

  • Global variables can be used anywhere in the program.
  • Once the global variable value is changed, the block that uses needs to change the variable value.
  • These variable values can be even used by other programs also.

All the functions and scripts can access global variables. Once the page is closed, all the global variables will be destroyed. If a variable is declared without using “var”, that variable will become a global variable.

Even if a value is assigned to a variable that has not been declared, then that variable automatically becomes global, even if it it is present inside the function.

shape Examples

<!Doctype html>
<html>
	<head>
		<title>JavaScript Tutorials</title>
		<script type="text/javascript">
			function helloWorld()
			{
			//greeting is globally declared
			greeting = "Hey!!";
			greeting = greeting + " Please subscribe if you like our tutorials";
			document.write(greeting);
		
			}
			helloWorld();
			//greeting variable can be accessed here also
			document.write("</br>",greeting);
			
		</script>
	</head>
	
	<body>
	
	</body>
	
</html>

In the above example, greeting is not declared using var keyword and hence can be used globally. The output will be printed twice.
Output

shape More Info

Global variable names can be taken by a local variable. If one value is changed, it does not effect the value of other variable. If the variable value is changed inside the function, the local variable gets modified if it exists. Global variable gets modified if the variable value is changed outside the function.

var splessons = “This is from global variable”;

function hello()
{
var splessons = “This is from local variable”;
document.write(splessons};
}

//This line will modify global greeting variable
splessons + = “!!!”;

hello();
document.write(splessons);

Sometimes, variable hoisting and giving the same name to the local & global variable can cause unexpected behavior.

hello();
function hello()
{

document.write(splessons);
var splessons = “Hello from local variable”;

}

Due to variable hoisting, at run time the above program will look like

var greeting = “Hello from local variable”;
hello();
function hello()
{

var splessons;
document.write(splessons);
splessons = “Hello from local variable”;

}


Summary

shape Key Points

  • JavaScript Scope states variable existence.
  • Local variables can be accessed only within a block or function.
  • Global variables can be declared and accessed anywhere.