Variables set with var var Legacy syntax You will see var used a lot in code

Variables set with var var legacy syntax you will see

This preview shows page 36 - 44 out of 83 pages.

Variables set with "var" var Legacy syntax. You will see var used a lot in code demos from a few years ago Variables set with the "var" keyword can have their values change over the duration of the script Variables set with "var" are globally scoped unless set inside a function var bar = true;
Image of page 36
Variables set with "let" let Similar to "var" but with one key difference "let" variables can have their values change over the duration of the script They differ from "var" in that they are block scoped, meaning if they are set inside "{}" they are scoped to that code block. So if a "let" variable is declared inside an "if" statement it is locked to that block. This is different from "var" let someValue = “zebra”;
Image of page 37
Variables set with "const" const Variables set with the "const" keyword can not have their values change. Once set they are locked to that value for the duration of that script or function call const foo = 23;
Image of page 38
When to use var, let and const If the variables value will change throughout the running of the script use the “ let ” keyword followed by the variable name For variables that will not have their values change throughout the running of the script or function call use the “ const ” keyword For legacy scripts or scripts that will run on older browsers use the var ” keyword let someValue = “zebra”; const foo = 23; var bar = true;
Image of page 39
JavaScript Debugging Unlike other languages, there is no compiler to check your code before running in the browser. Unlike other languages JavaScript is designed to fail silently. Meaning your HTML and CSS will load fine and your JavaScript code will fail silently in the background (with no error messages displayed to the user). This is by design so that a page will still load even if there is an error in your JavaScript Due to the above points your best tool for debugging JavaScript is the developer console found in most browsers
Image of page 40
Developer Tools - A JavaScript Developers Best Friend Most modern browsers have some sort of developer tools You have been using these tools to debug HTML and CSS, now you can use the same tools for debugging JavaScript To access the developer tools (or dev tools) in Chrome you can either: Press F12 (Windows) / Ctrl+Shift+I / Cmd+Option+I (Mac) Right click on the browser window and select "inspect" Once in developer tools in Chrome you will want to select the "Console" tab
Image of page 41
The Console The console is where all your JavaScript errors will be displayed The errors can be cryptic at first, but they will usually tell you a line number where the error occurred (this may not be the original cause of the error, but it will point you in the right direction) The errors will tell you want went wrong. For example if you called a variable "foo" that did not exist you would get this error in the console:
Image of page 42
Console Error Breakdown This is the error. In this case it is a "ReferenceError" meaning you have used an undefined identifier (variable name in this case) This is the script name that caused the error along with the line number that triggered the error. This may not be the original cause of the error but it will point you in the right direction
Image of page 43
Image of page 44

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture