DONATE  
MENU
JAVASCRIPT
AJAX
JSON
HTML

JavaScript Tutorials

INTRODUCTION

» Introduction to JavaScript

» Practice IT Editor

» JavaScript Example

» JavaScript Placement

» JavaScript Syntax

» JavaScript Statements

» JavaScript Input

» JavaScript Output

» JavaScript Comments

» JavaScript Variables

» Variables' Scope

» JavaScript Operators

» JS Expressions & Concatenation

» JavaScript Data Type

» JavaScript Numbers

» Number Object

» JavaScript Strings

» String Object

» JavaScript Booleans

» Boolean Object

» JavaScript Functions

» JavaScript Arrays

» Array Object - Properties

» Array Object - Methods

» JavaScript Objects

» JavaScript Undefined

» JavaScript Nulls

CONDITIONAL TESTING

» If Statement

» If Else Statement

» JavaScript Ternary Operator

» Switch Statement

LOOPS

» For Loops

» While Loops

» Break & Continue

» For...In Loops

» do...while Loop

FUNCTIONS

» JavaScript Functions

» Creating Functions

» Functions' Parameters

» Functions' Arguments

» Function Invocation

» The Return Keyword

» The Arguments Object

» Callback Functions

» Arrow Functions

ARRAYS

» JavaScript Arrays

» Creating Arrays

» Accessing Arrays

» Looping Arrays

» Multi - dimensional Arrays

OBJECTS

» JavaScript Objects

» Creating Objects

» Prototype Definition

» Accessing Objects

» The this Keyword

AJAX

» Introduction to AJAX

JSON

» Introduction to JSON

JAVASCRIPT DATES

» The Date Object

» Date Methods

» Timing (SetInterval & SetTimeout)

MATH OBJECT

» Math Object

» Math Methods

HTML / JS DOM

» DOM Introduction

» Accessing HTML Elements in DOM

» Get And Change Elements' Contents & Values

» Change Styling - DOM CSS

» DOM Attributes

» JavaScript Event Listeners

» DOM Event Listeners

» JS Events

MISCELLANEOUS

» JS Strict Mode

» JavaScript Hoisting

» JavaScript let keyword

» Reserved Keywords

» JS Best Practices

» JavaScript vs ECMAScript

JAVASCRIPT EXAMPLES

» JavaScript Calculator

.. » JavaScript » Introduction » Variables' Scope
Share Tweet WhatsApp

Variables' Scope

A variable scope is the "life span of a declared variable". It is how long it takes before a declared variable with whatever value it may holds dies. A variable scope can also be said to be the extent to which we can use declared variables. The longer they live, the more possibility of being able to use and assign values to them. Base on scope, JavaScript variables can be categorized into two namely, 1. Global Variables 2. Local Variables GLOBAL VARIABLES A global variable is a variable that can be used across all programs of our webpage or script once declared. You can access global variables, assign values to them and use their values(if any) just anywhere on a webpage or external JavaScript file after their declaration. EXAMPLE
<!DOCTYPE html>
<html>
<script>
var x = 50;
//x can be used here
</script>
<head>
<script>
//x can be used here
</script>
</head>
<script>
//x can also be used here
</script>
<body>
<script>
//x can also be used here
</script>
</body>
<script>
//x can also be used here
</script>
</html>
<script>
//x can also be used here
</script>
<!DOCTYPE html>
<html>
<script>
var num = 5;
</script>
<head>
</head>
<body>
</body>
<script>
var sum = num + 2;
alert(sum);
</script>
</html>

Copy PRACTICE IT

LOCAL VARIABLES Local variables are basically all variables declared inside a function including the function parameters that cannot be used anywhere else except inside the function they were declared. In simpler terms, local variables only exists in the function where they were declared. They die off once a function finishes execution. They cannot be used anywhere else except inside that function.
<!DOCTYPE html>
<html>
<script>
//x can not be used here unless it is declared
function myFunction(){
var x = 50;
//x exists and lives only in this function and can only be use here
}

function func2(){
//x can not be used here unless it is declared
}

//x can not be used here unless it is declared
</script>
<head>
<script>
//x can not be used here unless it is declared
</script>
</head>
<script>
//x can not be used here unless it is declared
</script>
<body>
<script>
//x can not be used here unless it is declared
</script>
</body>
<script>
//x can not be used here unless it is declared
</script>
</html>
<script>
//x can not be used here unless it is declared
</script>
<script>
function myFunc(){
var msg = "Hello World"; //Local Variable
}

alert(msg); //Cannot be use here
</script>

Copy PRACTICE IT

In the above, trying to use a local variable even in the <script> element where it was declared in a function won't produce any results because it is not recognized. It exists only in the function.
<script>
function myFunc(){
var msg = "Hello World"; //Local variable
}

var msg = "Hello World"; //Global variable

alert(msg); //Can now be use
</script>

Copy PRACTICE IT

NOTE:
  • Global variables can be used inside a function.
  • var x; //global variable
    function newFunc(){
    //x can be use here
    }
  • If a value is assigned to an undeclared variable in a function, it becomes a global variable when the function is invoked.
    <script>
    function myList(){
    msg = "New List"; //msg not declared. It becomes a global variable
    }
    
    myList(); //invokes function
    //msg can now be use here
    alert(msg);
    </script>

    Copy PRACTICE IT

Variable scope doesn't necessarily mean being able to access the value of a variable, it means being able to assign a value to an already declared variable and also use its value if any. You might have noticed that you can assign values to a variable that was not declared with the var keyword and JavaScript will work fine.
x = 5;
//x was not declared with the var keyword but yet, we can still perform JavaScript operations with it. 
That is because of the "not too strict" nature of JavaScript but then, there is what we call "The JavaScript strict mode" where you can actually understand the importance of variables' scope. SUMMARY
  1. A variable scope is how long a variable can stay alive for our use.
  2. Variables can either be global or local in JS.
  3. Global variables can be use across the whole webpage or script. This means we can assign values to them without necessarily needing to declare them again and we can also use their values if any.
  4. Local variables are the variables declared inside a function including parameters. Their existence or recognition is inside the function only.
  5. You may not understand the importance of variables' scopes until you are writing codes under JavaScript strict mode where you must declare a variable before it can be use or a value assigned.
Take a short quiz on Variables' Scope.
Ask a question or tell us if Variables' Scope is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode