JavaScript Foundations - Variables

Continuing the theme of My Odin Project journey throughout all these articles in the 6 week challenge, I am going to attempt to write a quick article on some JavaScript fundementals based off the The Odin Project fundementals in JavaScript.

Javascript like many an other language contains all the core items associated with programming.

• Variables
• Functions
• Maths

Lets start with variables.

You can imagine a variable like a box, lets say you are moving house and you pack each room into a box and label each box with the rooms name, eg, Kitchen, Bathroom.

This is essentially how a variable works.

Lets create one in Js (JavaScript) for visual sake.

let Kitchen = ["Spoons", "Forks", "knives", "Bread"];

Take a look at the example above here we have a variable that stores the types of items you might find in a box labelled kitchen. Now I wouldnt recommend putting your bread in with all this cutlery as it might be quite crummy by the time you reach your new house, but hey if thats what you want to do..

But back to variable, lets break it down.

A variable contains a declaration and value, in our case the declaration is Let Kitchen and our value is a array filled with strings in the form of items you might find in the kitchen.

(An array in our case here and a broadsense is basically a box in a box) (A string holds some text like a sentence or word)

This is one of the most common variables in JS, another positive of using let is that you can change this further down the code, lets look at the example below:

let a = 1; let b = 2; console.log((a + 1) + b);

As you can see here once we start the console.log we see our a get an increase of 1 resulting in our log outputting the number 4. This is made possible by using the keyword let.

console.log (A way to output our number to the console to see the result of our calculation, [find out more here](https://www.w3schools.com/jsref/met_console_log.asp))

This is also not limited to what the value is set at on declartion for example:

let a = 1;

Can also become

a = "1";

All we have done here is call a and ask it to now become a string with the value of 1.

Notice however we didnt use let again, why?

We didnt require the keyword let again because a is already declared for us just up the script all we have to do is call it and ask it to change its type and value. Lets look at that in the context of a full script.

let a = 1; let b = 2; console.log(a + b); a = "1"; console.log(a + b);

What do you reckon our second console.log will output after changing our a from 1 to "1" .

If you said 12 you would be correct, this is a whole new realm ontop of variables which I wont be covering today but congrats if you got it.

However you can now see that a let variable can change at any point in the script, this can be very useful when dealing with maths in JS but has un-ending use throughout the language and many others.

Although I have only used JavaScript here the variable principle spans accross a multitude of languages, so congratulations you have learned a part of many languages!!

Following on from let we have the second most commonly used declaration type const .

const is much like *let however you cannot change it further down the script.

Lets take our previous example of let but changing a to be const rather than let, what do you reckon the output will be.

const a = 1; let b = 2; console.log(a + b); a = "1"; console.log(a + b);

If you said that our second console.log would be 3 you would be wrong.

Now your thinking well then what was all that waffling about above this.

Well the principle stayed the same const could not be changed to the string type 1 because JavaScript will throw you an error reminding you that a const variable cannot be changed further down the script, whatever you set it as at the declaration point will be its value for the entire script.

Our output in the console would look like this.

3 Uncaught TypeError: Assignment to constant variable. Removing the reassignment of a will fix this error for you and you will see the output in console below which follows. 3 3

Finally a type of variable you might also come accross is var. While this isnt freuqently used nowdays its important to know it if you come accross it and luckily for you there is nothing to learn as this acts in the same way as let with less scope.

That is a whole track to go down aswell so if you would like to know the difference check out this GeeksForGeeks post

Have some fun with the above by opening up the console on this page by right clicking - clicking inspect and navigating over to the console in the right of the devtools window that pops up.

Due to a change in DevTools you may have to type allowpasting first in order to try out these examples. Dont worry about the warning, these examples are safe!

Each of the the above examples can be typed or pasted into the console and you can see in realtime the teachings I have laid out.

Dont be afraid to explore and thanks for reading!