Tutorial: JavaScript Variables
Tags: javascript, programmimg, webdev, codenewbie
Published: 2022-01-18 07:42:54

---
title: Tutorial: JavaScript Variables
published: True
date: 2021-01-10 01:16:04 UTC
tags: ["javascript", "programmimg", 'webdev', 'codenewbie']
canonical_url: https://www.devwares.com/blog//javascript-variables
---

## JavaScript Variables

In JavaScript, variables are data storage containers. A variable must be declared before it can be used in a JavaScript program. The var keyword is used to declare variables, as shown below.

### Code:

- var x = 5;
- var y = 6;
- var z = x + y;

Variables x, y, and z are declared with the var keyword in this example. As a result of the above example, you can anticipate:

- x holds the value 5
- y holds the value 6 and
- z holds the value 11.

Declaring all variables at the start of a script is good programming practice.

## JavaScript Identifiers

All variables in JavaScript must have distinct names. Identifiers are the names given to these distinct names. Short names (like x and y) or more descriptive names can be used as identifiers (age, sum, totalVolume). The following are the general guidelines for naming variables (unique identifiers):

- Letters, numerals, underscores, and dollar signs can all be used in names.
- Each name must start with a letter.
- Names can also start with the letters \$ or .
- Case is important while typing names (y and Y are different variables)
- Names containing reserved terms (such as JavaScript keywords) are not allowed.

There are a lot of variables in a single statement.

Many variables can be declared in a single sentence. Start the statement with var and use a comma to separate the variables:

### Code:

```javascript
var person = 'John Doe',
  carName = 'Volvo',
  price = 200;

```

A declaration can span multiple lines:

### Code :

```javascript
var person = 'John Doe',
  carName = 'Volvo',
  price = 200,
  Value = undefined;

```

Variables are frequently declared in computer programs without a value. The value can be calculated or provided later, such as user input. The value of a variable declared without a value is undefined. Following the execution of this statement, the variable carName will have the value undefined:

### Code :

```javascript
var carName;

```

## Re-Declaring JavaScript Variables:

A JavaScript variable's value will not be lost if you re-declare it. Following the execution of these statements, the variable carName will still have the value "Volvo".

### Code:

```javascript
var carName = 'Volvo';
var carName;

```

Strings can also be added, but they will be concatenated:

### Code:

```javascript
var x = 'John' + ' ' + 'Doe';

```

If you put a number in quotes, it will be interpreted as a string and concatenated with the rest of the numbers.

## JavaScript Dollar Sign $

Remember that identifiers (names) in JavaScript must begin with:

- An alphabetical letter (A-Z or a-z)
- A dollar symbol "$"
- A dollar symbol "$"

Because the dollar sign is treated as a letter in JavaScript, identifiers containing \$ are valid variable names.

### Code:

```javascript
var $$$ = 'Hello World';
var $ = 2;
var $myMoney = 5;

```

Although the dollar symbol is not widely used in JavaScript, professional programmers frequently use it as an alias for a JavaScript library's main function.

The main function $ in the JavaScript library jQuery, for example, is used to select HTML elements. $("p"); in jQuery indicates "select all p elements".

## JavaScript Underscore \_

Because the underscore is treated as a letter in JavaScript, identifiers containing are valid variable names.

### Code:

```javascript
var _lastName = 'Johnson';
var _x = 2;
var _100 = 5;

```

Although using the underscore as another name for private (hidden) variables is uncommon in JavaScript, it is a regular practice among skilled programmers.

[![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)

Contrast React Bootstrap PRO is a Multipurpose pro template, UI 
kit to build your next landing, admin, SAAS, prelaunch, etc project with a clean, well documented, well crafted template and UI components. [Learn more about Contrast Pro](https://www.devwares.com/product/contrast-pro)



## Resources

You may find the following resources useful:

- [Get Contrast PRO](https://www.devwares.com/product/contrast-pro)
- [Tutorial: JavaScript Operator](https://www.devwares.com/blog/javascript-operator)

- [Tutorial: JavaScript Scope](https://www.devwares.com/blog/javascript-scope)

- [Tutorial: Sorting In Javascript](https://www.devwares.com/blog/javascript-sort)

- [Tutorial: JavaScript statement, syntax and comments](https://www.devwares.com/blog/javascript-sortjavascript-statement)

- [Contrast Installation](https://www.devwares.com/docs/contrast/react/Installation/)
- [Charts](https://www.devwares.com/docs/contrast/react/chart/)
- [Accordion](https://www.devwares.com/docs/contrast/react/components/accordion/)
- [Alert](https://www.devwares.com/docs/contrast/react/components/alert/)
- [Animation](https://www.devwares.com/docs/contrast/react/components/animations/)
- [Autocomplete](https://www.devwares.com/docs/contrast/react/components/autocomplete/)
- [Badges](https://www.devwares.com/docs/contrast/react/components/badge/)
- [Box](https://www.devwares.com/docs/contrast/react/components/box/)
- [Breadcrumb](https://www.devwares.com/docs/contrast/react/components/breadcrumb/)
- [ButtonGroup](https://www.devwares.com/docs/contrast/react/components/buttonGroup/)
- [ButtonToolbar](https://www.devwares.com/docs/contrast/react/components/buttonToolbar/)
- [Button](https://www.devwares.com/docs/contrast/react/components/buttons/)
- [Card](https://www.devwares.com/docs/contrast/react/components/card/)
- [Carousel](https://www.devwares.com/docs/contrast/react/components/carousel/)
- [Checkbox](https://www.devwares.com/docs/contrast/react/components/checkbox/)
- [Collapse](https://www.devwares.com/docs/contrast/react/components/collapse/)
- [DropDown](https://www.devwares.com/docs/contrast/react/components/dropdown/)
- [Footer](https://www.devwares.com/docs/contrast/react/components/footer/)
- [Icon](https://www.devwares.com/docs/contrast/react/components/icon/)
- [Iframe](https://www.devwares.com/docs/contrast/react/components/iframe/)
- [Input](https://www.devwares.com/docs/contrast/react/components/input/)
- [InputGroup](https://www.devwares.com/docs/contrast/react/components/inputgroup/)
- [ListGroup](https://www.devwares.com/docs/contrast/react/components/listgroup/)
- [Mask](https://www.devwares.com/docs/contrast/react/components/mask/)
- [Modal](https://www.devwares.com/docs/contrast/react/components/modal/)
- [Multiselect](https://www.devwares.com/docs/contrast/react/components/multiselect/)
- [Notification](https://www.devwares.com/docs/contrast/react/components/notification/)
- [Pane](https://www.devwares.com/docs/contrast/react/components/pane/)
- [Panel](https://www.devwares.com/docs/contrast/react/components/panels/)
- [Progress](https://www.devwares.com/docs/contrast/react/components/progress/)
- [Radio](https://www.devwares.com/docs/contrast/react/components/radio/)
- [Rating](https://www.devwares.com/docs/contrast/react/components/rating/)
- [Select](https://www.devwares.com/docs/contrast/react/components/select/)
- [Select 2](https://www.devwares.com/docs/contrast/react/components/select2/)
- [SmoothScroll](https://www.devwares.com/docs/contrast/react/components/smoothscroll/)
- [Slider](https://www.devwares.com/docs/contrast/react/components/slider/)
- [Spinner](https://www.devwares.com/docs/contrast/react/components/spinner/)
- [Stepper](https://www.devwares.com/docs/contrast/react/components/stepper/)
- [Switch](https://www.devwares.com/docs/contrast/react/components/switch/)
- [Navbar](https://www.devwares.com/docs/contrast/react/navigation/navbar/)
- [Pagination](https://www.devwares.com/docs/contrast/react/navigation/pagination/)
- [Sidebar](https://www.devwares.com/docs/contrast/react/navigation/sidebar/)
- [Tab](https://www.devwares.com/docs/contrast/react/navigation/tabs/)
- [Date Picker](https://www.devwares.com/docs/contrast/react/sections/datepicker/)
- [FileUploader](https://www.devwares.com/docs/contrast/react/sections/fileuploader/)
- [Time Picker](https://www.devwares.com/docs/contrast/react/sections/timepicker/)
- [Editable Table](https://www.devwares.com/docs/contrast/react/table/editabletable/)
- [Table](https://www.devwares.com/docs/contrast/react/table/table/)
- [Data Table](https://www.devwares.com/docs/contrast/react/table/datatables/)
- [Widgets]
(https://www.devwares.com/docs/contrast/react/widgets/)
- [Forms]
(https://www.devwares.com/docs/contrast/react/forms/)