JavaScript Variables, Arrays and Objects Front end Development [S4 V7 - ...

In this lesson, we will understand what is a variable, how its created and used along with jQuery.


REFERENCE FILE
https://drive.google.com/open?id=1FJP...

Variable is a value-holding container. Means, it's just a name that can hold a value like your name, age, date of birth, etc. But why do we create a variable? There are number of reasons, but the following are important to understand:
1. So that we can use this in different locations of our application. Reason? Because we cannot write our name a million times by hand (or even copy paste). Reason? Because it's time consuming and error prone. Variables improve our work and project efficiency.

2. We need to manage all the instances from one place. For example, we have used a variable thousand times in different places. Now changing the value of the variable once will update every other instance. Variables provide us greater control over our content.

Now how to create a variable? That's really simple.

Just write the name of it and its created.

Really! it's just that simple. For example, I want to create a variable called "age" so that I can save my age in it. All I have to do it write the name of the variable like this:

age;

and then I have to tell my age to it - in numbers, like this:

age = 27;

Lo behold! The variable is created. But this is not really the only way to create it. There are three other ways, each having their own precise usability and need. In the above case, our need was simple, so we used a simple way to create it, but in larger applications we also need to know the other three ways of creating a JavaScript variable:

1 - var
2 - let
3 - const

A quick note on the "constant". As the name implies, a constant is something that cannot be changed once defined.This definition immediately raises one question. Does a variable then changes? The answer is Yes, but only when we want it to change. Constants cannot change whatsoever. Constants are mostly used or configurations and hard code referencing.

Var and Let are almost the same thing as just typing out the name as we did in the first example. But in advanced lessons you will learn that there are very clear differences in between the two. But for now, we can use them as synonyms.

Now where is jQuery in all that stuff?

As we know that we are working on a resume project, therefore we contextualize every thing in that project. In our project, we are creating clickable cards that display a popup with more information about that card. We need to reference those cards in a variable. Referencing in JavaScript is not just that easy, it takes little extra keystrokes and a little more human memory.

With the help of jquery we will reference all the cards that have the class ".project" and store in the variable called projectCards, like this:

let projectCards = $(".project");

The dollar sign is used to communicate with the HTML document and search the class project in it. All the elements matching the class are then saved in the variable called projectCards.

We can now alert() and console.log this variable to see what's in it for us, but we will quickly do that in the next lesson.