codescracker


javascript

JavaScript Variable Scope



« Previous Tutorial Next Tutorial »


In JavaScript, the variable's scope is basically the region of your program where it is defined. There are following two types of variable scopes available in JavaScript:

JavaScript Local Variables

A local variable in JavaScript, will be visible only that function where it is declared. Here is an example of local variable in JavaScript:

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript Variable Scope Example</title>
</head>
<body>

<p>JavaScript Local Variable Example</p>
<p id="variable_scope_para1"></p>
<script>
	variable_scope_fun1();
	document.getElementById("variable_scope_para1").innerHTML = "It will be displayed " + typeof carName;
	function variable_scope_fun1()
	{
		var carName = "Audi";
	}
</script>

</body>
</html>

Here is the sample output produced by the above local variable example in JavaScript.

javascript variable scope

Here is the live demo output of the above local variable scope example program in JavaScript.

JavaScript Local Variable Example

JavaScript Global Variables

A global variable in JavaScript, will be visible anywhere in the JavaScript program. Here is an example of global variable in JavaScript:

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript Variable Scope Example</title>
</head>
<body>

<p>JavaScript Global Variable Example</p>
<p id="variable_scope_para2"></p>
<script>
	var carName = "Audi";
	variable_scope_fun2();
	function variable_scope_fun2()
	{
		document.getElementById("variable_scope_para2").innerHTML = "It will be displayed " + carName;
	}
</script>

</body>
</html>

Here is the output produced by the above JavaScript global variable example program.

javascript global variable example

Here is the live demo output of the above global variable example in JavaScript.

JavaScript Global Variable Example

JavaScript Variable Scope Example

Here is an example of variable scope in JavaScript.

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript Variable Scope Example</title>
</head>
<body>

<p id="variable_scope_para3">It will be replaced</p>
<input type="button" onclick="variable_scope_fun3()" value="Replace" />
<script type="text/javascript">
	var variable_scope_var3 = "this is global"; // variable_scope_var3 is declared as a global variable
	function variable_scope_fun3()
	{
		var variable_scope_var3 = "this is local";  // variable_scope_var3 is declared as a local variable
		document.getElementById("variable_scope_para3").innerHTML = variable_scope_var3;
	}
</script>

</body>
</html>

Here is the output produced by the above JavaScript variable scope program. This is the initial output:

javascript variable scope example

Now click on the Replace button to change the output as shown in the following snapshot:

javascript variable scope rules local

Here is the live demo output of the above variable scope program in JavaScript.

It will be replaced


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test