Global and Local variables in JavaScript
Global Variables
Global variables are those defined outside of any function, making them accessible from anywhere within the script. Regardless of the keyword used for declaration, they all behave similarly and possess a global scope. Even variables declared without a keyword inside a function are considered global.
Local Variables
Local variables are defined within functions in JavaScript. They are confined to the scope of the function that defines them and cannot be accessed from outside. Attempting to access local variables outside their defining function results in an error.
How to use variables
- The scope of a variable or function determines what code has access to it.
- Variables that are created inside a function are local variables, and local variables can only be referred to by the code within the function.
- Variables created outside of functions are global variables, and the code in all functions has access to all global variables.
- If you forget to code the var keyword in a variable declaration, the JavaScript engine assumes that the variable is global. This can cause debugging problems.
- In general, it’s better to pass local variables from one function to another as parameters than it is to use global variables. That will make your code easier to understand with less chance of errors.
Example 1: In this example, we will declare variables in the global scope so that they can be accessed anywhere in the program.
let petName = 'Rocky' // Global variable
myFunction()
function myFunction() {
fruit = 'apple'; // Considered global
console.log(typeof petName +
'- ' +
'My pet name is ' +
petName)
}
console.log(
typeof petName +
'- ' +
'My pet name is ' +
petName +
'Fruit name is ' +
fruit)
Output
string- My pet name is Rocky string- My pet name is RockyFruit name is apple
Explanation: We can see that the variable petName is declared in the global scope and is easily accessed inside functions. Also, the fruit was declared inside the function without any keyword so it was considered global and was accessible inside another function.
Example 2: In this example, we will declare variables in the local scope and try to access them at different scopes.
myfunction();
anotherFunc();
let petName;
function myfunction() {
let petName = "Sizzer"; // local variable
console.log(petName);
}
function anotherFunc() {
let petName = "Tom"; // local variable
console.log(petName);
}
console.log(petName);
Output
Sizzer Tom undefined
Explanation: We can see that the variable petName is declared in global scope but not initialized. Also, the functions are accessing the inner variable where each function has its own value for the variable petName.
Where to use which variable
- It’s tempting to resort to global variables for their apparent simplicity, but they often lead to issues. Since any function can modify a global variable, it’s easy to unintentionally alter them or make errors like misspelling variable names, especially in larger applications. Debugging such issues can become cumbersome.
- In contrast, local variables offer a solution by reducing the risk of naming conflicts. Different functions can use identical names for local variables without causing clashes. This minimizes errors and debugging challenges. Therefore, except for a few specific cases, it’s advisable to encapsulate code within functions to ensure variables remain local.
- Remember, misspelling a variable name that’s already declared results in a new global variable being created. To prevent this, always declare variables with keywords and ensure they’re declared before use in the code.
Note: Use local variables whenever possible. Always use the var keyword to declare a new variable before the variable is referred to by other statements.