“Talk is cheap. Show me the code.”
Linus Torvalds

I have never been one to rush things; my ego will tell you it’s the perfectionist in me, but a more candid explanation would call it classic procrastination. As Kevin Malone would put it, I am a “textbook over-thinker” . With all that thinking going on, I can admit most of it is unremarkable. But sometimes we have to sift through all the trite thoughts to dig for something meaningful on command. What is something meaningful I can provide right now? I want to provide an access point for those looking to learn how to code. I am no expert (yet) but I understand the fundamentals and remember what it was like to start from zero. I hope I can give you something approachable that shows how accessible programming can be.

first things first!

Code needs to be written, evaluated, and executed. We do all of this in an IDE, and there are many to choose from! But don’t worry about figuring out which one is right for you. We can use easy and free online applications for now. Go to codepen.io, create a new account, and create a new “pen.” The only real way to learn, is to do. So make sure you’re typing out all the code I show you, but also take liberties to play around and see what happens! I’m only providing a starting place, the real knowledge comes from immersing yourself.

example of what a new pen looks like

some important things to note:

green line — this is the title of your pen. the default from codepen is “untitled” so you’ll want to name your projects something appropriate and memorable.
blue line — this is the javascript file. you will get a better introduction to javascript in a moment, but for now just remember to never call it “java.”
orange line — this brings our console up. the console allows us to see the outputs from our javascript code. it will show us meaningful errors and successful computations.

what even is javascript?

Eloquent Javascript (an amazing resource) explains precisely what JS (Javascript) is. I’m not here to compete with an expert, but rather to supply a simplistic way to think about things. At its’ absolute bare minimum, JS is a language that connects what you see in your webpage with what the programmer wrote on their machine. There are many languages besides Javascript out there, and they all have their own specialities, nuances, and conventions.

declaring variables and assigning values

example of declarations and assignments

Keywords to know: Variable, Declaration, Assign, Value.

To begin, we declare a variable, which basically means we create a reference point. We can name this anything containings letters, digits, underscores, or dollar signs. This variable is empty and meaningless until we assign a value to it.

This is typically done in one step, like the examples below.

example declaring 3 different variables with primitive data types

breaking down what we see:

const myName = 'Han';

A variable is a small storage container. Here, “myName” is our variable. note: we use camelCase in JS when naming things. this means the first word is lowercase, and every word after is capitalized in lieu of a space. We use the word “const” to declare our variables. This is different from assigning ( =) a value to the variable. “const” is short for constant, meaning that whenever we use const for a declaration, the value can never change. My name will never change so I feel confident declaring such a permanent bind. Whenever you see text inside of quotation marks, you are seeing the data type called “string.” And last, but not least, you’ll see a semi-colon. This mark tells JS that we are done with this specific statement.

let myAge = 26;

A lot of the time we want our data to be more flexible and easy to update, in that case “let” is a much more appropriate keyword to use for declaring a variable. You will also notice we have a number without quotations for our value. This is the data type called, you guessed it, number.

var livesInSF = true;

“var”, short for variable, used to be the only way to declare a variable. JS is an ever evolving language, so don’t let that catch you off guard. Programming is in a constant state of evolution and it’s good to stay adaptable. You will see “var” used a lot in older code, and some newer code. There are ways to work around it and it most likely won’t be very useful to you. note: there is also a fundamental difference between var and let which will be explained when we talk about a topic called “scope.” Our variable is assigned the value of “true” which is a data type called boolean (boo-lee-uhn). This is can be a true or false value, or 1 and 0 respectively.

// this is how you make a comment

We are all human and we all benefit from plain english (or whatever language you speak!) so it’s very good practice to put comments throughout your code. Comments serve as windows to your thought process or just good things to note. To create a comment easily, press command / on the line you want to make a comment on. Or, if you have whole block of code that you don’t need, but don’t want to delete just yet, you can comment out the whole thing! Highlight the section and press command / which should result in a block of code inside of // marks.

in your pen:

Try assigning a new value to your variables! Make sure your new code starts after your declarations. Code is processed from the top to the bottom, so the order of your code matters. Open your console in the lower left corner so you can see if you produced any errors. Remember, you’re just assigning a new value to your old variables, so there is no need for a declaration.

Did you get an error? Great! Since we used const on our myName variable, we are unable to re-assign the value. In the error above, you can see it even tells us what went wrong. Not all errors will be descriptive and easy to decipher but they are all important.

how can we even see what’s being outputted?

JS has some built in methods (pieces of code that have a specific action they perform for us on specific parts of our code) and one of which is console.log() This is a combination of two different things. console is an object that allows access to the console window you see in your pen. log() is a function that prints whatever argument is passed into it’s parentheses. The argument in this case is referencing our “myName” variable. An argument could be a string, number, variable, or more complex objects that we will get into later.

example of using console.log() on the myName variable

what do you think will be outputted here?

Before you try this code out on your own, give a guess as to what you think will be in your console.

Did the output surprise you?

Computers are perpetually playing a detail oriented game of Simon Says. That means they require extremely explicit instructions to run correctly, or else they will try their best to fill in the blanks. In the example above, we are witnessing automatic type conversion. JS knows that num1 is not the same type as num2 but we just asked it to concatenate them. So JS assumes we wanted them both to be strings and behind the scenes something like this is happening '2' + '2' = '22' which is like 'a' + 'b' = 'ab' .

you might be asking…

  • what’s so bad about calling it “java”?
    JS and Java are two different languages that live different lifestyles. JS did get its name from Java but only as a way to seem recognizable to the public. there’s no other relation.
  • does it get more complicated?
    oh god yes, much much more complicated. but this is a language, and just like any language we learn, it becomes easier with practice. there was a time when you didn’t know the alphabet. i’m sure you wanted to give up then, but you’re no longer a toddler. learning new things is good for the brain.
  • how should i practice?
    you can take what i’ve shown here and play around with manipulating it seeing, seeing if you can understand it’s behavior. here are some good practice questions (that whole website is an important resource you should become familiar with)

take a quiz on everything covered above

link to next lesson

thank you so much for taking the time to read through this. if you have questions or any feedback please feel free to send me a message. i appreciate any and everything. my aim is to make something easy and approachable, and in the process i’ll be learning just as much as i’m teaching.

somewhere between lisa simpson and lana del rey