All About Variables

A variable is a “named storage” for data. We can use variables to store goodies, visitors, and other data.
To create a variable in JavaScript, use the let keyword.
```
let message;
message = 'Hello!';

alert(message);
```

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

let message = 'Hello!'; // define the variable and assign the value

alert(message); // Hello!

We can also declare multiple variables in one line

let user = 'John', age = 25, message = 'Hello';

// or

let user = 'John';
let age = 25;
let message = 'Hello';

Variable Declaration

In JavaScript, there are three ways to declare variables. var, let, and const. Each has different properties and scopes, and understanding their differences is important for writing efficient and error-free code.
var (Oldest)
- Scope: Function-scoped (not block-scoped).
- Hoisting: Variables declared with var are hoisted to the top of their scope and initialized with undefined. This means they are available for use before their actual declaration in the code, but their value will be undefined until the line where they are defined is reached.
- Re-declaration: Can be re-declared within the same scope without causing an error.
```
var x = 10;
var x = 20;  // No error, x is now 20
```
- Use case: var was used in older JavaScript before let and const were introduced in ES6. Its function-scoped nature can lead to bugs and unintended behavior, especially in loops or asynchronous code.
```
function test() {
  if (true) {
    var x = 10;  // function-scoped
  }
  console.log(x);  // x is accessible here, prints 10
}

test();
```
let (ES6)
- Scope: Block-scoped. A variable declared with let is only accessible within the block it is defined in (like inside an if statement or loop).
- Hoisting: Similar to var, let is hoisted, but it is not initialized. This results in a "temporal dead zone" from the start of the block until the declaration is encountered.
- Re-declaration: Cannot be re-declared within the same block, but can be updated.
```
let y = 10;
// let y = 20;  // Error: y has already been declared
y = 20;        // This works, y is now 20
```
- Use case: let is preferred for variables that may need to be reassigned and is block-scoped to avoid issues with variable hoisting or unintended scope pollution.
```
function test() {
  if (true) {
    let y = 10;  // block-scoped
  }
  console.log(y);  // Error: y is not defined
}

test();
```
const (ES6)
- Scope: Block-scoped (just like let).
- Hoisting: Like let, const is hoisted but not initialized, meaning it's also in the "temporal dead zone" until it's declared.
- Re-declaration/Mutation: Variables declared with const cannot be reassigned or re-declared. However, this applies to the binding, not the value. For objects and arrays, the properties or elements inside can be mutated, but the variable cannot be reassigned to a new object or array.
```
const z = 10;
// z = 20;  // Error: Assignment to constant variable.

const arr = [1, 2, 3];
arr.push(4);  // This works: [1, 2, 3, 4]
```
- Use case: const is ideal for variables that should not be reassigned, like configuration values or constants.
```
function test() {
  const z = 10;
  // z = 20;  // Error: z cannot be reassigned
}

test();
```

Hoisting

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables, classes, or imports to the top of their scope, prior to execution of the code.
Hoisting is not a term normatively defined in the ECMAScript specification. The spec does define a group of declarations as HoistableDeclaration, but this only includes function, function*, async function, and async function* declarations. Hoisting is often considered a feature of var declarations as well, although in a different way. In colloquial terms, any of the following behaviors may be regarded as hoisting,
- Being able to use a variable's value in its scope before the line it is declared. ("Value hoisting")
- Being able to reference a variable in its scope before the line it is declared, without throwing a ReferenceError, but the value is always undefined. ("Declaration hoisting")
- The declaration of the variable causes behavior changes in its scope before the line in which it is declared.
- The side effects of a declaration are produced before evaluating the rest of the code that contains it.
The four function declarations above are hoisted with type 1 behavior; var declaration is hoisted with type 2 behavior; let, const, and class declarations (also collectively called lexical declarations) are hoisted with type 3 behavior; import declarations are hoisted with type 1 and type 4 behavior.
Some prefer to see let, const, and class as non-hoisting, because the temporal dead zone strictly forbids any use of the variable before its declaration. This dissent is fine, since hoisting is not a universally-agreed term. However, the temporal dead zone can cause other observable changes in its scope, which suggests there's some form of hoisting:

Variable Naming Rules

There are two limitations on variable names in JavaScript
- The name must contain only letters, digits, or the symbols $ and _ .
- The first character must not be a digit.
```
let userName;
let test123;
```
When the name contains multiple words, camelCase is commonly used. That is words go one after another, each word except first starting with a capital letter - myVeryLongName.
What’s interesting – the dollar sign '$' and the underscore '_' can also be used in names. They are regular symbols, just like letters, without any special meaning.
```
let $ = 1; // declared a variable with the name "$"
let _ = 2; // and now a variable with the name "_"

alert($ + _); // 3
```