🟨JavaScript variables

the storage locations of data (the "words")

Variables store values (data) to make them more compact and portable for different parts of a JavaScript program:

Statements

JavaScript statements take on a form similar to a mathematical equation (a variable gets a value)...

...but in a manner similar to an assignment (see the second line):

let x = 2 
x = x + 1
// 3

In the example above, we do not mean that x is equal to x+1 which makes no sense but that:

"x will have a value ... of the last known value of x, which is 2, and then added 1, to make 3!"

Another way of looking at this is by thinking of the single = sign as an left-facing arrow:

x <- 2
x <- x + 1

"let x be 2, then let x be 2 + 1"

Semi-colon at the end

In ES6, semi-colons (;) have become optional

• some programmers prefer to continue using them out of habit

• others just want to keep their a little cleaner!

Declarations (const and let)

Indeed, we use the keywords const and let to declare what kind of statement that we wish to make:

• const is a variable but up until the point we declare it

  • we can change its value at its line of declaration

  • ...but we cannot re-assign it at any other point in the program

• let is a variable in its truest form

  • we can change its value after its declaration at another point in the program

// we can change "100" here...
const x = 100 

// ...but we cannot change it here
x = 200 

// we can change "100" here...
let y = 100 

// ...and we can change it here because of let
y = 200

Reserved keywords

When we declare variables, we cannot use some reserved keywords as variable names, e.g.:

let let = 1

...won't work because the language won't let us use the second let as a variable name! This tries to make our code less confusing!

For a full list of reserved keywords, we have this w3schools page:

https://www.w3schools.com/js/js:reserved.aspwww.w3schools.com

Keyword var

var is a variable like let but:

• let has block scope

  • it exists only within the confines of its closest curly braces

• var has function and global scope

  • if declared inside a function, it exists only within the confines of its parent function

  • if declared outside a function, it will have global scope

  • the same var variable can also be re-declared

  • var has no block scoping

function doSomething() {
// function scope for var

    const x = 10

    if (x > 0) {
    // block scope for let
        let z = 100
        z = 200    // we can change it here
        var t = 1
    }

    // "1" (this call exists inside the function scope)
    console.log(t) 
    
    // undefined (this call exists outside the block scope)
    console.log(z) 

}

The var has largely phased out, in favour of let and const but it is still important to know when working with legacy code!

Variables with null and undefined

let x = null
let y

console.log(x) 
// null

console.log(y) 
// undefined

The console.log method prints ("logs") the output onto the console

Note that 0 does not mean the same thing as null in JavaScript:

• 0 represents a number with which we can do calculations

• null represents the intentional absence of a number

• undefined represents that we have not yet decided on a value, or even a null

Checking a variable data type (typeof keyword)

To see what the type of value a variable has, we can use the typeof keyword before a variable or value:

let x = 3.1415
console.log(typeof x)
// "number"

// special case: 
let y = null
console.log(typeof y)
// "object" (this is a bug in JavaScript!)

Naming conventions for variables

Instead of a name like x or y , we should give variables meaningful names!

JavaScript variable names also:

• should have only letters (A-Z or a-z), digits (0-9) and/or the symbols: $ and _

• should not be reserved keywords (full list on MDN)
• can contain a number, but not start with a digit

  • try to avoid numbers in variable names altogether

• have case-sensitivity

  • Price and price would theoretically refer to two different things

• follow the industry-wide convention of camelCasing:

  • begin with a lowercase letter

  • if we need additional words, we should capitalize each subsequent word e.g.

    • profilePictureFilename

JavaScript variables have dynamic types!

Unlike other languages which restrict what kind of value a variable can have, JavaScript allows variables to take in any kind of value! In this way, JavaScript has what we call dynamic typing.

For example, a variable that starts its life out as a string can later take in a number as a value, which can later mutate into a Boolean, and so on:

let dynamicThing = "Something"

dynamicThing = 2
console.log(dynamicThing)
// output: 2 (number)

dynamicThing = true
console.log(dynamicThing)
// output: true (Boolean)

JavaScript hoisting

Hoisting happens when variable declarations move to the top of their respective scopes!

• Functions get both their declarations and contents hoisted to the top of code

  • so we can access functions even though the function call may happen earlier in the code!

• Variables with varonly get their declarations hoisted to the top (but not their values)