#2 Variables and Data Types

Variables

You know how to display things to other people but what if you want to save some values and to be able to reuse them? This is what variables are used for. In JavaScript there are 3 reserved words that are used; const, let, and var.

We will start with using let to create a variable called colour where we will assign it your favourite colour.
The first part of creating a variable is to choose what reserved word we want. Then choose a name, and finally set it equal to a value.

let colour = "green"

Lets say my favourite color changed and it is now blue. I want to over write the colour with blue but I don’t want to change the code from the beginning.
Now that I have initialize the variable (used one of the reserved words), I can overwrite it without rewriting the reserved word.

colour = "blue"

What is the difference between these?

Using the const keyword means that the variable is constant, i.e, it cannot change.
The difference between var and let is a bit more complicated. The main difference is the scope on the variable (we will talk about what scope is later. just know that it is perferable to use let as opposed to var)


Data Types

There are many types of variables. You have already seen a few of them.

Basic

  1. Number
    let x = 5
    A number can be any real number not surrounded by quotes. You can perform arithmetic with it (+ – * /)
  2. String
    let x = "Hello"
    A string is any combination of characters surrounded by ", ', or `.
  3. Boolean
    let x = true
    A boolean is a value that can only equal true or false
  4. undefined
    let x
    An undefined occurs when a variable is initialized but not set to a value.

Complex

I realized I have more than one colour I like and want to show people all of them. I don’t want to have a variable for each of them and want to store it all in one place.

Array

An array is a list of values that can be from any data type (including array).

let colours = ["red", "green", "orange"]

I don’t like orange but like yellow. Instead of overwriting the variable I can remove and add an item to it.

colours.pop()
colours.push("yellow")

pop removes the last item and returns it.

let fruits = ["apple", "banana", "carrot"]
let notFruit = fruits.pop()
console.log(fruits) // -> ["apple", "banana"]
console.log(notFruit) // -> "carrot"

push adds an item to the end.

let fruits = ["apple", "banana"]
fruits.push("blueberry")
console.log(fruits) // -> ["apple", "banana", "blueberry"]

Now if I console.log(colour) I get ["red", "green", "yellow"].

These are limited in this scenario because it can only effect the last items.
Instead we can using indexing.
Each step in the Array will be a number from zero to the length of the array minus one (computers count from zero instead of one). We can get the value at this index with square brackets.
I want to replace "green" with "blue". Green is the first item in the list.

colour[1] = "blue"
console.log(colour) // -> ["red", "blue", "yellow"]

This is great but there is a chance I could accidentally overwrite the variable.
Remember how const means that the variable cannot change? With array it is different, I cannot overwrite it but I can add and remove values.

const favoriteThings = []
favoriteThings.push("raindrops on roses")
favoriteThings.push("whiskers on mittens")
favoriteThings.push("bright copper kettles")
favoriteThings.push("warm woolen mittens")
favoriteThings.push("brown paper packages")
favoriteThings.pop()
favoriteThings[1] = "whiskers on kittens"

Next post we will go over other types such as objects and classes