feat: Top Learn to Solve Problems and Understand Errors (#55027)

Co-authored-by: Naomi <accounts+github@nhcarrigan.com> Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
2026-05-28 18:26:54 +00:00 · 2024-06-20 21:52:25 +02:00
parent 830c7587cc
commit 27c4957479
10 changed files with 468 additions and 0 deletions
@@ -1273,6 +1273,12 @@
      "top-learn-arrays-and-loops": {
        "title": "Learn Arrays and Loops",
        "intro": ["Learn about arrays and loops in JavaScript."]
+      },
+      "top-learn-to-solve-problems-and-understand-errors": {
+        "title": "Learn to Solve Problems and Understand Errors",
+        "intro": [
+          "Learn how to solve problems and understand errors in JavaScript."
+        ]
      }
    }
  },
@@ -0,0 +1,42 @@
+{
+  "name": "Learn to Solve Problems and Understand Errors",
+  "isUpcomingChange": true,
+  "dashedName": "top-learn-to-solve-problems-and-understand-errors",
+  "helpCategory": "Odin",
+  "order": 15,
+  "superBlock": "the-odin-project",
+  "challengeOrder":[
+    {
+      "id": "66581a78b1eb2281159492fa",
+      "title": "Learn to Solve Problems and Understand Errors Question A"
+    },
+    {
+      "id": "66581a7ab1eb2281159492fb",
+      "title": "Learn to Solve Problems and Understand Errors Question B"
+    },
+    {
+      "id": "66581a7bb1eb2281159492fc",
+      "title": "Learn to Solve Problems and Understand Errors Question C"
+    },
+    {
+      "id": "66581a7bb1eb2281159492fd",
+      "title": "Learn to Solve Problems and Understand Errors Question D"
+    },
+    {
+      "id": "66581a7cb1eb2281159492fe",
+      "title": "Learn to Solve Problems and Understand Errors Question E"
+    },
+    {
+      "id": "66581a7db1eb2281159492ff",
+      "title": "Learn to Solve Problems and Understand Errors Question F"
+    },
+    {
+      "id": "66581a7eb1eb228115949300",
+      "title": "Learn to Solve Problems and Understand Errors Question G"
+    },
+    {
+      "id": "66581a7fb1eb228115949301",
+      "title": "Learn to Solve Problems and Understand Errors Question H"
+    }
+  ]
+}
@@ -0,0 +1,53 @@
+---
+id: 66581a78b1eb2281159492fa
+title: Learn to Solve Problems and Understand Errors Question A
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-question-a
+---
+
+# --description--
+
+Before you start digging into some pretty nifty JavaScript, you 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.
+
+From his book, "Think Like a Programmer", V. Anton Spraul defines problem solving in programming as:
+
+> 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.
+
+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'll be prepared to solve real world problems.
+
+# --question-- 
+
+## --assignment--
+
+Read <a href="https://www.freecodecamp.org/news/how-to-think-like-a-programmer-lessons-in-problem-solving-d1d8bf1de7d2/" target="_blank">How to Think Like a Programmer - Lessons in Problem Solving</a> by Richard Reis.
+
+## --text--
+
+According to V. Anton Spraul in "Think Like a Programmer," what is problem solving in programming?
+
+## --answers--
+
+Learning the syntax and concepts of different programming languages.
+
+---
+
+Building applications with high performance and scalability as the key features.
+
+---
+
+Writing an original program that performs a specific set of tasks and meets all stated constraints.
+
+---
+
+Solving coding exercises to improve programming skills.
+
+
+## --video-solution--
+
+3
@@ -0,0 +1,56 @@
+---
+id: 66581a7ab1eb2281159492fb
+title: Learn to Solve Problems and Understand Errors Question B
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-question-b
+---
+
+# --description--
+
+## Understand the problem
+The first step to solving a problem is understanding exactly what the problem is. If you don’t understand the problem, you won’t know when you’ve successfully solved it and may waste a lot of time on a wrong solution.
+
+To gain clarity and understanding of the problem, write it down on paper, reword it in plain English until it makes sense to you, and draw diagrams if that helps. When you can explain the problem to someone else in plain English, you understand it.
+
+### Plan
+Now that you know what you’re aiming to solve, don’t jump into coding just yet. It’s time to plan out how you’re going to solve it first. Some of the questions you should answer at this stage of the process:
+
+- Does your program have a user interface? What will it look like? What functionality will the interface have? Sketch this out on paper.
+
+- What inputs will your program have? Will the user enter data or will you get input from somewhere else?
+
+- What’s the desired output?
+
+- Given your inputs, what are the steps necessary to return the desired output?
+
+The last question is where you will write out an algorithm to solve the problem. You can think of an algorithm as a recipe for solving a particular problem. It defines the steps that need to be taken by the computer to solve a problem in pseudocode.
+
+# --question-- 
+
+## --assignment--
+Watch <a href="https://www.youtube.com/watch?v=azcrPFhaY9k" target="_blank">How to Begin Thinking Like a Programmer</a> by Coding Tech. It’s an hour long but packed full of information and definitely worth your time watching.
+
+## --text--
+
+What should you do before starting to code according to the provided text?
+
+## --answers--
+
+Immediately start coding to see what problems arise.
+
+---
+
+Write out the problem in plain English and make sure you can explain it to someone else.
+
+---
+
+Sketch the user interface and start coding the most complex functions first.
+
+---
+
+Collect all possible inputs from users and other sources.
+
+
+## --video-solution--
+
+2
@@ -0,0 +1,53 @@
+---
+id: 66581a7bb1eb2281159492fc
+title: Learn to Solve Problems and Understand Errors Question C
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-question-c
+---
+
+# --description--
+
+## Psuedocode
+
+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’s an example of what the pseudocode for a program that prints all numbers up to an inputted number might look like:
+
+```bash
+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
+```
+
+This is a basic program to demonstrate how pseudocode looks. There will be more examples of pseudocode included in the assignments.
+
+
+# --question-- 
+
+## --assignment--
+Read this <a href="https://builtin.com/data-science/pseudocode" target="_blank"> Pseudocode: What It Is and How to Write It</a> article from Built In.
+
+## --text--
+
+What are the benefits of using pseudocode according to the linked article?
+
+## --answers--
+
+Pseudocode is primarily beneficial for beginners as it helps them learn programming languages faster by skipping complex syntax.
+
+---
+
+Pseudocode simplifies communication with non-programmers, aids in code construction, provides a good basis for documentation, and helps in bug detection.
+
+---
+
+Pseudocode entirely eliminates the need for programmers to understand or use programming languages, making it the primary tool for professional coders.
+
+---
+
+Pseudocode is used exclusively for creating detailed flowcharts that replace traditional coding in complex software development environments.
+
+## --video-solution--
+
+2
@@ -0,0 +1,39 @@
+---
+id: 66581a7bb1eb2281159492fd
+title: Learn to Solve Problems and Understand Errors Question D
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-question-d
+---
+
+# --description--
+
+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.
+
+# --question-- 
+
+## --text--
+
+According to the text, why should developers not shy away from error messages?
+
+## --answers--
+
+Error messages are only for advanced programmers and can be ignored by beginners until they gain more experience.
+
+---
+
+Error messages need to be memorized completely to be effective in programming.
+
+---
+
+Error messages provide crucial information that helps developers understand and fix problems in their code.
+
+---
+
+Error messages are meant to be handled by automated debugging tools and do not require human interpretation.
+
+
+## --video-solution--
+
+3
@@ -0,0 +1,58 @@
+---
+id: 66581a7cb1eb2281159492fe
+title: Learn to Solve Problems and Understand Errors Question E
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-question-e
+---
+
+# --description--
+
+Let’s assume you have written the following code:
+
+```javascript
+const a = "Hello";
+const b = "World";
+
+console.log(c);
+```
+
+This code will run, but it will generate an error. In technical terms, this is called <dfn>throwing</dfn> an error. The first part of an error displays the type of error. This provides the first clue as to what you're dealing with. You'll learn more about the different error types later in the lesson. In this example, you have a `ReferenceError`.
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/175b5ef2a1b4758a7b75f4ef43d7e27203e5707b/foundations/javascript_basics/understanding_errors/imgs/00.png" width="100%" alt="An error being displayed in the developer console"/>
+
+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 `script.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 `script.js`, which is displayed as a link under the error message with the text at `script.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 `script.js:4:13`.
+
+# --question--
+
+## --text--
+
+What does the `ReferenceError` in the provided JavaScript code indicate?
+
+## --answers--
+
+The variable used has been declared but used incorrectly in its type.
+
+---
+
+The variable called in the code has not been declared within the current scope.
+
+---
+
+The code has an issue with its syntax that prevents it from being parsed correctly.
+
+---
+
+The variable used has been declared but not initialized within the current scope.
+
+
+## --video-solution--
+
+2
@@ -0,0 +1,63 @@
+---
+id: 66581a7db1eb2281159492ff
+title: Learn to Solve Problems and Understand Errors Question F
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-question-f
+---
+
+# --description--
+
+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:
+
+```javascript
+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:
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/284f0cdc998be7e4751e29e8458323ad5d320303/foundations/javascript_basics/understanding_errors/imgs/01.png" width="100%" alt="An error showing with a stacktrace in the developer console">
+
+The stack trace tells us that:
+
+1. `c is not defined` in scope of `add()`, which is declared on line 5.
+1. `add()` was called by `print()`, which was declared on line 9.
+1. `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()`.
+
+# --question--
+
+## --text--
+
+How does the stack trace help in debugging the error in the provided JavaScript code?
+
+## --answers--  
+
+The stack trace shows that the function `add()` correctly returns the value of `c`.
+
+---
+
+The stack trace indicates which line in the code needs to be edited to correct a syntax error.
+
+---
+
+The stack trace provides a detailed path of function calls leading to the error, helping identify where `c` is incorrectly referenced.
+
+---
+
+The stack trace only indicates that `print()` was called, but does not provide details about the error in `add()`.
+
+## --video-solution--
+
+3
@@ -0,0 +1,56 @@
+---
+id: 66581a7eb1eb228115949300
+title: Learn to Solve Problems and Understand Errors Question G
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-question-g
+---
+
+# --description--
+
+Say you have two strings that you would like to combine to create one message, such as below:
+
+```js
+const str1 = "Hello";
+const str2 = "World!";
+const message = str1.push(str2);
+```
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/4ed59981b4ce2c60b5b83bf7415d3127b61821f5/foundations/javascript_basics/understanding_errors/imgs/03.png" style="width:100%" alt="an example of a type error in the Chrome developer console">
+
+Here, you'll 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's 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'll likely find that it is not what you think, or the operation or method is not compatible with that type.
+
+# --question-- 
+
+## --text--
+
+Why does the following JavaScript code result in a `TypeError`?
+
+```js
+const str1 = "Hello";
+const str2 = "World!";
+const message = str1.push(str2);
+```
+
+## --answers--
+
+The `.push()` method can only be used on objects, not strings.
+
+---
+
+The `.push()` method is not available for strings because it is an Array method.
+
+---
+
+The `.push()` method is incorrectly spelled and should be .pusch().
+
+---
+
+The `TypeError` is a result of a syntax error in the JavaScript code.
+
+## --video-solution--
+
+2
@@ -0,0 +1,42 @@
+---
+id: 66581a7fb1eb228115949301
+title: Learn to Solve Problems and Understand Errors Question H
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-question-h
+---
+
+# --description--
+
+At this point, you might be wondering how you can resolve these errors.
+
+1. 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 wouldn’t know why!
+
+1. You shoud 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.
+
+1. 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!
+
+# --question--
+
+## --text--
+
+When encountering an error in your code, which of the following is NOT a recommended step for identifying and resolving the issue?
+
+## --answers--
+
+Utilizing `console.log()` or other console methods to debug and gain insights into the values and state of your code.
+
+---
+
+Searching for the error message on resources like StackOverflow or reading documentation.
+
+---
+
+Ignoring the error messages and guessing what might be wrong.
+
+---
+
+Using error messages as a guide to understand what part of the code is causing the problem.
+
+## --video-solution--
+
+3