SOME JAVASCRIPT NOTES
1. Variable Declarations
These keywords are used to store data for later use.
Keyword Purpose
let Declares a block-scoped variable that can be reassigned.
Declares a block-scoped variable that cannot be reassigned (a
const
constant).
var
An older way to declare variables. It is function-scoped and generally
avoided in modern code.
2. Control Flow & Loops
These keywords manage the logic and "path" your code takes.
if / else: Used to execute a block of code only if a specific condition is true.
switch: Evaluates an expression and matches it against multiple case labels.
for: Creates a loop that runs as long as a condition is met.
while: Runs a block of code repeatedly while a specified condition remains true.
break: Immediately exits a loop or a switch statement.
continue: Skips the rest of the current loop iteration and moves to the next one.
3. Functions & Objects
These define the structure and behavior of your application.
function: Declares a block of code designed to perform a particular task.
return: Stops the execution of a function and sends a value back to the caller.
this: Refers to the object that "owns" the current piece of code being executed.
class: A blueprint for creating objects (introduced in ES6).
new: Creates an instance of an object from a class or constructor function.
4. Asynchronous Programming
Modern JavaScript relies heavily on these to handle tasks that take time (like fetching
data).
async: Defines a function that returns a Promise.
await: Pauses the execution of an async function until a Promise is resolved.
Pro-Tip: The Scope Difference
The way let and const interact with "blocks" (anything inside { }) is one of the most
important concepts to master in JavaScript.
Note: Keywords are case-sensitive. Final is not the same as final, though using words
that look like keywords as variable names is usually a recipe for a headache!
Example
// 'async' tells JS this function will handle tasks that take time
async function getPremiumUsers(users) {
// 'const' for a value that won't change
const premiumStatus = "active";
// 'let' for a value we might update (like a counter)
let count = 0;
// 'if' checks a condition
if (!users || [Link] === 0) {
return "No users found"; // 'return' exits the function early
}
// 'for...of' loop to iterate through the array
for (const user of users) {
if ([Link] === premiumStatus) {
[Link](`Found premium user: ${[Link]}`);
count++;
}
}
// 'await' pauses here until the "database" finishes saving
await saveLogToDatabase(count);
return `Processed ${count} premium users.`;
}
Key Concepts at Play:
The Guard Clause: Using if and return at the very beginning to catch errors is a
professional "best practice."
Scope: The variable count is only accessible inside the getPremiumUsers function
because of where it was declared.
The Wait: Without async/await, the code would try to finish the function before the
database actually saved the data, leading to bugs.
Common "Gotcha": If you try to use await outside of an async function (in older
environments), your code will throw a Syntax Error. They are a package deal!
The Comparison == vs ===
Loose Equality (==)
This operator uses Type Coercion. If the two things you are comparing aren't the same
type (like a string and a number), JavaScript will try to convert one of them to match the
other before checking if they are equal.
5 == "5" is true (JavaScript converts the string to a number).
null == undefined is true.
Strict Equality (===)
This is the gold standard. It checks both the value and the type. No conversions are
allowed. If they aren't the same type, it's an immediate false.
5 === "5" is false (Number vs. String).
5 === 5 is true.
Handling Disasters: try...catch
When you're writing code that might fail (like fetching data from a broken URL), you
don't want your whole app to crash. That’s where try...catch comes in.
async function fetchData() {
try {
// The 'try' block: "Attempt this code"
const response = await fetch("[Link]
const data = await [Link]();
[Link](data);
}
catch (error) {
// The 'catch' block: "If something breaks, do this instead"
[Link]("Oops! The fetch failed:", [Link]);
}
finally {
// The 'finally' block: "Do this no matter what happened"
[Link]("Attempt finished.");
}
}
Why this matters:
try: You put your risky code here.
catch: This gives you a "safety net" to handle the error gracefully instead of
showing a blank screen to the user.
finally: Great for "cleanup" tasks, like hiding a loading spinner.