JavaScript Basics & Troubleshooting
Before you dive deep into the code, here are the most common JavaScript concepts used in this course, along with solutions to errors you might face.
1. Arrow Functions
In modern JavaScript (and especially React), you will see arrow functions used constantly instead of the traditional function keyword. They are shorter and handle scope better.
// Old Way (Traditional Function)
function sayHello(name) {
return "Hello " + name;
}
// New Way (Arrow Function)
const sayHello = (name) => {
return "Hello " + name;
};
// Even shorter! (Implicit Return)
const sayHello = (name) => "Hello " + name;2. Promises and Async Operations
When we ask a database for information or fetch data from an API, it takes time. JavaScript uses Promises (via .then() and .catch()) to wait for the data to arrive without freezing the entire application.
axios.get('http://localhost:5000/notes')
.then((response) => {
// This runs when the data successfully arrives
console.log(response.data);
})
.catch((error) => {
// This runs if the server crashes or the link is wrong
console.error("Oops, an error occurred:", error);
});3. Object Destructuring
Destructuring is a clean way to extract specific variables out of a large object. You will see this used often in React when passing "props".
const user = {
name: "Sura",
role: "Admin",
age: 28
};
// Instead of doing this:
// const name = user.name;
// const role = user.role;
// You can Destructure it in one line!
const { name, role } = user;
console.log(name); // Outputs: "Sura"4. Common Errors & Troubleshooting
Stuck? Here are the most frequent issues students run into.
🔴 Error: EADDRINUSE: address already in use :::5000
Why: You already have a Node server running on port 5000 in another terminal window.
Fix: Find the other terminal window and press Ctrl + C to stop it, or change your server port to 5001.
🔴 Error: CORS policy / Blocked by CORS
Why: Your browser blocked the frontend from talking to the backend for security reasons.
Fix: Ensure you ran npm install cors in your backend, and that app.use(cors()); is included in your server.js file.
🔴 Error: Cannot read properties of undefined
Why: You are trying to display data before the backend has finished sending it.
Fix: Add a fallback in your React component. E.g., {notes ? notes.title : "Loading..."}