Table of Contents
In last part we took a look at functions, what they do, how they do it how to create them. We learned that there are two ways to declare them. One is with “var” keyword and another is without it. Today we will continue in our exploration of functions more in-depth. First thing on the program, is to talk more about scope, which was the last thing we touched in previous part, and practice on few examples. Today’s lesson will be more practical than theoretical, so expect to see a lot of code. Let’s dive in …
Scope
Previously, we talked about global and local variables. To remind you, global variable is variable declared outside any function. This type of variable is accessible from anywhere. You can work with it and rewrite it in any moment.
JavaScript:
var stringExample = “mammal”; // global variable called stringExample containg string var numberExample = 31415; // global variable called numberExample containg integer var booleanExample = true; // global variable called booleanExample containg boolean
All of the variables above are global so you can access or rewrite them as said above.
JavaScript:
stringExample = “human”; // rewriting stringExample variable booleanExample = false; // rewriting booleanExample variable confirm(numberExample); // pop-up window with content of numberExample variable alert(stringExample); // pop-up window with content of stringExample variable console.log(booleanExample); // content of booleanExample variable print to console
On the other hand, local variables are variables defined inside functions. These variables can be accessed or changed only through function they were defined in. If you try to do it outside the function, JavaScript will return an error. The reason for it is simple. Everything created inside function exist only when this function exist – when you call it. When you are not calling the function, its content does not exist, therefore cannot be accessed. Let’s take a look at few examples
JavaScript:
function trial() {
var stringEx = “JavaScript”; // local variable called stringEx
var numEx = 0.659; // local variable called numEx
var booEx = true; // local variable called booEx
}
console.log(booEx); // error – booEx is not defined (doesn't exist)
console.log(stringEx); // error – booEx is not defined (doesn't exist)
Funny thing happen when you try to change some variable from the outside function. Let’s say we want to change the content of stringEx and booEx.
JavaScript:
function trial() {
var stringEx = “JavaScript”; // local variable called stringEx
var numEx = 0.659; // local variable called numEx
var booEx = true; // local variable called booEx
}
console.log(stringEx); // error – stringEx is not defined
console.log(numEx); // error – numEx is not defined
stringEx = “nuclear fusion”;
booEx = false;
If you expect the JavaScript to return error or do nothing, you are wrong. What will JavaScript do is to keep the old variables untouched and create two new variables with suggested content.
JavaScript:
function trial() {
var stringEx = “JavaScript”; // local variable called stringEx
var numEx = 0.659; // local variable called numEx
var booEx = true; // local variable called booEx
}
stringEx = “nuclear fusion”;
booEx = false;
console.log(stringEx); // result - “nuclear fusion”
console.log(booEx); // result – false
If you want to test that variables inside the function has the same content, use console.log() method (inside this function) to print the data into console and then call the function.
JavaScript:
function trial() {
var stringEx = “JavaScript”;
var numEx = 0.659;
var booEx = true;
console.log(stringEx); // result - “JavaScript”
console.log(booEx); // result – true
}
trial();// calling of “trial” function
As you can see, variables inside function indeed contain same values. You don’t have to worry about collision of your variables. They exist independently. To make it easier to understand, imagine the function like a closed box. You cannot see or use anything inside it until you open it (call it in JS).
However, you can still access global variables inside the function and change them.
JavaScript:
var sayFalse = false; // global variable – accessible from anywhere
function earth() {
sayFalse = true; // changing the content of “sayFalse” variable
}
console.log(sayFalse); // result - false
earth(); // calling the function (will cause changing the global variable)
console.log(sayFalse); // result – true
If you want to keep the content of global variable same, while using the same name for another variable (not the best thing to do) inside the function, use “var” keyword for the local variable (inside function). This will lead to creating brand new variable that is independent on the global one.
JavaScript:
var sayFalse = false;
function earth() {
var sayFalse = true; // creating new variable
}
console.log(sayFalse); // result – false
earth(); // calling “earth” function
console.log(sayFalse); // result – false
Next thing you can do with functions is to create another functions inside them. For example, let’s create function “earth”. Inside this function we will create another functions called “createOcean”, “createLand” and “createPopulation”. createPopulation function will take one argument – number. Inside these functions we will declare new variables and then use console.log() method to print out their content. On the last lines, inside “earth” function, we will call our three nested functions. Outside the “earth” function we will call this function.
JavaScript:
function earth() {
function createOcean() {
var waterExist = true; // local variable waterExist
console.log("Water exist."); // will print out “Water exist.”
}
function createLand() {
var landExist = true; // local variable landExist
console.log("Land exist."); // will print out “Land exist.”
}
function createPopulation(number) {
var pop = number; // local variable pop that stores number used argument
console.log("Population is " + pop + " bill."); // will print out "Population is ... bill."
}
createOcean(); // calling createOcean function
createLand(); // calling createLand function
createPopulation(7.2); // calling createPopulation function with parameter of 7.2
}
earth(); // calling earth function
When you call the “earth” function on the last line, the result will be executing all commands inside it – creating nested functions and calling them. Inside the console, we will get:
JavaScript:
“Water exist.” “Land exist.” “Population is 7.2 bill.“
I’m not sure if we discussed concatenating of data types and variables before. Well, as you can see on line in example above – console.log(“Population is ” + pop + ” bill.”); – you can concatenate (another word to your programming dictionary) strings with variables. In fact, you can do this with any data type. Don’t forget that when you concatenate integer or float with string, it will become string.
JavaScript:
var part1 = “Hacker”; var part2 = “ broke”; var part3 = “ the code.”; console.log(part1 + part2 + part3); // result - “Hacker broke the code.” var int = 1.5; // shortcut for “integer” console.log(“Population is: ” + int + “ mil.”); // result - “Population is 1.5 mil.”
Summary
I hope that this more-in-depth post on scope helped you understand how does it work and how you can use it in your work.
In future posts, we will return to data types to explore them more. We will also take a look at various methods you can use with these individual data types.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
