## Javascript #### Variables and Troubleshooting Errors See: - <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables" target="_blank">Storing the information you need — Variables</a> - <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong" target="_blank">What went wrong? Troubleshooting JavaScript</a> --- ## Terminology <dl> <dt>Declaration</dt> <dd>Creating a variable name in memory (with or without a value) using the <code>const</code> and <code>let</code> declaration keywords.</dd> <dt>Assignment</dt> <dd>When we give a variable a value using the <code>=</code> assignment operator. If a variable hasn't been assigned, it's value will be <code>undefined</code>.</dd> </dl> --- ## Declaration Keywords Variables should be initially declared (a name created in memory) with a declaration keyword. This is only needed when the variable is first created. 1. `const`: The value of a constant can't be re-assigned later. 2. `let`: If you need to reassign a variable later, you should use `let`. 3. `var`: This keyword is the classic (ES5) method of declaring a variable and should be avoided. --- ## Which one to use? Of the three ways you can declare a new variable, we recommend this order: - Try `const` first; - If you get an assignment error, use `let`; - Avoid the use of `var`. --- ## Key Takeaways - Variables have a value of `undefined` until they are assigned. - Declaration keywords (`const` and `let`) are only used the first time you declare the variable. - Arrays and objects defined with `const` are still changeable, they just can't be reassigned. - Never explicitly assign a variable to `undefined`. When you need a variable to be "nothing" use `null` instead. --- ## Types of Errors - **Syntax errors** - Errors in the rules of writing JS - Easiest to debug - **Run-time errors** - Code technically correct but can't run - Example: File/library/module not found - **Logic errors** - Code is broken but there are no errors - Hardest to debug; sometimes takes hours --- ## Diagnosing Syntax Errors 1. Check the console for errors, 2. Find the file and line number of the error 3. Go to the error in VS Code and look for "squiggly" underlines, and/or code highlighting errors:  4. When in doubt, `console.log()` relevant variables to confirm they are what you expect. 5. If you still can't figure it out, copy and paste the error and search online. You will often find an answer on [Stack Overflow](https://stackoverflow.com/). --- ## Common Syntax Errors #### Variable declaration and assignment --- #### Problem: Using a variable that does not exist Chrome  #### Solutions - Declare a variable with `const` or `let` before use. - Double-check spelling of the variable name --- #### Problem: `const` variable declared but not assigned (initialized) Chrome  ##### Solutions - When using `const`, assign a value with `=`, OR - Declare the variable with `let` instead --- #### Problem: Re-assigning a `const` variable Chrome  #### Solution - Declare the variable with `let` instead --- ## Debugging Run-time Errors 1. Check the Console tab for errors 2. Check the Network tab for: - broken file links, - network errors. 3. If an error provides a file and line number, look for "squiggly underlines" in your editor. --- ## Debugging Logic Errors 1. Understand what you're trying to accomplish. 2. Understand what your code is doing. 3. Form a hypothesis or two before looking at code. 4. Identify key variables or conditions with `console.log()`. See: <a href="https://www.dummies.com/article/technology/programming-web-design/html5/how-to-resolve-javascript-logic-errors-for-html5-and-css3-programming-156883">How to Resolve JavaScript Logic Errors</a> for more