HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

JavaScript Scope

❮ Previous Next ❯

Scope determines the accessibility (visibility) of variables.

JavaScript has 3 types of scope:

  • Block scope
  • Function scope
  • Global scope

Block Scope

Before ES6 (2015), JavaScript only had two types of scopes: Global Scope and Function Scope.

ES6 brought in two significant new words in JavaScript: let and const.

In JavaScript, these two keywords create a block scope.

Variables that are declared within curly braces { } cannot be reached or used from outside of that specific block.

Example

{
  let x = 2;
}
// x can NOT be used here

Variables created using the var keyword do not have block scope.

Variables that are declared within a set of curly braces { } can be used or retrieved from outside that specific block of code.

Example

{
  var x = 2;
}
// x CAN be used here

Local Scope

Variables that are declared inside a JavaScript function are limited to that specific function and are referred to as local variables.

Variables that are local have function scope, meaning they can only be accessed from inside the function.

Local variables are only acknowledged within their specific functions. This means that you can use variables with the same name in different functions without any conflicts.

Variables inside a function are made when the function begins and removed when the function finishes.

Function Scope

In JavaScript, each function makes its own space called scope.

Variables created within a function cannot be used or seen from outside that function.

Variables created using var, let, and const behave similarly when declared within a function.

They all have Function Scope:

function myFunction() {
  var carName = "Volvo";   // Function Scope
 }
function myFunction() {
  let carName = "Volvo";   // Function Scope
 }
function myFunction() {
  const carName = "Volvo";   // Function Scope
 }

Global JavaScript Variables

A variable declared outside a function, becomes GLOBAL.

A global variable has Global Scope:

All scripts and functions on a web page can access it. 

Global Scope

Variables declared outside any function, known as global variables, have a scope that extends throughout the entire program.

Variables labeled as Global in JavaScript can be used from any part of the program.

Variables created using var, let, and const are very much alike when declared outside a block of code.

They all have Global Scope:

var x = 2;       // Global scope
let x = 2;       // Global scope
const x = 2;       // Global scope

JavaScript Variables

In JavaScript, objects and functions are also variables.

The scope determines where in the code you can access variables, objects, and functions.

Automatically Global

When you give a value to a variable that hasn't been declared, it turns into a global variable automatically.

This code example creates a global variable called carName. It remains global, even if a value is assigned to it within a function.

Strict Mode

All modern browsers support running JavaScript in Strict Mode.

In Strict Mode if you don't declare a variable, it won't become global automatically.

Global Variables in HTML

In JavaScript, when we talk about the global scope, we're referring to the overall JavaScript environment.

In HTML, the global scope is the window object.

Variables declared globally using the var keyword are associated with the window object.

Variables created using the let keyword as global do not become part of the window object.

Warning

Don't make global variables unless you really need them.

Your global variables (or functions) might replace window variables (or functions).
Any function, even the window object, can replace your global variables and functions.

The Lifetime of JavaScript Variables

The life of a JavaScript variable begins when it's first declared.

Local variables inside a function disappear once the function finishes.

In a web browser, when you close the browser window or tab, global variables get deleted.

Function Arguments

Inside functions, the parameters you provide work like local variables.
❮ Previous Next ❯