Tutorial: Javascript Scope
Tags: javascript, programming, codenewbie, webdev
Published: 2022-01-24 09:56:12

---
title: Tutorial: Javascript Scope
published: True
date: 2021-01-10 01:16:04 UTC
tags: ["javascript","Programming",'codenewbie', 'webdev']
canonical_url: https://www.devwares.com/blog//javascript-scope
---

## 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:**

```javascript
// 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:**

```javascript
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:**

```javascript
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:**

```javascript
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.

[![Contrast Bootstrap UI Kit](https://www.devwares.com/static/6b149e3d75b230f7e8452ace9e21bb05/587b0/banner-ad-1.png "Contrast Bootstrap UI Kit")](https://www.devwares.com/product/bootstrap-contrast-pro)


## Resources

You may find the following resources useful:


- [Get Contrast PRO](https://www.devwares.com/product/contrast-pro)
- [CSS Grid](https://www.devwares.com/blog/css-grid)
- [CSS Height And Width](https://www.devwares.com/blog/css-height-and-width)
- [CSS Flexbox](https://www.devwares.com/blog/css-flexbox)
- [CSS Combinators](https://www.devwares.com/blog/css-combinators)
- [Installation](https://www.devwares.com/docs/contrast/angular/Installation/)
- [Accordion](https://www.devwares.com/docs/contrast/angular/components/accordion/)
- [Alert](https://www.devwares.com/docs/contrast/angular/components/alert/)
- [Animation](https://www.devwares.com/docs/contrast/angular/components/animations/)
- [Autocomplete](https://www.devwares.com/docs/contrast/angular/components/autocomplete/)
- [Badges](https://www.devwares.com/docs/contrast/angular/components/badge/)
- [Box](https://www.devwares.com/docs/contrast/angular/components/box/)
- [Breadcrumb](https://www.devwares.com/docs/contrast/angular/components/breadcrumb/)
- [ButtonGroup](https://www.devwares.com/docs/contrast/angular/components/buttonGroup/)
- [ButtonToolbar](https://www.devwares.com/docs/contrast/angular/components/buttonToolbar/)
- [Button](https://www.devwares.com/docs/contrast/angular/components/buttons/)
- [Checkbox](https://www.devwares.com/docs/contrast/angular/components/checkbox/)
- [Card](https://www.devwares.com/docs/contrast/angular/components/card/)
- [Collapse](https://www.devwares.com/docs/contrast/angular/components/collapse/)
- [DropDown](https://www.devwares.com/docs/contrast/angular/components/dropdown/)
- [Footer](https://www.devwares.com/docs/contrast/angular/components/footer/)
- [InputGroup](https://www.devwares.com/docs/contrast/angular/components/inputgroup/)
- [Iframe](https://www.devwares.com/docs/contrast/angular/components/iframe/)
- [Modal](https://www.devwares.com/docs/contrast/angular/components/modal/)
- [Mask](https://www.devwares.com/docs/contrast/angular/components/mask/)
- [Multiselect](https://www.devwares.com/docs/contrast/angular/components/multiselect/)
- [Notification](https://www.devwares.com/docs/contrast/angular/components/notification/)
- [Pane](https://www.devwares.com/docs/contrast/angular/components/pane/)
- [Panel](https://www.devwares.com/docs/contrast/angular/components/panels/)
- [Progress](https://www.devwares.com/docs/contrast/angular/components/progress/)
- [Radio](https://www.devwares.com/docs/contrast/angular/components/radio/)
- [Rating](https://www.devwares.com/docs/contrast/angular/components/rating/)
- [Select](https://www.devwares.com/docs/contrast/angular/components/select/)
- [Select 2](https://www.devwares.com/docs/contrast/angular/components/select2/)
- [Slider](https://www.devwares.com/docs/contrast/angular/components/slider/)
- [Spinner](https://www.devwares.com/docs/contrast/angular/components/spinner/)
- [Switch](https://www.devwares.com/docs/contrast/angular/components/switch/)
- [Stepper](https://www.devwares.com/docs/contrast/angular/components/stepper/)
- [Icon](https://www.devwares.com/docs/contrast/angular/components/icon/)
- [Input](https://www.devwares.com/docs/contrast/angular/components/input/)
- [ListGroup](https://www.devwares.com/docs/contrast/angular/components/listgroup/)
- [Forms](https://www.devwares.com/docs/contrast/angular/forms/)
- [Navbar](https://www.devwares.com/docs/contrast/angular/navigation/navbar/)
- [Pagination](https://www.devwares.com/docs/contrast/angular/navigation/pagination/)
- [Tab](https://www.devwares.com/docs/contrast/angular/navigation/tabs/)
- [Sidebar](https://www.devwares.com/docs/contrast/angular/navigation/sidebar/)
- [Time Picker](https://www.devwares.com/docs/contrast/angular/sections/timepicker/)
- [Data Table](https://www.devwares.com/docs/contrast/angular/table/datatables/)
- [Editable Table](https://www.devwares.com/docs/contrast/angular/table/editabletable/)
- [Fixed Data Table](https://www.devwares.com/docs/contrast/angular/table/fixed_datatables/)
- [Table](https://www.devwares.com/docs/contrast/angular/table/table/)
- [Widgets](https://www.devwares.com/docs/contrast/angular/widgets/)