Variables

In JavaScript there are three types of variables. They are var, let and const. var and let are, for a beginner in programming, seemingly the same. If you want to know the difference .

In this tutorial I will concentrate on let and const.

let is used when you wan't to change the variable at some point in your code.
const is used when you know you won't change it throughout your code.

What do I mean? Let's look at some examples...

As you can see below, let let's you change the value in the variable at any time, while const is given a value when declared and then never can be changed... Ever:

JavaScript
let myLetVariable = "Something";
myLetVariable = "Something else";
//This is perfectly fine

JavaScript
const myConstVariable = "Something";
myConstVariable = "Something else";
//This is not allowed and will result in an error

The value types that can go inside variables are:
string which is basically any text.
number can be an int (whole number like 2 or 568) or a float (decimal number like 6.3 or 288.903).
boolean can only be true or false.
undefined means the variable has NOT been assigned any value.
null means the value assigned is "nothing".
object is used to hold multiple values of any type like the ones above, but can also hold functions, arrays and even other "homemade" objects.

JavaScript
//Primitive types:
//Primitive types can contain one value and one value only
let myString = "Some string";
let myWholeNumber = 23;
let myDecimalNumber = 2.3;
let myBoolean = true;
let myUndefined;
let myNull = null;

//Object types:
//ARRAY's can contain multiple values
let myArray = [
	68.25,
	"This has an index of 1 in the array":,
	false
];
//Objects's can contain multiple key/value pairs
let myObject = {
	firstValue: 68.25,
	secondValue: "This strings key is 'secondValue'",
	thirdValue: false
};
//Objects's can also contain functions and nested objects
let myAdvancedObject = {
	myOtherObject: myValue,
	myFunctionObject: function(){
	    let myFunctionsFirstValue = 4.31;
	    let myFunctionsOtherValue = myObject.firstValue;
	    return myFunctionsFirstValue + myFunctionsOtherValue;
	    //Or whatever else this function should do
	},
	{
		myNestedObject: myNestedValue,
		myOtherNestedObject: myOtherNestedValue,
	},
};
console.log(myAdvancedObject.myFunctionObject();
//Result: 72.56

As you can see, with objects, we can go crazy and create something very advanced and complex. In this tutorial I won't get more in depth with objects, but as your project starts to grow, know that objects can help make your code much easier to read, easier to maintain, easier to structure and easier to control!

NEW! Check out my Object builder, which is a tool where you can easily and visually create objects. The code generates automatically and you can copy it directly into your project.

So back to variables (of the primitive type). What are they used for and how? Let's take a look at some examples.
First I'll show you an example without variables and then we'll build upon that by adding variables so we can see how it makes things easier and better and later I'll show you some cases where variables are actually necessary.

We'll imagine that we have three buttons somewhere, and when we press button 1 the function button1Action() will be called. When button 2 is pressed, call button2Action(), and button 3 calls button3Action():

JavaScript
function button1Action(){
    console.log("A button was pressed!");
}
function button2Action(){
    console.log("A button was pressed!");
}
function button3Action(){
    console.log("A button was pressed!");
}

Simple stuff. But if I wanted to change the text, I would have to change the string in each function. Imagine we had 100 buttons each calling its own function, that would be 100 strings to change in 100 functions! Suddenly this approach has gotten very cumbersome!

We can fix this with a variable. Just declare a variable with the string, and use the variable instead of the string, like so:

JavaScript
const myConst = "A button was pressed!"

function button1Action(){
    console.log(myConst);
}
function button2Action(){
    console.log(myConst);
}
function button3Action(){
    console.log(myConst);
}

Now we only need to change the variables string value once, no matter how many buttons (functions) we have:

JavaScript
const myConst = "I just changed the text for all three buttons!"

function button1Action(){
    console.log(myConst);
}
function button2Action(){
    console.log(myConst);
}
function button3Action(){
    console.log(myConst);
}

That was a use case where a variable makes life a little bit easier for us (the programmer).
That's great and all, but let's look at an example where a variable is actually necessary in order for our program to work.

Let's say we want a program that logs how many times we have clicked a button. So we declare a variable counter to hold our count value:

JavaScript
let counter = 0

function ButtonClick(){
    counter = counter + 1;
    console.log(counter);
}

It's important to place the declaration of the variable outside the function, otherwise if the variable is declared inside the function, it won't work. Everytime the function is called, the variable is declared with a value of 0, then increased by 1, and finally logged to the console. It will never reach a value of 2:

JavaScript
function ButtonClick(){
    //This is wrong and won't work
    let counter = 0;
    counter = counter + 1;
    console.log(counter);
}

When placed outside the function, we make sure it is kept in memory and is available everytime we run our function. As long as the variable is kept in memory, the value is retained. And as long as the value is retained, we can keep increasing it.

While I haven't covered every aspect of what a variable is and can be used for, I hope I gave you some insight to begin using variables constructively in your code.