The Complete JavaScript Guide

Everything you need to learn to code in JavaScript

This guide is a curriculum of videos, books, articles and code challenges. If you are starting from scratch without any programming experience it will take you roughly 80 hours to complete in total. Otherwise, start wherever suits you! 😃

Get Comfortable! Let’s Learn Some JavaScript :)

Getting Started

Before diving into JavaScript, let’s answer some fundamental background questions.

• What are programs?
• What is a programming language?
• How does a machine execute my program?

1. 📖 Check out our JavaScript Primer
2. 📖 MDN’s What is JavaScript? will also help answer these questions

Data and Variables

Let’s learn about variables in JavaScript. Variables are quite simply a place to store data inside your program!

const a = 3;

☝️ In this example we are declaring a variable a which contains the value 3.

Let’s check out four helpful resources to get you started on data and variables:

1. 📹 This Free Code Camp video covers JavaScript variables and data. Watch this video from 6:00 until 14:00
2. 📹 Our Intro to JavaScript will give more background on the JavaScript language and how it works in the webpage
3. 📖 Read this values section on YDKJS
4. 📖 Read the first three sections of Eloquent JavaScript Chapter 1: Eloquent JavaScript
5. 📖 Read up to Variable Scope in Grammar and Types guide on MDN.

Alright, great work! 🎉

Now you should have an understanding of how JavaScript variables work in a program. In the next section, we’ll start working with Operators and how they manipulate values stored in operators.

Operators

In JavaScript, an operator will perform an operation on a variable or variables.

💡 The variable(s) that the operator operates on is generally referred to as the operand.

In the last section we used the assignment operator, =, to store a value inside of our variable:

// using the assignment operator to store 3 in a
const a = 3;
// using the assignment AND addition operator
const b = a + 1;

☝️ In this example we stored the value 3 in a and then stored the value 4 inside b by using the addition operator.

1. 📹 Watch from 14:06 to 18:22
2. 🔍 Check out MDN for a list of all operators in JavaScript. There’s quite a few of them! Be sure to click on any that are interesting to you. MDN provides useful examples and in-browser code execution to help you understand these operators even better!
3. 📖 Read Arithmetic Operators on MDN.
4. 👨‍💻👩‍💻 Try it out! Now that you have learned operators and variables, try running some code in this REPL. Change the value stored in the variable and click “run code”. Try some operators!

📖 The console.log function is often used in JavaScript to log messages out to web console for debugging or testing purposes. You'll see this used in the REPL example. We'll go over functions in the next section. Here is the documentation on console log.

Functions

Ok, awesome, this is where it starts to get exciting. We’re going to start working with functions!

Functions are reusable snippets of code we can call repeatedly. We can even choose to change the values passed to the function, which are referred to as arguments:

// takes two arguments: a, b
function add(a, b) {
  // "returns" the sum of a and b
  return a + b;
}
const sum = add(1, 3);
console.log(sum); // 4

☝️ This function add takes two arguments: a and b. When we call add with the values 1 and 3, it returns the value 4, which is the sum of those two arguments.

1. 📹 Watch from 51:43 to 1:05:53
2. 📖 Read the function section of YDKJS
3. 📖 Read the first two sections of Eloquent JavaScript Chapter 3 Functions
4. 👩‍💻👨‍💻 Try playing with the above code example on REPL. Can you add much bigger numbers together? Could you pass in three arguments into the add function?
5. 🎮 Can you figure out why this multiply function does not work?
6. 🎮 Can you create a hello world function?

Functions are super important and quite tricky! Mastering this aspect of coding will make you a super coder! 🦸‍♂️🦸‍♀️

Conditionals

💭 Imagine you were telling someone how to drive through town. If there is only one main street, you might tell them to take the main street. Maybe you know there might still be a parade going on, so you tell them if there is still a parade then they should take the side roads.

if (there is still a parade) {
  take the side roads
}

In proper JavaScript syntax, we can choose to run some code if some condition is true:

const x = 2;
if(x === 1) {
  // the condition here whether or not x is equal to 1 (it is not)
  console.log("its one!");
}
if(x === 2) {
  // the condition here whether or not x is equal to 2 (it is!)
  console.log("its two!");
}

☝️ The program will take the second branch because the condition x === 2 evaluates to true.

1. 👩‍💻👨‍💻 Try it out on REPL! Can you detect the case where x is greater than 3? How about if x is even?
2. 📹 Watch from 1:08:43 to 1:24:45 to learn about if, else and comparison operators.
3. 📖 Read the Control Flow and Conditional Execution sections of Eloquent JavaScript
4. 📖 Read the Comparisons section of YDKJS
5. 🎮 Can you detect when the owner has entered the building?
6. 📖 Read Comparison Operators on MDN.

Loops

Loops are quite similar to if statements, except that they will continue until a condition is no longer true.

A simple case is the while loop:

let x = 0;
while(x !== 5) {
  x++;
}
console.log(x); // 5

☝️ The variable x starts at 0 and the x++ statement will run five times until the condition x !== 5 becomes false.

A similar loop can be made with for:

let x;
for(x = 0; x !== 5; x++) {
  // we could do something in here each time x is incremented!
}
console.log(x); // 5

☝️ The for loop allows us to specify three statements inside the parenthesis. The first statement x = 0 is run once at the beginning of the loop. The second statement x !== 5 is our condition, which is checked before each iteration. The third statement x++ is run after each iteration.

1. 📹 Watch from the beginning to 3:27 of this video on loops!
2. 📖 Read MDN documentation on the for loop and the while loop
3. 👨‍💻👩‍💻 Play with example 1 and example 2 on REPL! Can you log every number 1, 2, 3, 4, 5 in each of these loops? How could you increment by two instead of one?
4. 📖 Read the While and Do Loops section of Eloquent JavaScript
5. 🎮 Can you find the summation of all the numbers?
6. 🎮 Can you fix this infinite for loop?
7. 📖 Read about Control Flow on MDN.
8. 📖 Read about Loops and Iteration on MDN

Strings

We briefly touched on strings in the first section. However, there is much more to learn about strings!

const a = "h";
const b = a + "i";
console.log(a); // h
console.log(b); // hi

☝️ In this example we are concatenating two strings together to form the string "hi". We can also pull out individual characters of a string by its index:

const a = "hello";
console.log(a[0]); // h
console.log(a[1]); // e
console.log(a[a.length - 1]); // o

☝️ Notice that the string index is zero-based, so the first index for "h" is 0. The last index for "o" is actually 4, which is the string's length minus 1!

1. 📹 Watch from 21:22 until 40:45 about Strings.
2. 📖 Read the Strings section of Eloquent JS.
3. 👨‍💻👩‍💻 Play with example 1 and example 2 on REPL! Can you concatenate many strings together? What happens when you plug in an index to an array that doesn’t have a value?
4. 🎮 Can you double each character in this string?
5. 📖 There are many methods available on string in JavaScript. Check out the list of methods on the String from MDN. For instance, split and toUpperCase may be very helpful with this next challenge 👇
6. 🎮 Can you remove the first and last character of these strings?
7. 🎮 Can you abbreviate these two word names?
8. 📖 Read about Strings in YDKJS

Arrays

Arrays are essentially lists of data. In JavaScript, our arrays contain any mixture of any data type we’ve described so far. So, for example:

const mix = [1, "hello", true];
console.log(mix[0]); // 1
console.log(mix[1]); // hello
console.log(mix[2]); // true

☝️ Notice that I can key into the array with the index of the element just like we did with strings!

1. 📹 Watch from 40:45 until 51:43 to learn about arrays
2. 📖 Read the first four sections of Chapter 4 in Eloquent JavaScript. Up until Objects.
3. 👨‍💻👩‍💻 Play with the above example on REPL! Can you add new values to the array and then log them to the console? Can you get the last element in the array no matter how many elements are in it?
4. 📖 Just like Strings, there are many built-in methods for arrays. See MDN for documentation of these methods. For instance, indexOf may come in handy in the next challenge 😉
5. 🎮 Can you determine if the element is in the array?
6. 🎮 Can you find the sum of all the positive values in the array?
7. 🎮 Is the sum of squared values greater than the sum of the cubed values?
8. 🎮 Can you remove every other element in an array?
9. 🎮 Can you count the monkeys?
10. 🎮 Can you get all the numbers in between?

Objects

In JavaScript, objects allow us to store a collection of keys and values.

We can define an object with the literal object notation between two semi-braces {} where the left-side of the colon is the key and the right-side is the value:

const obj = {
  a: 3,
  b: 7
}
console.log( obj['a'] ); // 3
console.log( obj.b ); // 7

☝️ Notice that we use two different ways of retrieving values from the obj. The first way is to use brackets ['a'] similar to arrays*. The second way is to use dot notation: obj.b.

🤯 * In fact, in JavaScript arrays are objects whose keys are integer values rather than property names. See the MDN documentation on arrays for more information.

1. 📹 Watch from 1:49:12 until 2:03:05 to learn about objects and properties.
2. 📖 Read the Objects and Mutability sections of Chapter 4 in Eloquent JavaScript.
3. 👨‍💻👩‍💻 Play with the above example on REPL! Can you store a new key on the object and then retrieve its value?
4. 📖 Read Arrays and Objects of YDKJS.
5. 🎮 Can you solve this languages challenge? Be careful to check for a non-existing language!
6. 🎮 Can you fix this bug of pushing an object in an array?
7. 🎮 Can you fix this object? Be mindful of , and {} placement!
8. 🎮 Can you determine the average happiness of an office full of people? This one is tough! You’ll want to use the in operator or Object.keys
9. 📖 Learn the difference between value and reference.

Logical Operators

How would you handle the case where you want something to happen if condition A and condition B were true?

if(conditionA) {
  if(conditionB) {
    // do something
  }
}

☝️ Fortunately, there’s a much simpler way of handling this! We have logical operators. Specifically, for this case we have &&:

if(conditionA && conditionB) {
  // do something
}

☝️ This accomplishes the same goal, very concisely!

1. 📖 Read up on logical AND, logical OR and the ternary operator on MDN.
2. 📖 Read Logical Operators in Eloquent JavaScript. Bonus Read until the end of this chapter to understand how these operators can be used for short circuit evaluation. This is a super helpful technique in JavaScript!
3. 📖 Read Operators || and && from YDKJS.
4. 📹 Watch from 2:33:29 until 2:36:58 for the ternary operator explanation.
5. 🎮 Using these operators can you create an Exclusive OR operator?
6. 🎮 Can you help the wide-mouthed frog with just the ternary operator?
7. 👩‍💻👨‍💻 Use REPL to find the case where you did not lose the game!
8. 📖 Read Logical Operators on MDN

Exceptions

In JavaScript, when something bad happens and you want execution to stop, you can throw an exception! ⚠️

if(userAge < 0) {
  throw new Error("User can't be less than zero years old!");
}

☝️ In this case, we throw an error if the userAge is less than zero. Kids are starting to use apps earlier these days 😅

We can catch this error somewhere else:

function validateUserAge(userAge) {
  if(userAge < 0) {
    throw new Error("User can't be less than zero years old!");
  }
}
function validate(name, age, address) {
  try {
    validateUserAge(age);
  }
  catch(ex) {
    // ex is the exception throw by validateUserAge
    console.log(ex);
    return false;
  }
}

☝️ Now we can call validate to check on all of our user's properties. If validateUserAge throws an exception, we can catch it, log it out and return false for the validation.

⚠️ Depending on the situation, you may want to allow this error to throw all the way up the call stack. This would be the case for a fatal exception where you want all execution of the program to stop.

1. 👩‍💻👨‍💻 Try out the above code in REPL. Are there any other validations we ought to make?
2. 📖 Read Chapter 8 on errors from Eloquent JavaScript.
3. 📹 Watch this video on error handling from Free Code Camp.
4. 📖 Read about different types of errors, throw and try catch on MDN.

Type Coercion

Type coercion is a big topic in JavaScript, especially since some of it can happen automatically as JavaScript is a loosely typed language.

Here are two examples of explicit coercion:

const a = (123).toString();
console.log(a); // 123
console.log(typeof a); // string
const b = parseInt("123");
console.log(b); // 123
console.log(typeof b); // number

And two examples of implicit coercion:

const c = 123 + "4";
console.log(c); // 1234
console.log(typeof c); // string
const d = +"1234";
console.log(d); // 1234
console.log(typeof d); // number

☝️ Notice that in the second examples, JavaScript is sorta making its best guess about the behavior you want, whereas in the first examples you are explicitly defining the behavior.

1. 📹 Watch from 2:31:47 to 2:33:29 to learn about parseInt.
2. 📖 Read value type determination to learn about typeof.
3. 👩‍💻👨‍💻 Try out the above example. Can you convert other types? What happens when you add a boolean and a string together?
4. 📖 Read automatic type conversion from Eloquent JavaScript
5. 📖 Read Type Coercion to learn about the many ways to change types. Read the first few sections and as much you need to handle the challenges below 👇
6. 🎮 Can you convert this string to a number?
7. 🎮 Can you convert this number to a string?
8. 🎮 Can you convert this boolean to its string representation?
9. 🎮 Can you convert this boolean to a word?
10. 🎮 Can you convert this string to an array? The split method will come in handy here 😉
11. 🎮 Can you convert this number to a reversed array of digits? The array reverse method may be helpful here

Destructuring, Spread & Rest

The latest versions of JavaScript have added many convenience features that make it really easy to pull values out of objects!

const obj = {
  a: 2,
  b: 3,
}

// destructure assignment
const { a, b } = obj;

console.log(a); // 2
console.log(b); // 3

1. 📖 Read about these features in our guide here.
2. 👩‍💻👨‍💻 Try out Destructuring, Spread arguments, and Rest parameter examples in REPL!
3. 📹 Watch from 2:55:33 until 3:03:42 to learn more about these features
4. 📖 Read about Transpiling from YDKJS
5. 📖 Read about Spread/Rest, Default Value Expressions and Destructuring from YDKJS
6. 📖 Read about these features from Eloquent Javascript as well.

🤔 It’s worth thinking, “How can I start to incorporate these features in code that I write?”

This Keyword

const person = {
  name: "Bob",
  speak: function() {
    return `Hi, I am ${this.name}!`;
  }
};
console.log( person.speak() ); // Hi, I am Bob!

☝️ The this keyword allows you to execute a function in a certain context. The context of the above function speak is the object person with the name "Bob".

There are ways to override the context of the speak function. The call method for example:

const person = {
  name: "Bob",
  speak: function() {
    return `Hi, I am ${this.name}!`;
  }
};
const alice = { name: "Alice" }
console.log( person.speak.call(alice) ); // Hi, I am Alice!

☝️ Even though the speak function is defined on the person object with the name "Bob", we are choosing to override the context at the call-site. There are many rules that govern what this is. See the resources below to learn more. 👇

1. 📖 Read the Methods section in Eloquent JavaScript.
2. 👩‍💻👨‍💻 Try out the above example. Can you add an age property to the person?
3. 📖 Kyle Simpson does a great job covering the this keyword and its more confusing aspects. This is definitely a worthwhile read on this subject! Chapter 2 gets a bit more complex, it’s worth understanding the binding rules of this and how they are determined by call-site.
4. 🎮 Can you determine why firstName and lastName are not available on the returned object?
5. 📹 Watch this keyword from FreeCodeCamp
6. 📖 Learn about this on MDN

Arrow Functions

Arrow syntax is a simpler way to declare functions:

const sum1 = function(x, y) {
  return x + y;
}
const sum2 = (x, y) => x + y
console.log( sum1(3,5) ); // 8
console.log( sum2(3,5) ); // 8

☝️ These two functions work the same way! As we’ll read below, there are some differences with how they bind this.

1. 📹 Watch from 2:47:17 until 2:55:33 to learn about arrow functions
2. 📖 Read about Arrow Functions in regards to this
3. 👩‍💻👨‍💻 Can you turn this function into an arrow function?
4. 📖 Read Lexical This in YDKJS.
5. 🎮 Can you fill the friends array? This one is a bit tricky! If you look at the test cases, you’ll notice that the value provided is an array so you’ll need to spread the argument f.

Prototypes

Prototypes allow us to define a reusable function that can be called with a different object context. For instance, let’s say we had a Hero:

const Hero = function(power) {
  this.power = power;
}
Hero.prototype.explainPower = function() {
  console.log(`My power is ${this.power}`);
}
const hero1 = new Hero("High Jump");
const hero2 = new Hero("Fire Balls");
hero1.explainPower(); // My power is High Jump
hero2.explainPower(); // My power is Fire Balls

☝️ In this example, both heroes have access to the same explainPower function via the prototype chain and this is different based on which hero is calling it.

⚠️ Note that this example would not work if we used an arrow function for explainPower. In that case, what would this be bound as? 🤔

1. 👨‍💻👩‍💻 Try out the above example. Can you give the hero some hit points and the ability to attack enemies? 🦸🦹
2. 📖 Read the prototypes section on Eloquent JavaScript
3. 📖 MDN has a great guide on inheritance and the prototype chain to help explain these concepts.
4. 🎮 Can you fix the counter prototype?
5. 🎮 Is this string uppercase?
6. 🎮 Can you create regular and super balls?
7. 🎮 Is it worth it to pirate the ship?
8. 🎮 Can you handle the default value for the cube side?

If that section is a bit overwhelming don’t worry! 😅

It’s great to have a good understanding of prototypes, although many times you will not need them in day-to-day JavaScript programming. They also form the base mechanism for the relatively new ECMAScript2015 Class keyword.

Classes

As noted by the MDN documentation below, “JavaScript Classes are primarily syntactical sugar over JavaScript’s existing prototype-based inheritance”.

Essentially, classes give us a different way to look at object prototypes. For the Hero example from above:

class Hero {
  constructor(power) {
    this.power = power;  
  }
  explainPower() {
    console.log(`My power is ${this.power}`);
  }
}
const hero1 = new Hero("High Jump");
const hero2 = new Hero("Fire Balls");
hero1.explainPower(); // My power is High Jump
hero2.explainPower(); // My power is Fire Balls

☝️ Notice how the constructor takes the place of the function we assigned to the Hero in the prototype example. And the explainPower function is now placed inside the Hero definition rather than on the prototype.

1. 👨‍💻👩‍💻 Try out the above example. Do you like our class Hero better or worse than our prototype Hero? 🦸
2. 📖 Read the Classes and Class Notation sections of Eloquent JavaScript.
3. 📖 See the MDN Reference for Classes
4. 🎮 Can you complete this person class?
5. 🎮 Can you make the cat extend the animal class?
6. 📖 Check out chapter 3, chapter 4 and chapter 5 of YDKJS “this & Object Prototypes” to go in great depth about the class and prototype mechanics in Javascript.

Numeral Systems

If you’re planning to follow up this curriculum with the Ethereum Developer Guide or the Ethereum Developer Bootcamp, we strongly suggest you brush up on your numeral systems!

It will be very help to have a good understanding of both binary and hexadecimal before working with blockchain technology.

1. 📖 Start by Understanding Binary.
2. 🎮 Can you convert this number to binary? Hint The toString documentation may be helpful here!
3. 🎮 Can you convert this binary to decimal? Hint The parseInt documentation may be helpful here!
4. 🎮 Can you create some fake binary?
5. 📖 Learn about Hexadecimal as well!
6. 📖 Also helpful to know JavaScript has many bitwise operators.

Array Sort

On the Array prototype you will find a sort method which is a super helpful utility!

const letters = ['d','b','a','c'];
console.log(letters.sort()); // ['a','b','c','d']
const numbers = [5,22,31,45];
console.log(numbers.sort()); // [22,31,45,5]

⚠️ ☝️ Be careful about the default sorting behavior! It will work for strings, however it will sort numbers as if they were strings. 😱

Instead, you’ll need to provide a comparison function

const numbers = [5,22,31,45];
const sorted = numbers.sort((a, b) => {
  if(a > b) {
    return 1;
  }
  else if(a < b) {
    return -1;
  }
  return 0;
});
console.log(sorted); // [ 5, 22, 31, 45 ]

☝️ In this function, any negative number indicates that the first number should come before the second number. Any positive number indicates the opposite. Zero indicates these values are equal in terms of sorting.

Due to the property that any negative value or any positive value can be used, this algorithm can be radically simplified:

const numbers = [5,22,31,45];
const sorted = numbers.sort((a, b) => a - b);
console.log(sorted); // [ 5, 22, 31, 45 ]

1. 👨‍💻👩‍💻 Try out the above example. Can you reverse the sort order?
2. 🎮 Can you find the difference between the oldest and youngest age?
3. 🎮 Can you supersize this number?
4. 🎮 Can you merge these two sorted arrays into one?
5. 🎮 Can you sort these reindeer by their last names?
6. 🎮 Can you double sort these values based on type then value?

Array Map

On the Array prototype you will find a map method which helps translate each value in the array to a different value based on a function.

const arr = [1,2,3];
const newArr = arr.map(x => x + 1);
console.log(newArr); // [2,3,4]

1. 👨‍💻👩‍💻 Try out the above example. Can you add two to each number?
2. 🎮 Can you double this array of numbers?

Array Filter

On the Array prototype you will find a filter method which allows you to choose which elements you want in the resulting array.

const arr = [1,2,3,4];
// take only the event numbers
const evens = arr.map(x => x % 2 === 0);
console.log(evens); // [2,4]

1. 👨‍💻👩‍💻 Try out the above example. Can you take only the odd numbers instead?
2. 🎮 Can you filter out the geese?

Array Reduce

On the Array prototype you will find a reduce method which allows you to aggregate some value across an array of elements.

const arr = [1,2,3,4];
const sum = arr.reduce((p,c) => p + c);
console.log(sum); // 10

1. 👨‍💻👩‍💻 Try out the above example. Can you get the product of all the numbers instead?
2. 🎮 Can you find the average of the numbers?
3. 🎮 Can you get the average and round it?
4. 🎮 Can you find the product of all of these numbers?
5. 🎮 Can you count all the sheep?

Returning Functions

Notice how we were passing functions as an argument to sort, map, filter, and reduce. We can also return a function from our function! Let's see a case where that may be helpful.

1. 📖 This guide will explain Wrapping Functions for error reporting purposes
2. 📹 Watch the video of Wrapping Functions

Asynchronous Callbacks

The simplest example of an asynchronous callback in JavaScript uses setTimeout:

setTimeout(() => {
  // after three seconds
  console.log('three seconds later');
}, 3000);
setTimeout(() => {
  // after one second
  console.log('one second later');
}, 1000);

☝️ In this case "one second later" will be logged before "three seconds later" even though the latter is written higher in the program. The main program wires up these callbacks and later the callbacks will be called after the time has elapsed.

1. 👨‍💻👩‍💻 Try out the above example. We can also use the clearTimeout method to clear the the first timeout as in this example.
2. 📖 You can read more about setTimeout method on MDN.
3. 📖 Read about asynchronous programming concepts from MDN.
4. 📖 Read Chapter 11 of Eloquent JavaScript up until the Promises section.
5. 📖 Read Asynchrony and Asynchronous Callbacks in YDKJS.

Promises

Promises give us an object to associate some asynchronous behavior with.

I could tell you that I promise I will pay you $5 tomorrow. With that money, you might buy a sandwich. You can take my promise and plan on buying that sandwich tomorrow. In JavaScript that might look like this:

getPaid.then(() => {
  buySandwich();
});

☝️ Notice that the buySandwich function is invoked inside of a callback function wired up to the getPaid promise. Upon getting paid, you'll be able to buy the sandwich. 🥪 😋

A promise can be created use the Promise object. For instance, we could make a promise around setTimeout:

const later = new Promise((resolve) => {
  setTimeout(() => {
    resolve();
  }, 3000);
});
later.then(() => {
  console.log('I got called later!');
});
later.then(() => {
  console.log('I got called later too!');
});

☝️ After three seconds, both of these callbacks wired up to the .then will be called, when the resolve function is invoked.

1. 👨‍💻👩‍💻 Try out the above example!
2. 📖 Read about the Promise Object on MDN.
3. 📹 Check out this video on Promises.
4. 📖 Read the Promises section in Eloquent JavaScript.
5. 📖 Read the Promises chapter of YDKJS.

Server-Side and Node JS

1. 📖 Learn to Setup Node.js in this guide.
2. 📖 Understand the benefits of working with Node Package Manager.
3. 📖 Learn to run your own Node Server.
4. 📖 Serve HTML from you Node Server