# Mastering JavaScript Variables: A Comprehensive Tutorial

# Variable

Most of the time, a JavaScript application needs to work with information. Here are two examples:

1. An online shop – the information might include goods being sold.
    
2. A chat application – the information might include users, messages, and groups and more.
    

Variables are used to store this information.

There are three different ways to make a variable, which in JavaScript we refer to as declaring a variable. They are:

1. var
    
2. let
    
3. const
    

## let

A variable is a “named storage” for data. To create a variable in JavaScript, use the `let` keyword.

**Value = undefined**

A variable declared without a value will have the value `undefined`.

The variable `message` will have the value `undefined` after the execution of this statement:

The statement below creates (in other words: *declares*) a variable with the name “message”:

```javascript
let message;
```

Now, we can put some data into it by using the assignment operator `=`:

```javascript
// store the string 'Hey' in the variable named message
let message; 
message = 'Hey';
```

The string is now saved into the memory area associated with the variable. We can access it using the variable name:

```javascript
let message; 
message = 'Hey!'; 
alert(message); // shows the variable content
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675183859261/ae6405ac-9ca2-4ecb-8790-dbfd05a52a9f.png align="center")

To be concise, we can combine the variable declaration and assignment into a single line:

```javascript
let message = 'Hey!'; // define the variable and assign the value
alert(message);
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675183786209/e5853b1e-0c78-44fc-a7b2-386feab2d174.png align="center")

> ‼️**Note:** We can also declare multiple variables in one line
> 
> ---
> 
> ```javascript
> let user = 'Diksha', age = 25, message = 'Hey';
> ```
> 
> That might seem shorter, but we don’t recommend it. For the sake of better readability, please use a single line per variable.

The multiline variant is a bit longer, but easier to read:

```javascript
let user = 'Diksha'; 
let age = 20; 
let message = 'Hey';
```

You can also define multiple variables in this multiline style:

```javascript
let user = 'Diksha', 
age = 20, 
message = 'Hey';
```

Technically, all of these variations accomplish the same task. So, everything comes down to personal preference.

### A real-life analogy

If we think of a "variable" as a "box" holding data with a uniquely labelled sticker on it.

For instance, the variable `message` can be imagined as a box labeled `"message"` with the value `"Hey!"` in it:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675186390258/3e00ae97-f098-4d24-89d6-8b046f770c66.png align="center")

We are free to put any value in the box and to make as many changes as we like:

```javascript
let message;
message = 'Hey';
message = 'Hola'; // value changed
alert(message);
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675187375948/b3d53499-696c-40fc-a3b9-046de41c19eb.png align="center")

**Result:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675187463133/0a4f509b-70f3-4813-b261-0536475c7e29.png align="center")

### Copy data from one variable to another

We can also declare two variables and copy data from one into the other.

```javascript
let greet = 'Hey there!';
let message;

// copy 'Hey there!' from greet into message
message = greet;

// now two variables hold the same data
alert(greet);
alert(message);
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675187695760/00f3beee-69b9-4207-9466-e57e18d445f4.png align="center")

> ❌ A repeated declaration of the same variable is an error
> 
> ---
> 
> ```javascript
> let message = "one";
> // repeated 'let' leads to an error
> let message = "two"; 
> // SyntaxError: 'message' has already been declared
> ```
> 
> ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675188089277/b09cd5c6-224f-4541-9e01-b8339279d8c3.png align="center")
> 
> Therefore, we should declare a variable only once and then refer to it without `let`

### Variable naming

There are three limitations on variable names in JavaScript:

* Names can contain letters, digits, underscores, and dollar signs.
    
* Names must begin with a letter.
    
* Names can also begin with `$` and `_` .
    

> ⚠️ **Note:**
> 
> * Variable names are case-sensitive (y and Y are different variables).
>     
> * Certain terms such as reserved words in JavaScript shouldn't be used to name variables.
>     

Examples of valid names:

```javascript
let userName;
let word123;
```

When the name contains multiple words, [camelCase](https://en.wikipedia.org/wiki/CamelCase) is commonly used. For example: `webDevelopment`.

The dollar sign `'$'` and the underscore `'_'` can also be used in names.

## Const

To declare a constant (unchanging) variable, use `const` instead of `let`:

```javascript
const myName = 'Sahil';
```

> **❌ Note:** Variables declared using `const` are cannot be reassigned. An attempt to do so would cause an error:
> 
> ---
> 
> ```javascript
> const myName = 'Sahil';
> myName = 'sahilChandravanshi'; // error, can't reassign the constant!
> ```
> 
> ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675191476920/ee0c3254-b156-469a-a051-6a5a9fbbe6d2.png align="center")

When a programmer is sure that a variable will never change, they can declare it with `const` .

> ## var
> 
> ⚠️ In older scripts, you may also find another keyword: `var` instead of `let`
> 
> ---
> 
> JavaScript
> 
> ```javascript
> var message = 'Hey';
> ```
> 
> The `var` declaration is similar to `let`. It also declares a variable but in a slightly different, “old-school” way.
> 
> There are slight differences between `let` and `var` but most of the time we can replace `let` with `var` and vice-versa. For now, these differences do not matter for us yet. I'll cover these differences in detail in a later article.

## Name things right

The meaning of a variable name should be unambiguous and describe the information it contains.

Variable names can quickly distinguish between code written by a newbie developer and code produced by an expert developer.

Some good-to-follow rules are:

* Use human-readable names like `userName` or `shoppingCart`.
    
* Stay away from abbreviations like `a`, `b`, `c`, unless you really know what you’re doing.
    
* Make names maximally descriptive and concise.
    

If you have any difficulties or questions, please make a comment.