JavaScript is a programming language used to make web pages interactive and to build many kinds of apps. This cheat sheet covers the essentials students need when reading, writing, and debugging beginner JavaScript code. It gives quick reminders for syntax, common patterns, and rules that are easy to forget.
Students can use it as a printable reference while practicing coding problems or building small projects.
The core ideas include storing values in variables, choosing the right data type, and using functions to organize reusable code. Conditionals let a program make decisions, while loops repeat actions efficiently. Arrays and objects store groups of data, and DOM methods let JavaScript change content on a web page.
Careful attention to braces, parentheses, equality checks, and variable scope helps prevent many common errors.
Key Facts
- Use let for variables that can change, const for variables that should not be reassigned, and avoid var in modern JavaScript.
- Common data types include string, number, boolean, undefined, null, object, and array.
- A function can be declared as function add(a, b) { return a + b; } and called with add(3, 4).
- Use if (condition) { code } else { otherCode } to run different code based on a true or false condition.
- A for loop often uses the pattern for (let i = 0; i < count; i++) { code } to repeat code a set number of times.
- Arrays use zero-based indexing, so the first item in colors is colors[0], not colors[1].
- Objects store key-value pairs, such as let user = { name: 'Ava', score: 10 }; and user.score gives 10.
- Use document.querySelector('#id') to select an element and element.textContent = 'Hello' to change its displayed text.
Vocabulary
- Variable
- A named storage location that holds a value your program can use or update.
- Data type
- A category of value, such as number, string, boolean, array, object, null, or undefined.
- Function
- A reusable block of code that can take inputs, perform steps, and return a result.
- Conditional
- A control structure that runs code only when a condition is true or chooses between different code paths.
- Loop
- A structure that repeats a block of code while a condition is true or for a set number of times.
- DOM
- The Document Object Model, which represents a web page so JavaScript can read and change its elements.
Common Mistakes to Avoid
- Using = instead of === in a condition is wrong because = assigns a value, while === compares both value and type.
- Forgetting that arrays start at index 0 is wrong because array[1] gives the second item, not the first item.
- Leaving out braces, parentheses, or semicolons carelessly can cause syntax errors or make code run in an unexpected way.
- Changing a const variable is wrong because const prevents reassignment after the variable is created.
- Using a variable outside its scope is wrong because variables declared inside a block or function may not exist elsewhere.
Practice Questions
- 1 What value is stored in total after this code runs: let total = 5; total = total + 7;
- 2 An array is defined as let scores = [82, 91, 77, 88]; what is the value of scores[2]?
- 3 Write a function named doubleNumber that takes one number and returns the number multiplied by 2.
- 4 Explain why a programmer might use a function instead of copying and pasting the same code many times.
Understanding JavaScript Essentials
Programs run one statement at a time, so it helps to trace the current value of each variable as the program moves forward. A variable does not always hold the data itself. For simple values such as numbers, text, and true or false values, it behaves like a labeled box.
Arrays and objects work differently. A variable can point to one shared array or object. If two variables point to the same object, changing a property through one variable changes what the other variable sees.
This is a common source of surprising results. A const variable prevents reassignment of the label, but it does not make an object or array unchangeable.
Functions create useful boundaries in a program. Inputs are called parameters, and the values supplied when a function runs are arguments. A return statement sends one result back to the code that called the function.
Without return, a function may still perform an action, but its result is undefined. Scope matters here. A variable declared inside a function is usually available only inside that function.
This prevents different parts of a program from accidentally using or changing the same variable. Give functions clear jobs, such as checking an answer, calculating a total, or displaying a message. Smaller functions are easier to test because there are fewer possible causes when something goes wrong.
Conditions and loops depend on careful control of program flow. A condition must produce true or false. JavaScript can convert some values automatically, but relying on that conversion can cause bugs.
Triple equals compares both the value and its data type, so it is usually the safer choice. In a loop, check three things closely. Notice where the counter starts, when it changes, and when the stopping test becomes false.
An incorrect stopping test can skip an item or keep running forever. When working through an array, remember that its length is one more than the last valid index. This matters when a loop examines every item.
Browser code often runs in response to events rather than from top to bottom only once. A click, key press, or form submission can cause a function to run later. The code must select the intended page element before it can read or change it.
If the script runs before the browser has created that element, the selection may fail. Forms need extra care because submitting one can reload the page unless code prevents the usual browser action. When debugging, read the first console error, not just the final visible problem.
Check spelling, capitalization, missing brackets, and the data type of values. Use temporary console logging to inspect a value right before the line where the program behaves unexpectedly.