Resources For Learning JavaScript For A Total Beginner

Build Things

That’s it. Okay, maybe it’s not quite that easy, but that is my advice. The sooner you can apply something you’ve learned into any kind of project, the faster you will master it.

Watch a video or read some content, then test it on your own. One of the most powerful things about JavaScript is that you can use your browser to test any ideas you have. The console gives you a REPL (Read Evaluate Print Loop) environment, and some other nice bells and whistles.

I also love CodeSandbox, it’s a great place to practice either vanilla JavaScript or React (or any frontend framework when you want to learn it). It doesn’t require you to setup anything yourself and you can see both a terminal and a rendered page.

How To Learn Basic JavaScript

Your mission for this phase and the next one is to make and break things. Ask yourself every hour or two, “What have I broken to test my understanding recently?” I want you to be comfortable breaking your code to test assumptions.

Cultivate a sense of being a tinkerer during this phase. It’s fine if you want to read and understand how things work, but your understanding needs to come from your own experimentation. This will give you the ability to explain your understanding during a job interview!

Everything we do will tie back to this central goal. You can be asking, “how do I gain knowledge as fast as possible to be able to show this knowledge to others?”

Let’s dig in.

There are a few core areas you need to become familiar with and each of the courses below is going to have their own way of presenting this material to you.

Variables

Variables are the first step in learning programming. A variable is the place you store data. Let’s say you live in a Brick House at 123 Main Street.

The physical location of that house is 123 Main Street. That’s the real address. However, you can also refer to this house as the Brick House at the corner of Main and Central St.

This is a variable name, it refers to a physical address, to the same house, but it can change. What if you painted the bricks yellow? You’d need a different way to reference the house.

There are several different types of data you can store in variables, but two main buckets:

1. Primitive types
2. Reference Structures

The primitive types are:

1. Numbers
2. Strings
3. Booleans (True or False)
4. Null
5. Undefined

The references are:

1. Arrays
2. Objects
3. Functions

Operators

Operators you’ve probably used, they are things like +, -, /, =, etc. You use them to mathematically manipulate data in your code, similar to plain old math.

Pretty cool huh? So for example:

var TheNumberTwo = 2
TheNumberTwo + 2 //What does this give us?

In the above code we declared a new variable and set it equal to 2. We then added 2 (although we didn’t save this change!!). My question is, why didn’t this save? Think it over.

There are more advanced operators you can learn, like modulo.

Control Flow

Control flow gives your code powers. It’s the ability to choose which code to run when certain conditions are met.

For example, let’s say you want to cook dinner with what you have in the fridge. You’re in the mood for tacos, but spaghetti is your fall back. You look in the fridge and IF you have ground beef, you can make tacos. Otherwise (this is an else in code), you make spaghetti.

if (hasGroundBeef === true) {
	//Make Tacos
} else {
	//Make Spaghetti
}

We use === to check if something is equal. This id different from =, which sets the value of a variable.

Loops

Loops are fun. They let you do something as many times as you want. Or until a specific condition is met. In our previous example, what would happen if you continued opening the fridge until ground beef appeared. Would you ever find it? Yikes. This is an infinite loop!

The two most common types of loops are for loops and while loops.

For loops work until you’ve reached a certain number. They look like this:

for (var counter = 0; counter < 5; counter = counter +1) {
	//Do something
}

How many times would this run?

While loops work until a specific condition is met. They are used when searching for something or for checking until a condition is true.

They look like this:

var taskComplete = false;
while (taskComplete !== true) {
	//Do something
	//if (something === 'done') {
		taskComplete === true
	}
}

Functions

Functions allow you to save chunks of code to run later. These are a ton of fun, they give you super powers.

Functions are saved, either inside of variables directly or called anonymously. When you save a function, you gain the power to use it later. Using it later is called invoking or calling the function. Until this happens, it’s just a code recipe.

I like to think of functions the way you’d think of a cooking recipe. It’s a piece of paper or an idea of step-by-step directions for how to make food. But you have to follow the recipe (run the function!) in order to actually get the food. Until then, it’s just text on a page.

Functions in code look like this:

var myFunc = function() {
	return 'Im a function!'
}

myFunc() //returns 'Im a function!', the () invokes or calls the function that we defined earlier.

One of the major areas I see students struggle is with the differences between a function invocation and a definition. Remember, when you define the function it hasn’t been run yet. It doesn’t change your variables or do anything until it’s been run.

That’s it for the basics! Practice using these and you’ll find there’s a lot of nuance to each of these areas. Functions can take parameters, variables can be defined and re-defined. It’s all so much fun!

I recommend you practice building small tools or easy games. Try creating a calculator, or tic-tac-toe! You want to make something simple, that you can improve upon as you learn better ways to code.

Lots of folks make todo apps. They make a new todo app every time they learn a new framework or way to manipulate data, or a new language. This can make for a strong baseline of comparison across different ways of coding.

Find something that you want to make, and start creating!

Resources For Learning Basic JavaScript

• Udacity has a great free course if you like video content. I think the course is fine starting point, but you’ll need more hands-on practice to master the basics.
  
  
• Eloquent JavaScript is a fantastic free book. It’s quite comprehensive, so I’d recommend only working through the first 6 chapters for now. However, you can use this as a reference for several other sections of my guide. Feel free to refer to it during the advanced JavaScript sections and when learning Node.
  
  
• Use MDN as your resource anytime you’re stuck when trying to build a project. Especially with syntax (how does that method work again?).
  
  
• The goal is to keep practicing building things until you feel comfortable with a given topic. There are two wonderful sites for practice. Repl.it is great for simple JS practice and CodeSandbox is fantastic for building small applications and seeing them in a browser. If you want to mess with pure JS, use repl.it, if you want to see what you’re building in the DOM tryout CodeSandbox!
  
  
• A couple of great places for toy problems are codewars and codesignal. For now I would generally stick with the easy challenges in order to get more repetitions in. Save the harder ones for later, we’ll come back to them during the job prep section.
  
  
• As a last resort, I’ll say you can use Codecademy. It’s too easy to type without learning!

You’re ready to move on to the advanced section when you feel able to demonstrate these three things:

1. You can manipulate the data in Objects and Arrays comfortably.
   
   
2. You can create and pass around Functions to other Functions.
   
   
3. You’re comfortable explaining what your code is doing to someone who doesn’t know how to code!