YouTip LogoYouTip

Js Scope

JavaScript Scope |

-- Learning is not just about technology, but also about dreams!

JavaScript Tutorial

JavaScript Tutorial JavaScript Introduction JavaScript Usage JavaScript VScode JavaScript in Chrome JavaScript Output JavaScript Syntax JavaScript Statements JavaScript Comments JavaScript Variables JavaScript Data Types JavaScript Objects JavaScript Functions JavaScript Scope JavaScript Events JavaScript Strings JavaScript String Templates JavaScript Operators JavaScript Comparisons JavaScript If...Else Statements JavaScript switch Statement JavaScript for Loop JavaScript while Loop JavaScript break and continue Statements JavaScript typeof JavaScript Type Conversion JavaScript Regular Expressions JavaScript Errors – Throw, Try and Catch JavaScript Debugging JavaScript Hoisting JavaScript Strict Mode JavaScript Common Mistakes JavaScript Forms JavaScript Form Validation JavaScript Validation API JavaScript Reserved Words JavaScript this JavaScript let and const JavaScript JSON JavaScript void JavaScript Asynchronous Programming JavaScript Promise JavaScript async/await JavaScript Coding Conventions JavaScript Quiz

JS Functions

JavaScript Function Definition JavaScript Function Parameters JavaScript Function Invocation JavaScript Closures

JS Classes

JavaScript Classes JavaScript Class Inheritance JavaScript Static Methods

JS HTML DOM

DOM Introduction DOM HTML DOM CSS DOM Events DOM EventListener DOM Elements HTMLCollection Object NodeList Object

JS Advanced Tutorial

JavaScript Objects JavaScript prototype JavaScript Number Object JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp Object

JS Browser BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript Popup Boxes JavaScript Timing Events JavaScript Cookie

JS Libraries

JavaScript Libraries JavaScript Testing jQuery JavaScript Testing Prototype

JS Examples

JavaScript Examples JavaScript Object Examples JavaScript Browser Object Examples JavaScript HTML DOM Examples JavaScript Summary

JS Reference

JavaScript Objects HTML DOM Objects JavaScript Asynchronous Programming JavaScript Static Methods

JavaScript Functions

JavaScript Events

JavaScript Scope


Scope refers to the set of variables, objects, and functions you have access to.


JavaScript Scope

In JavaScript, objects and functions are also variables.

In JavaScript, scope is the set of variables, objects, and functions you have access to.

JavaScript Function Scope: Scope is modified within functions.


JavaScript Local Scope

Variables declared inside a function are local variables and have local scope.

Local variables: Can only be accessed from within the function.

Example

// Cannot call carName variable here
function myFunction() {
    var carName = "Volvo";   // Can call carName variable here
}

Try it Β»

Because local variables are only accessible within the function, different functions can use variables with the same name.

Local variables are created when a function starts executing, and are automatically destroyed when the function finishes executing.


JavaScript Global Variables

Variables declared outside a function are global variables.

Global variables have global scope: All scripts and functions on a web page can use them.

Example

var carName = "Volvo";   // Can call carName variable here
function myFunction() {
    // Can call carName variable here
}

Try it Β»

If a variable is not declared inside a function (without the var keyword), it becomes a global variable.

In the following example, carName is inside the function but is a global variable.

Example

// Can call carName variable here
function myFunction() {
    carName = "Volvo";   // Can call carName variable here
}

Try it Β»


JavaScript Variable Lifecycle

JavaScript variables have a lifecycle when they are declared.

Local variables are destroyed after the function finishes executing.

Global variables are destroyed when you close the page.


Function Parameters

Function parameters act as local variables inside functions.


Global Variables in HTML

In HTML, the global scope is the window object. Therefore, the window object can call local variables declared without var inside a function.

Note: All global variables belong to the window object.

Example

// Can use window.carName here
function myFunction() {
    carName = "Volvo";
}

Try it Β»


Did You Know?

Note Your global variables, or functions, can overwrite variables or functions on the window object. Local variables, including the window object, can overwrite global variables and functions.

In JavaScript, local variables inside a function are generally not directly accessible from the outer scope. However, there are several ways to expose local variables within a function to the outer scope, as follows:

  • Through the global object: Inside a function, you can make a local variable globally accessible by assigning it as a property of the window object. For example, using the statement window.a = a;, you can access the value of this local variable from outside the function via window.a.
  • Defining a global variable: If you declare a variable inside a function without using keywords like var, let, or const, the variable is treated as a global variable and can be accessed outside the function. However, this practice is generally not recommended because it can lead to unintended side effects and make the code difficult to maintain.
  • Return value: You can return the value of a local variable from inside a function using a return statement, and then receive this return value outside the function. In this way, although the local variable itself is not exposed, its value can be passed to the outside through the function call.
  • Closures: The closure feature in JavaScript allows inner functions to access the local variables of outer functions. Even after the outer function has finished executing, its local variables can still be referenced by inner functions.
  • Properties and methods: Variables and functions defined in the global scope become properties and methods of the window object. Therefore, when calling them, you can omit window and use the variable or function name directly.
← Js EventsJs Json β†’