1.23 Skill builder: Variable scope

Visible variables and invisible variables

You can define a variable in one of the following ways:

Variables can only be seen inside the code block in which they are defined. This means:

  1. Global variables: Variables defined outside a function are visible everywhere
  2. Local variables: Variables defined inside a function can only be seen inside that function
  3. Local variables: Variables defined inside a loop can only be seen inside that loop
  4. If you redefine a variable again, the new version of that variable will be seen inside that block, and the old version will still exist outside! ( HolySmokes! )

Global variables

Global variables are typically used by beginners until they figure out function pipelines.

Reading a global variable outside any functions

Global variables are declared at the top of the program outside of the functions.


	var testVar = 'foo';
	
	console.log( testVar );
	
	
			

Reading a global variable inside a function

Global variables can be seen inside all program functions.


	var testVar = 'foo';
	
	function testFunction() {
		console.log( testVar );
	}
		
	
			

Local variables

Local variables are a cleaner way to code. Function pipelines use local variables instead of global variables.

Reading a local variable inside a different function

Local variables can only be seen inside the same function in which they are defined. They cannot be seen inside other functions.


	function functionOne () {
		var testVar = 'foo';
	}

	function functionTwo () {
		console.log( testVar );
	}
	
	
			

Check the Javascript console to see what happened...

Reading a local variable that has already been defined globally

Local variables will clobber global variables if redefined.


	var testVar = 'foo';
	
	function testFunction() {
		var testVar = 'bar'; // yikes - testVar has been redefined
		
		console.log( testVar )
	}
		
	
			

Reading a global variable that has been redefined locally

Local variables will clobber global variables if redefined. But the global version will still work, but as a separate variable with the same name! Reusing the same variable names is confusing and should be avoided.


	var testVar = 'foo';
	
	testFunction();
	
	console.log( testVar );
	
	function testFunction() {
		var testVar = 'bar'; // yikes - testVar has been redefined
	}
		
	
			

Reading a local variable that has been redefined inside a programming block

Local variables will behave unpredictably if redefined inside a for, if, or then block.


	function testFunction() {	// outer code block
		var testVar = 'foo'; 
		
		for (i=1; i<10; i++) {	// inner code block
			var testVar = 'bar'; 
		}
		
		console.log( testVar );
	}
		
	
			

The assignment

There is no written assignment for this exercise

Do it with style

Avoid global variables whenever possible

Variables can cause problems in your code if you use them both globally and locally. When you were a beginner, it made sense to define all your variables globally and program from there.

But you are now growing out of your programming infancy and your skills are growing up. This means that you are moving towards using function pipelines and local variables for each function. The trade off is that you also have to get rid of nearly every global variable as well.

Avoiding global variables creates cleaner code that is less confusing to create and understand.