⌨️

JavaScript 101 WIP

If you stumbled upon this text know it its just a WIP brain dump of a possible JavaScript 101 course.

  1. Hello Friend.
  2. Variables.
  3. Functions
  4. Async
  5. If statements.
  6. Your first program.

Hello Friend

Programming is about getting a computer to perform tasks for you, no matter the language or type of programming you want to do it is about writing instructions down for a computer to follow. Computer programs are typically only useful if they have some sort of output. This output can be a lot of stuff and we will get into that, but lets learn about the easiest form of output. The console log. In JavaScript writing a console log is actually very simple. They look like this.

console.log('hello friend')

Go ahead and create a file, call is lesson one or something and place that line in it.

Then run this command in your console.

node filename.js

This tells node to execute your program. This means it will run it. Since all your program does is print "hello friend" this will result in something that looks like:

$ node index.js
hello friend

Congratulations, you wrote a hello world program this is the first step for nearly anyone on their programming journey. Depending on your technical proficiency many people feel many different ways at this point. Some people feel that just getting node running on their PC is an incredibly intimidating task. I too at one point was like this. I remember the first time I tried to install Ruby and get my hello world program running it took two days. Granted Ruby especially then was pretty tricky to get up and running compared to node at any point. The point I am making still stands, this first step sometimes makes you question if this is for you. If that is the case, don't worry too much, and see if things change by the end of this guide.

Variables

Variables are something that stores a little piece of data. You declare a variable with the word let so an example might look like:

let this = 'that'

let tells the computer "I am about to make a variable" and the next word is your variable. I made one named this and assigned it to equal 'that'. You might be wondering what the little quotes ' around the word that are. They make that a string, which is a special type of data to the computer. We will learn more about this later. For now lets build on our hello friend example to include a variable and see what this might look like.

let person = 'friend'
console.log(`Hello ${person}`)

You might be concerned about the line console.log(`Hello ${person}`) for now all you need to know is those special `` let us make a different type of string called and interpolated string. This means that you can insert variables into the string while you are writing it, and the computer will interpolate it when the programming is running. If you decide to run you program now this will result in something that looks like this:

$ node index.js
Hello friend

Whoa! Huge surprise, it's the exact same thing, but we wrote twice as much code to do it. We didn't really make our program any more useful with this variable, so lets try and change that. When running a program with node you can pass in arguments after the file name. That would look like this:

node index.js friend

While our program is running, we can access this variable. The details of how it all works are for another time. For now just make your code match this below so we can talk about it.

let args = process.argv.slice(2);
console.log(`Hello ${args[0]}`);

In the code above process is a global variable, one set up by node itself. We can access different things on this variable one of which is another variable called args. Args is a list of stuff, not just a single thing. Lists of things are typically stored in what is called and Array. The first two items of the args array are not useful for us right now, it is just information on the file location of the node process you are running. So we slice those first two off leaving us only with the list of stuff we passed in. You can access a certain item in a list with square brackets and the number of the item you want, lists start numbering with 0 so the first item is accessed like this list[0] which you can see we do above when we interpolate the string.

Sorry if that didn't explain much, we will go over all these concepts much more soon, all you need to have an understanding of is that you can access what you pass in to your program by grabbing the item using square brackets and the index or number of the item. So running the above program might look something like this.

$ node index.js Levi 
Hello Levi

At this point your program now takes an input and produces an output, this is the foundation to every useful program. IO or Input Output is what makes the computing world go round. Everything you make will be built around how to receive an input and produce a meaningful output in return. This looks different depending on what you are making but the general principle is basically the same. The input could be from a user, in the form of some text put into a field on a form. The input could also be from another program in the form of an API request to your server.

Right now we are providing our input when we start the program, but this is rarely the case. Typically your program is running, and listening for input. Before we can listen for in that way we need a few more tools. If we are going to be making decisions based on input we will need to learn how to control flow think of this as just a way to direct the computer down different paths. Think of the trolly problem, there is a switch to change the track that the trolly goes down, that switch is a from of control flow. In programming the most basic form of control flow is the if statement. An if statement looks something like this:

let this = false
if (this) {
  console.log('that')
} else {
  console.log('something else')
}

The above code would result in 'something else' being logged to the console. If this was set to true 'that' would be logged to the console. You could write this same if statement like this for a little more clarity.

let this = false
if (this === true) {
  console.log('that')
} else {
  console.log('something else')
}

Those three equal signs are a way to check equality. Here we are checking if the variable this is equal to the Boolean true. A Boolean is another type, like a string is a type. A Boolean is an entire type for the options true and false. This is why both if statements above are the same, because at run time they would be the following respectively:

if (true) {
//...
}

// and

if (true === true) {
//...
}

The computer is smart enough to understand if(true) and if(false) to control flow, so you don't need the rest, but sometimes it's best to be as clear as possible because sometimes we will check something like if(name === 'Steven') so we are not always simply checking for the variable to equal true, we might be checking some other condition entirely which will resolve to true or false. By resolve I mean if your name variable is set to Bob, and the code in the name example executes if('Bob' === 'Steven') is what the computer will see when it is executing, leading it to resolve that part in the parentheses to false because Bob does not equal Steven leaving it if(false) which we know the computer understands.