Solving Problems and Understanding Errors

Before you start digging into some pretty nifty JavaScript, we need to begin talking about problem solving: the most important skill a developer needs.

Problem solving is the core thing software developers do. The programming languages and tools they use are secondary to this fundamental skill. You may hear seasoned developers say things like “code is code,” which means that the language you use is not the most important thing. What matters is your ability to solve problems.

From his book, “Think Like a Programmer”, V. Anton Spraul says:

Problem solving is writing an original program that performs a particular set of tasks and meets all stated constraints.

The set of tasks can range from solving small coding exercises all the way up to building a social network site like Facebook or a search engine like Google. Each problem has its own set of constraints, for example, high performance and scalability may not matter too much in a coding exercise but it will be vital in apps like Google that need to service billions of search queries each day.

New programmers often find problem solving the hardest skill to build. It’s not uncommon for budding programmers to breeze through learning syntax and programming concepts, yet when trying to code something on their own, they find themselves staring blankly at their text editor not knowing where to start. This is okay.

The best way to improve your problem solving ability is by building experience by making lots and lots of programs. The more practice you have the better you will be prepared to solve real world problems.

How to Think Like a Programmer

It is extremely important to gain perspective on how to think like a programmer. This will help you understand the process of problem solving and how to approach it.

To do this, read “How to Think Like a Programmer”  by Richard Reis.

Once you have finished reading, return here.

How to Think Like a Programmer (Again)

Just to emphasize how important this is, watch the following video. Yes, it is an hour long - but it is well worth it. It is packed full of information that will make it well worth your time to watch.

Psuedocode

“Psuedocode” is a tool for programmers to plan out their code before they write it.

Pseudocode is writing out the logic for your program in natural language instead of code. It helps you slow down and think through the steps your program will have to go through to solve the problem.

Here is an example of what the pseudocode for a program that prints all numbers up to an inputted number might look like:

When the user inputs a number
Initialize a counter variable and set its value to zero
While counter is smaller than user inputted number increment the counter by one
Print the value of the counter variable

Then, you can write the code to solve the problem.

function printNumbers(userInput) {
  let counter = 0;
  while (counter < userInput) {
    console.log(counter++);
  }
}

This is a basic program to demonstrate how pseudocode looks. There will be more examples of pseudocode included later.

One of the major benefits of pseudocode is that it is “language-agnostic.” This means that you can translate from pseudocode to code in any programming language, and it will still be the same logic.

Here is a short article on Pseudocode: What It Is and How to Write It , if you are interested in learning more (you should be).

Understanding Errors

Reading and understanding error messages is a requirement as a developer. At first glance, many beginners shrink away from error messages as they appear to be “scary” and difficult to understand because they include terms one may not be familiar with.

However, error messages provide developers with a treasure trove of knowledge, and tell you everything you need to know about how to resolve them! Being able to parse error messages and warnings without fear will enable you to effectively debug your applications, receive meaningful help from others, and empower yourself to push forward when faced with an error.

Remember, every developer, no matter how experienced, will encounter errors (frequently!). The sooner you get comfortable with them, the better.

Let’s assume you have written the following code:

This code will run, but it will generate an error. In technical terms, this is called throwing an error. The first part of an error displays the type of error. This provides the first clue as to what you are dealing with. You will learn more about the different error types later in the lesson.

In this example, you have a ReferenceError.

A ReferenceError is thrown when one refers to a variable that is not declared and/or initialized within the current scope. In our case, the error message explains that the error has occurred because c is not defined.

Different errors of this type have different messages based on what is causing the ReferenceError. For example, another message you may run into is ReferenceError: can't access lexical declaration 'X' before initialization.

The next part of an error gives us the name of the file in which you can find the error (in this case, our index.js), and also the line number.

This allows you to easily navigate to the problematic line in your code. Here, the error originates from the fourth line of index.js, which is displayed as a link under the error message with the text at index.js:4. If you click this link, most browsers will navigate to the exact line of code and the rest of your script in the Sources tab of the Developer Tools.

Sometimes your browser’s console will also display the column (or character) in the line at which the error is occurring. In our example, this would be at index.js:4:13.

Stack Traces

Another important part of an error is the stack trace. This helps you understand when the error was thrown in your application, and what functions were called that led up to the error. So, for example, if you have the following code:

const a = 5;
const b = 10;
 
function add() {
  return c;
}
 
function print() {
  add();
}
 
print();

Our function print() should call on add(), which returns a variable named c, which currently has not been declared. The corresponding error is as follows:

The stack trace tells us that:

• c is not defined in scope of add(), which is declared on line 5.
• add() was called by print(), which was declared on line 9.
• print() itself was called on line 12.

Thus the stack trace lets you trace the evolution of an error back to its origin, which here is the declaration of add().

Other Error Types

Say you have two strings that you would like to combine to create one message, such as below:

const str1 = "Hello";
const str2 = "World!";
const message = str1.push(str2);

Here, you will get a TypeError with a message stating that str1.push is not a function. This is a common error message that confuses learners because you might know that .push() is certainly a function (for example, if you have used it to add items to arrays before).

But that’s the key - .push() is not a String method, it is an Array method. Hence, it is “not a function” that you can find as a String method. If you change .push() to .concat(), a proper String method, our code runs as intended!

A good note to keep in mind when faced with a TypeError is to consider the data type you are trying to run a method or operation against. You will likely find that it is not what you think, or the operation or method is not compatible with that type.

Resolving Errors

At this point, you might be wondering how you can resolve these errors.

You can start by understanding that the error message is your friend - not your enemy. Error messages tell you exactly what is wrong with your code, and which lines to examine to find the source of the error. Without error messages it would be a nightmare to debug our code - because it would still not work, you just would not know why!

You should search your error on the web. Most of the time you will be able to find a fix or explanation on StackOverflow or in the documentation. If nothing else, you will receive more clarity as to why you are receiving this error.

Another way is to use console.log() — it is a popular choice for quick debugging. For more involved troubleshooting, using the debugger might be more appropriate, but using console.log() is great for getting immediate feedback without needing to step through your functions. There are also other useful methods such as console.table(), console.trace(), and more!

Debugging

Debugging is the process of finding and fixing errors in your code. It is a crucial skill for developers to have, and is a skill that you will use every day as a developer.

We will not explore debugging in this tech prep work, but you will benefit from doing some research on your own! Specifically, look into your browser’s developer tools and associated debugging features.