JavaScript Scope

The accessibility (visibility) of variables is determined by their scope.

JavaScript Function Scope

There are two kinds of scopes in

• Local scope
• Global scope

Function scope exists in each function creates a new scope. The visibility of these variables is determined by their scope. Variables defined within a function are not available (visible) from the outside.

Local JavaScript Variables

Variables specified inside a JavaScript function are LOCAL to that function. Function variables have function scope, which means they can only be accessible from within the function.

JavaScript Code:

// code here can NOT use carName
function myFunction() {
  var carName = 'Volvo';
  // code here CAN use carName
}

Variables with the same name can be used in multiple functions because local variables are only recognized inside their functions. When a function starts, local variables are generated, and when the function ends, they are destroyed.

Global JavaScript Variables

GLOBAL is a variable declared outside of a function. The scope of a global variable is global: It is accessible to all scripts and functionalities on a web page.

JavaScript Code:

var carName = 'Volvo';
// code here can use carName
function myFunction() {
  // code here can also use carName
}

JavaScript Variables In JavaScript, objects and functions are also variables. Variables, objects, and functions can be accessed from different areas of the code depending on their scope. Automatically Global If you assign a value to an unnamed variable, it becomes a GLOBAL variable. Even if the value is assigned within a function, this code sample will declare a global variable carName.

JavaScript Code:

myFunction();
// code here can use carName
function myFunction() {
  carName = 'Volvo';
}

Strict Mode All modern browsers support JavaScript in "Strict Mode". Undeclared variables are not immediately global in "Strict Mode".

Global Variables in HTML The global scope in JavaScript refers to the entire JavaScript environment. The window object is the global scope in HTML. The window object owns all global variables.

JavaScript Code:

var carName = 'Volvo';
// code here can use window.carName.

It's best not to create global variables unless you know what you're doing. Window variables can be overwritten by global variables (or functions) (or functions). Your global variables and functions can be overwritten by any function, even the window object.

The Lifetime of JavaScript Variables A JavaScript variable's lifetime begins when it is declared. When the function is finished, the local variables are removed. When you close the browser window in a web browser, global variables are erased (or tab).

Function Arguments Inside functions, function arguments (parameters) act as local variables.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.