Question:

What is Scope?

Answer:

Scope refers to the visibility of a variable from within sections of your code. There are 2 types of scope: global and local.

Question:

What is global scope?

Answer:

Variables that are declared outside of functions are visible throughout your entire code, and therefore referred to as global. Global variables are usually declared at the top of your JavaScript file, with comments explaining their uses. Reminder: you should always use the var keyword when declaring variables.

Question:

What is local scope?

Answer:

A variable declared with the var keyword inside a function is only visible inside that function. Other functions do not know anything about that variable, and cannot "see" it. Therefore, other functions cannot access that variable, and if you try to use a variable that is not visible, your code will not work properly.

Variables declared without the var keyword are global. That is why you should always use the var keyword to declare variables, to avoid the confusion of using one variable when you think you are using another.

Question:

What if a function has a local variable with the same name as a global variable?

Answer:

That function will use the local variable.

Question:

Are function parameters global or local?

Answer:

Even though you do not use the var keyword with parameters inside the parentheses of your function header, the parameters are local. So if one function has a parameter named var1, and another function tries to inspect the value of var1, you would get an error because var1 does not exist in that other function.

Question:

When should I use one or the other?

Answer:

Most variables should be local - inside functions, keeping functions autonomous and independent from each other. That way, if you need to make a change to a function, you do not have to worry about breaking other functions. Also, if your function manipulates a variable, you do not have to worry about another function using that same variable and depending on the old value before your function changed it.

Global variables are often used as constants - variables whose values do not change once they are set. For example, your code might need to know what type of browser is in use. A global variable could be assigned the browser type, then the rest of your code could check that variable and perform accordingly. Another example of a global variable might be an array of students that would be used by several functions... one to calculate totals, one to calculate percentage of possible points, and another function to display the results.

Checkpoint

You should know 6.2

1. What are global and local variables
2. How to declare global and local variables
3. That you get an error if you try to access a variable that is not "visible"
4. That you should mostly use local variables

Questions 6.2

1. If I declare a variable inside a function with the var keyword, is it local or global?
2. If I declare a variable inside a function without the var keyword, is it local or global?

Exercise 6.2

1. Use the var keyword to declare a global variable named: sum
   
   
2. Define a function named calcDif, that takes 2 parameters: nbr1, and nbr2
3. Without using the var keyword, the body of calcDif should declare a (global) variable named: dif
4. Assign the value of nbr1 minus nbr2 to dif
   
   
5. Define another function named calcSum, that takes 2 parameters: nbr1, and nbr2
6. Using the var keyword, the body of calcSum should declare a (local) variable named: sum
7. Assign the value of nbr1 plus nbr2 to sum
   
   
8. Define another function named testScope, that takes no parameters
9. Instructions for code inside the body of your testScope function are provided in the web develolper toolbox section
   
   
10. Call your calcDif function, passing the literals 5 and 3
11. Call your calcSum function, passing the literals 5 and 3
12. Call your testScope function

web developer toolbox 6.2

Add a link to the JavaScript menu

• Open menu_js.html in your favorite editor
• Below your Functions category, (create a new a tag inside a new dd tag to) add a link: Scope
• href should be: javascript/functions_scope.html

Add a new JavaScript page

• In the javascript folder, open aaa_template.html in your favorite editor, and save-as: functions_scope.html
• Below the comment "edit category name", change text from template to: Functions
• Below the comment "edit publish and update dates", change both dates to the current date

Update the new page

• Below the comment "edit company name, page title, and page description", change:
  • Company Name to: your name
  • Template to: Scope
  • ...template to: Global and local scope
• Update the comments section:
  • <dt>Scope</dt>
  • <dd>Variables declared outside a function are global: visible to all code</dd>
  • <dd>Variables declared without the var keyword inside a function are global</dd>
  • <dd>Variables declared with the var keyword inside a function are local: only visible inside that function</dd>
• Insert html inside the wxHtmlResults div:
  • <p id="p1"></p>
  • <p id="p2"></p>

Add JavaScript below the line of asterisks following the text:
** BEGIN DEVELOPER JAVASCRIPT SECTION

• Complete the instructions for Exercise 6.2
• Inside your testScope function, assign the value of dif to the innerHTML of p1
• Inside your testScope function, assign the value of sum to the innerHTML of p2

Open menu_js.html in your browser and click on your new link

Click on the Run javascript button to test your code