Let's Start with Variables

In the beginning was the Word, and the Word was with God, and the Word was God.

If you gone already through some introductory overview of JavaScript, or any programming language for that matter, they usually start with the types of values that a language can use. These are "things" that the language already recognizes. In other words, there are primitive values that don't need to be created by you the programmer. That's why you can just type a number, like 42, and the interpreter / compiler doesn't need any further instructions to know it's a number.

Of course there's nothing particularly useful about just typing a number and having a program recognize it as a number. You can type a number in a REPL(stands for Read, Evaluate, Print, Loop), or Chrome's console.log, and it will be ok. It wont' yell at you and throw an error. But it won't do nothing with it. The point is that a lot of clever computer science people standardize most of the typical values that you would use to be able to do computations on. Back when machines where the size of buildings, some smart people figured out that if you type the number 4 and then type + and then type 4 again, the machine should immediately make that computation without having to first explain to it what 4 is, what the plus sign is, and what to do with that. Think of it like a calculator. The electrical engineers who made them made it possible for you to just press a combination of buttons and be able to multiply without the user having to explain to the calculator what multiplication is. This is probably more complicated than I'm understanding it, but again the idea is that there are primitive values that exist already in a computer program, because they were made by God.

So what does this have to do with variables? Well variables are ways for us to capture and label those values for later retrieval. In JavaScript there are three keywords you can use to declare a variable. I'm not gonna get into the differences between them in this module, but they are:

            
            let something = 'a thing';

The above snippet starts with the keyword let followed by the word something equal to the quote 'a thing'. The word something is the label, that's the name of the variable, and we are storing inside it the string 'a thing'.

You can store in a variable different types of values like numbers, strings, boolean, undefined and null

            
            let number = 42;
            let existenceOfGod = false;
            let theVoid = null;

Think of a variable as a container that holds a single thing. (A variable can hold more than one thing by the way, but I'll get into arrays and objects later). The cool thing now is that you can do things with them later.

           
                In the beginning was the Word, and the Word was with God, and the Word was God.

Lest say that we want to replace the word Word with the word variable and the word God with Programmer by pressing the button below.

        
        let keyword1 = 'Variable';
        let keyword2 = 'Programmer';

        let sentence = document.querySelector('.sentence');
        let button = document.querySelector('button');

        button.addEventListener('click', function () {
        sentence.textContent = `
        In the beginning was the ${keyword1}, and the ${keyword1} was with
        ${keyword2}, and the ${keyword1}
        was ${keyword2}.
        `
        })

If you take a look at the above code, you can see that most of the work is being done by variables. The first two variables are holding the words 'Variable' and 'Programmer', which are two string values. The other two values are holding references to two html elements. Then we reference the variable that we named button and attach an event listener that listens for clicks. Once the button gets clicked, the textContent of the sentence variable gets changed and within it we reference the keyword1 and keyword2 variables that are holding the string 'Variable' and 'Programmer'.

This is my very basic introduction to the very basics. There's a bit more to it and I recommend digging a bit more on variables. I'll probably tackle the bits remaining.

Coming next: