Scope

Essential Question: What is the difference between a local variable and a global variable?

Mastery Objectives:

• SWBAT create functions using global and local variables.

Do now: 

Create a function called, intro. Ask the user for their name and create a local variable called firstName. Write to the console, "Hello firstName! Welcome to JavaScript." 

Assignment 1: Declare a const variable, named city set equal to 'New York City'. This variable will exist outside of the block. Inside the block, make a variable called skyscraper and set it equal to "Empire State Building'.

Below the city variable, write a function named logCitySkyline.

Inside the function, include a return statement like this:

return 'The stars over the ' + skyscraper + ' in ' + city;

Beneath the logCitySkyline() function, use console.log() to log the value of logCitySkyline() to the console.

You’ll notice that the logCitySkyline() function is able to access both variables without any problems. In the next exercise we’ll consider why would it be preferable to have one variable outside of a block and the other inside of a block.

Global Scope means that variables are declared outside the scope of a block. Local variables are located inside the block and only used inside the block.

Assignment 2: write three global variables:

• Name the first variable satellite and set it equal to 'The Moon'.

• Name the second variable galaxy and set it equal to 'The Milky Way'.

• Name the third variable stars and set it equal to 'North Star'.

Below the variables created in the previous step, write a function named callMyNightSky. Inside the function, include a return statement like this: return 'Night Sky: ' + satellite + ', ' + stars + ', and ' + galaxy;

Beneath the callMyNightSky() function, use console.log() to log the value of callMyNightSky() to the console.

You’ll notice that the function block for callMyNightSky() is able to access the global variables freely since the variables are available to all lines of code in the file.

Assignment 3: Create a function called Greetings. Create a global variable called salutation and set it equal to 'Hola'. Create a local variable in the function Greetings called Hello and set it equal to 'Bonjour'. Write salutation and Hello to the console. What happens? How can you fix this?

Assignment 4: define a function logVisibleLightWaves(). 

Within the logVisibleLightWaves() function, using const, create a variable lightWaves and set it equal to 'Moonlight'.

Within the logVisibleLightWaves() function, beneath the lightWaves variable, add a console.log() statement that will log the value of the lightWaves variable when the function runs.

Call the logVisibleLightWaves() function from outside the function.

Beneath the function call, log the value of lightWaves to the console from outside the function.

You’ll notice that it logs a ReferenceError since the variable is tied to the block scope of the function!

Global Namespace - when you create a global variable, it is stored in the global namespace. This allows you to call the variable anywhere in the program but it also fills up quickly. You need to be careful not to have too many global variables.

Assignment 5: Let’s see what happens if we create a variable that overwrites a global variable.

Inside the callMyNightSky() function, on the very first line of the function body, assign the variable stars to 'Sirius' as such:

stars = 'Sirius'; 

Outside the function, under the current console.log() statement, add another console.log() statement to log stars to the console.

You’ll notice that the global variable stars was reassigned to 'Sirius'. In other words, we changed the value of the global stars variable but it’s not easy to read what exactly happened. This is bad practice in code maintainability and could impact our program in ways we do not intend.

• This causes confusion and is bad programming practice.

Practice Good Scoping:

• It will make your code more legible since the blocks will organize your code into discrete sections.

• It makes your code more understandable since it clarifies which variables are associated with different parts of the program rather than having to keep track of them line after line!

• It’s easier to maintain your code, since your code will be modular.

• It will save memory in your code because it will cease to exist after the block finishes running.

Assignment 6: Inside the function body of logVisibleLightWaves(), beneath the region variable and before the provided console.log() statement, create an if statement that checks if the region is the 'The Arctic'. 

Inside the if block, define a new let variable lightWaves and set it equal to 'Northern Lights'. 

Beneath the variable in the if block, use console.log() to log the value of the block variable inside the if block.

Run your code and notice the output. Inside the if block console.log(lightWaves) logs the value Northern Lights to the console. Outside the if block, but still within the function, the same statement logs Moonlight to the console.

• Scope is the idea in programming that some variables are accessible/inaccessible from other parts of the program.

• Blocks are statements that exist within curly braces {}.

• Global scope refers to the context within which variables are accessible to every part of the program.

• Global variables are variables that exist within global scope.

• Block scope refers to the context within which variables that are accessible only within the block they are defined.

• Local variables are variables that exist within block scope.

• Global namespace is the space in our code that contains globally scoped information.

• Scope pollution is when too many variables exist in a namespace or variable names are reused.