A Quick Review

Introduction

This course assumes that you have a decent grasp on the fundamentals of JavaScript. If you have recently taken our JavaScript fundamentals series then you will be in good shape to continue here. If it’s been a while, you will probably want to take a day or two to study a few concepts and refresh yourself on the basics.

Undefined

Read the Occurrences of undefined in the language section of this article by Dr. Axel Rauschmayer and make sure you understand the cases where the language returns the undefined value.

To make sure that you understand and remember the cases mentioned in the article create at least two examples for each occurence and keep these examples in your notes. (You keep notes, don’t you?)

It’s also worth bookmarking this article and reading it after you have completed the JavaScript course, as it contains some advanced topics that we haven’t touched yet.

Review

Running through "part 1" of MDN’s JavaScript basics course or doing the Basic JavaScript portion of FreeCodeCamp is a great idea for a refresher on the syntax. If you just want a quick reference to skim, try LearnXinY.

It might also be a good idea to do a little practicing before moving on. It may be a good idea to redo one of the later projects from our fundamentals course such as the calculator or rock-paper-scissors. If you want something fresh to work on, now would be a fine time to do some coding exercises from across the net. The following sites are all great places to look.

  • Exercism
  • CodeWars
  • FreeCodeCamp (especially their "Object Oriented", "Functional Programming", and "Algorithm Scripting" sections)
  • JavaScript30 is a great set of tutorials that cover a ton of JS concepts.

Material based on Erik Trautman | The Odin Project
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

Feedback

  • Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.

UPDATED: 02.02.2021

Introduction to JS

How this course will work

JavaScript is the future of the web. More and more of the logic is making its way to the client side in order to facilitate lightning fast user experiences. Javascript is even moving to the server side with Node.js. That’s why in this course we’ll be diving deep into it to make sure you come out with a good understanding of how it works.

You’ve already completed the Web Development 101 course, right? Good, because now we’ll be moving at warp speed into new frontiers. This section will cover a lot of ground and your brain may meltdown a few times, but don’t worry, that’s just a flesh wound. Patch ‘er up and keep going! When in doubt, build something.

The Path

So how is this course set up? It starts with a deeper look at the basics. You should, however, already have completed the Web Development 101 , specifically the Front End Section section before starting this course.

The last thing you’ll do is a final project which integrates everything you’ve learned in all the courses of this curriculum. This is the kind of project that you’ll be telling employers all about and a great chance to prove that you’re now, officially, a serious web developer.

Format

There’s a lot to cover, but it’s been broken up into bite-sized lessons and their accompanying projects. The projects will give you a chance to apply what you’ve learned and to show what you’re capable of. After a few of them, you’ll really start getting the hang of things.

In each lesson:

  1. We’ll introduce the topic briefly and provide you with a list of things you should pay attention to ("Points to Ponder").
  2. You’ll be asked to do readings, watch videos, do online courses or otherwise consume content to initially learn the material.
  3. Every few lessons you will be asked to build a larger project.
  4. Finally, we’ll include additional helpful resources and other potentially useful tidbits at the end of each lesson.

Enough talk, get learning!

JavaScript – An Introduction

Visit the web page JavaScript For Cats – An introduction for new programmers and start learning about the basic concepts of JavaScript.

Here are some of the basic concepts of the language that you’ll become familiar with after finishing this course:

  • The Brower’s console
  • Strings
  • Values and variables
  • Using functions
  • Built in JS functions
  • Download new JS functions
  • Writing new functions
  • Loops
  • Arrays
  • Objects
  • Callbacks

This introduction is one tough cookie, so take a break before diving into it, grab yourself a cup of hot tea or coffee, open up your code editor and let the journey begin!


Watch the following introduction to JavaScript, by Harvard’s CS50 team. Duration: 50 minutes

Do you have any questions regarding the concepts and code presented in the videos? Leave your questions and comments on the comments section at the bottom of the page.

Understanding Error Messages

Understanding JavaScript error messages makes developing easier.

Let’s get familiar with the most common ones:

  • TypeError: This occurs when some value is not the type it’s expected to be. For example trying to call a function that actually isn’t a function because it is undefined:
let notAFunction = 52;
notAFunction();

Uncaught TypeError: notAFunction is not a function

  • SyntaxError: This occurs when the engine encounters syntactically invalid code. A syntax error will also stop the whole file from executing. For example missing an ‘=’ when assigning values to variables or curly braces without an if, for, while, etc.
let someVar 5;

Uncaught SyntaxError: Unexpected number

  • ReferenceError: This occurs when code refers to a value that does not exist in the current context of execution. It can also be thrown by assigning a value to an undeclared variable. For example trying to access a variable from outside a function.
console.log( ghost );

Uncaught ReferenceError: ghost is not defined

Source: JavaScript Engine Errors Explained by Frontend Dude

Practice: Can you create 6 examples that will 2 of each error type?

Exercise

Create an account at Exercism.io, go to the JavaScript track and solve the first 3 exercises: Hello World, Two Fer and Resistor Color. Paste the solutions in a private GitHub repo and submit the URL in the Quiz below.


Material based on Erik Trautman | The Odin Project
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

UPDATED: 17.11.2020

  • [17.11.2020] Adding Understanding Error Types.