In this tutorial I will be assuming you are writing the code in a separate file and importing it. This is normally better practice as it allows for caching of the JS file increasing speeds, and also allows for easier debugging and reading!
This should print out "Hello World!" to the browser console. That can be found by pressing F12 or Right Clicking on the page and selecting "Inspect". This will pop-up the developer tools, where we can find the console tab.
This small script is being run from top to bottom, and the code
inside of it consists of a single function
takes a value (In our case it is a string) and prints it to the screen!
Sometimes we want or need to save a value for later use. To do this we can use a variable! You often run into variables in math! For example if you are writing the equation y = 2x + 4 we have 2 variables: x and y. You're probably cringing as the PTSD from highschool math comes rushing in, but don't worry; This tutorial has very little to do with math!
But wait Nathan, you never told me that there are types! What are you talking about?
Yes sorry, I didn't want to scare you yet. In the same way that english has categories for words, computer has categories for variables. These categories inform the computer how much memory the computer needs to allocate (free-up) so we can store it in memory. Also depending on the language we can set boundaries based on the type set for a variable (You can't add a string and a number).
That's a good question, the problem is that computers are dumb. I don't mean to be rude, but they will run everything literally. So if we tell the computer "Here is a value" and we don't tell the computer if it is text or if it is a number, the computer has to store that value in a way that will be safe for any type because it can't interpret the input. Sound fine right? But the problem is that different types require different sizes, and if we are working with character values (uses 1 byte which is values from 0 to 255 or -128 to 127), the computer may decide to store that value in a memory slot with enough space for a long (8 bytes or -9223372036854775808 to 9223372036854775807). Now if we are writing something that has 10 million characters that need to be stored in memory, we suddenly have to buy 8 times the memory because we didn't define the type. This is exaggerated to make a point.
Well since the untyped languages had issues with the computer making mistakes, the typed languages run the risk of the programmer making a mistake. Types are tricky because if you try to put a long (number with decimal values) into a character, something bad is going to happen right? Because suddenly the computer will try to store 9223372036854775807 in a slot of memory designed to hold up to 255.
Constants and Block Scope Variables
Sometimes we want to define a variable which is a little more strick about usage. Depending on what you are trying to do, we can do this in 2 ways; Constants or Block Scope Variables.
We can use a constant when we have a value that should never change. This will throw an error like the following: TypeError: invalid assignment to const `myVariable'. For example if we create a connection to a database, we don't want to take the chance that we accidentally overwrite that connection with our greeting!
That would be a disaster! So by using a constant we can catch our mistake earlier! There are also some performance benefits as the compiler doesn't have to assume that the variable could change. The only thing is that a const variable only stops you from reassigning or redeclaring, it does not keep you from modifying the contained value by the pointer, but simply keeps you from changing the pointer itself.
Block Scope Variables allow you to define a variable that is only accessible inside of a code block, or for loop. This may not make sense now, but what this allows us to do is keep variables contained in a specific section of code so that we don't accidentally overwrite other variables in different sections of code. This code should print out the numbers from 0 - 9 and then 22. Although we re-assigned the value in the loop, the inner i variable stays separate from the outer i.
Now that we understand a bit about variables, what if we want to do operations on those variables? Maybe we want to add or subtract variables, or check to see if the variables are the same or different? We can do this through operators!
Now we can get to the flow control of programming. Since we don't always want to run all the code, we can use conditional statements to control which code is run. There are a couple different conditional statements that we can use: If/Else statements or Switch Statements. An if statement checks the validity of the statement (for example, is your age is less than 16?) then runs the inner code if true (If you are less than 16 you cannot drink or drive). Now we can use an else if statement to check an additional condition only if the original statement was false (if you are less than 19 but greater than 16, the inner code will run as if you were less than 16 it would have been caught by the initial if statement). Finally if we want to run some code if all other statements fail, we can use the else statement (if you are not less than 19 you can drive, and you are also allowed to drink).
We can also use what is called a Switch Statement which compares a bunch of possible outcomes for a variable and runs sections of code depending on the variable. For example if we want to do the same check as the last section, we can use the following code!
This is immensely inefficient, which is why we would normally use an if statement for this kind of problem. But if we were comparing types of fruits, it may make more sense to use a switch statement (as it is a finite problem):
Have you ever tried to spam your friend? Sitting there sending messages to them over and over again. Well instead of doing it by hand, why not program it away and go enjoy the sun! Before I could begin to explain how to write that program, we need to understand loops. There are 2 main types of loops (for & while), and a couple of variations which help us work with data.
The while loop has 3 main components:
We must first declare a variable which will be checked, then we need to evaluate that variable in some statement to see if it is true or false, then finally we modify the variable so it gets closer to completing the goal. In our case we are trying to print out numbers from 0 - 9 so we
- Initialize: i = 0 which is our starting value
- Evaluate: Is i less than 10? If so run the code
- Increment: Once we have run all the code, increment i by 1 using i++
The next main loop is the for loop. The for loop has the same components of the while loop but is packed inside one line. It states that for all that are true (all of the i values that are less than 10) run the code inside the loop, then at the end of each loop, increment the value by 1 (i++). This is more commonly used when you are iterating through an array.
A for of loop works on objects that are iterable, for example an array or a string! We can see that we instead initialize the looping variable to be the current value in the array instead of the position. This is useful if we don't care about changing the value in the array.
The do while is the same as a regular while loop but it runs the code before performing the evaluation. This snippet should print out the numbers from 0 - 9.
Now that we have discussed basics of programming and programming flow, we need to discuss data storage and manipulation. Most of the time when we write a program, there is some information that we need to store and possibly manipulate. For example if we have a website that has a login screen, and we need to look up someones username and password, how can we/should we store that information so we can consistently and easily find it.
For now we will discuss volatile "storage" techniques, where we are storing the data in RAM which will be cleared once the program has completed. Contrary to non-volatile storage techniques like writing the data to the disk or tapes. In another article I will discuss the use of databases which are the conventional way of storing information in a non-volatile format.
Now the last big thing is going to be functions. Now functions are used in programming to allow for simple code re-use. Functions take some value, and return a value based on the input. This is not always necessarily true, as you can have empty functions but it is generally the case that it will have at least 1 input. The input(s) for a function are called parameters. We can specify any number of required inputs for a function.
As you can see we can use the return call to return data from the function, as we cannot access the variables that are inside of the function outside of the function. This is useful as we can re-use the same code over and over again without having to re-write it!