JS Variables

# Javascript Variables
            ## Declaration vs Assignment

---
            
            ## Terminology
            <dl>
              <dt>Declaration</dt>
              <dd>Creating a variable name in memory (with or without a value) using the <code>const</code> and <code>let</code> declaration keywords.</dd>
              <dt>Assignment</dt>
              <dd>When we give a variable a value using the <code>=</code> assignment operator. If a variable hasn't been assigned, it's value will be <code>undefined</code>.</dd>
            </dl>

---

## Declaration Keywords
            1. `const`: The value of a constant can't be re-assigned later:
                ```js
                // Names rarely change -> use const
                const name = 'Harry Potter';
                ```
            2. `let`: The value may be re-assigned later:
                ```js
                // Flags and indicators often change -> use let
                let systemStatus = 'idle';
                ```
            3. `var`: This keyword is the classic (ES5) method of declaring a variable and should be avoided.

---

## Which keyword to use?
            Of the three ways you can declare a new variable, we recommend this order:
            1. Try `const` first;
            2. If you get an assignment error, use `let`;
                ![Constant reassignment error](../../assets/images/errors/const-reassignment-chrome.png)
            3. Avoid the use of `var`.

---

## `const` and `let` are Block Scoped
            Blocks include `if`/`else` statements:
            ```js
            let hungry = true;

if (hungry) {
              let lunch = 'Pizza';
            }

console.log(lunch) // error: `lunch` is only available inside if statement
            ```

Instead:
            ```js
            let hungry = true;
            let lunch;

if (hungry) {
              lunch = 'Pizza';
            }

console.log(lunch) // Pizza!
            ```

---

## Naming variables
            - Use camelCase;
            - Use descriptive variable names:
                ```js
                let str = 'idle'; // Bad
                let systemStatus = 'idle'; // Good
                ```
            - Comment your variables:
                ```js
                // System status: idle | pending | active
                let systemStatus = 'pending';
                ```

---

## Key Takeaways
            - Variables are `undefined` until they are assigned a value. 
            - `const` and `let` are only used the first time you declare the variable.
            - Arrays and objects defined with `const` are still changeable, they just can't be reassigned entirely.
                ```js
                const hobbies = ['pinball', 'coding', 'disc golf'];
                hobbies[1] = 'programming'; // no error
                ```
            
            ---

## Further resources
            - [Storing the information you need — Variables](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables)
            - Video: [Differences Between Var, Let, and Const](https://www.youtube.com/watch?v=9WIJQDvt4Us) by Web Dev Simplified