1. Use const and let instead of var
Always use const and let to declare variables. const for constants and let for values you want to reassign. Avoid var due to hoisting issues.
2. Learn arrow functions
Arrow functions are shorter and help you write cleaner code, especially for callbacks:
const greet = name => console.log(`Hello, ${name}`);3. Master event handling
JavaScript is all about interactions. Learn how to handle events properly:
const button = document.querySelector("button");
button.addEventListener("click", () => {
alert("Button clicked!");
});
4. Practice DOM manipulation
Manipulate HTML elements dynamically using JavaScript to make your site interactive:
document.querySelector("h1").textContent = "New Title";
document.querySelector(".box").classList.add("active");
5. Challenge: Toggle Button
Can you create a button that shows and hides this solution on click? Try it out!
const btn = document.querySelector(".solution-toggle");
const content = document.querySelector(".solution-content");
btn.addEventListener("click", () => {
content.classList.toggle("show");
});
6. Bonus Tip: Template Literals
Use backticks ` for easy string interpolation and multi-line strings:
const name = "Alex";
console.log(`Welcome, ${name}!`);
7. Console Tricks
Use console.table() and console.group() to debug better:
const users = [
{ name: "Alice", age: 22 },
{ name: "Bob", age: 28 },
];
console.table(users);