How to Code JavaScript: Modern ES6+ Tutorial for Beginners
Key Takeaways
- Modern JavaScript (ES6+) uses `const` and `let` instead of `var`, arrow functions, and template literals for cleaner code.
- Async/await simplifies handling promises—no more callback hell.
- DOM manipulation lets you update web pages dynamically; start with `querySelector` and `addEventListener`.
- Frameworks like React and Vue build on core JavaScript—master the language first.
---
How to Code JavaScript: A Modern Beginner's Guide
I remember my first JavaScript project: a button that changed color when clicked. It took me three hours to debug because I used `var` and didn't understand scope. Let me save you that headache. This guide teaches modern JavaScript (ES6+) with practical examples, async/await, DOM manipulation, and a peek at frameworks.
1. Variables and Data Types (ES6 Style)
Forget `var`. Use `const` for values that don't change and `let` for those that do. Here's a real example:
```javascript
const userName = "Alex"; // stays the same
let age = 25; // will update
age = 26; // works fine
```
JavaScript has seven data types: `string`, `number`, `boolean`, `null`, `undefined`, `symbol`, and `object`. Check types with `typeof`:
```javascript
console.log(typeof "hello"); // "string"
console.log(typeof 42); // "number"
```
2. Arrow Functions and Template Literals
Arrow functions (`=>`) are shorter and don't bind `this` (which matters later). Template literals (backticks) let you embed variables:
```javascript
const greet = (name) => `Hello, ${name}!`;
console.log(greet("Maria")); // "Hello, Maria!"
```
Compare with old syntax:
```javascript
// Old
function greet(name) {
return "Hello, " + name + "!";
}
```
3. Async/Await: Handling Promises Easily
APIs and file reads return promises. Before async/await, we used `.then()` chains:
```javascript
fetch("https://api.example.com/data")
.then(response => response.json())
.then(data => console.log(data));
```
Now, use `async` and `await` for cleaner code:
```javascript
async function fetchData() {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
console.log(data);
}
fetchData();
```
Tip: Always wrap `await` in a `try/catch` to handle errors:
```javascript
async function safeFetch() {
try {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
return data;
} catch (error) {
console.error("Failed to fetch:", error);
}
}
```
4. DOM Manipulation: Making Pages Interactive
The Document Object Model (DOM) is your HTML as a JavaScript object. Start with `querySelector`:
```javascript
const button = document.querySelector("#myButton");
const message = document.querySelector("#output");
button.addEventListener("click", () => {
message.textContent = "Button clicked!";
message.style.color = "green";
});
```
Real-world example: A counter app:
```javascript
let count = 0;
const counterDisplay = document.querySelector("#counter");
const incrementBtn = document.querySelector("#increment");
incrementBtn.addEventListener("click", () => {
count++;
counterDisplay.textContent = count;
});
```
5. Comparison: Vanilla JavaScript vs. Frameworks
Frameworks like React and Vue are popular, but they're built on vanilla JavaScript. Here's a quick comparison:
| Aspect | Vanilla JavaScript | React |
| -------- | ------------------- | ------- |
| Learning curve | Low | Medium |
| DOM updates | Manual | Virtual DOM (automatic) |
| State management | Manual | Built-in hooks |
| Best for | Small projects, learning | Large apps, teams |
My opinion: Learn vanilla JS first. You'll understand how React works under the hood. Spend 2-3 months on basics before touching a framework.
6. Practical Exercises
1. Build a to-do list: Use `querySelector`, `addEventListener`, and `createElement` to add/remove items.
2. Fetch and display data: Use `fetch` and `async/await` to get data from a free API like JSONPlaceholder.
3. Create a modal: Toggle a div's `display` property with a button click.
7. Common Mistakes to Avoid
- Not using strict mode: Add `"use strict";` at the top to catch errors.
- Forgetting `await`: If you call an async function without `await`, you get a promise, not the value.
- Modifying the DOM in loops: Use `DocumentFragment` for performance if adding many elements.
---
FAQ
Q: Do I need to learn ES6+ first, or can I start with older JavaScript?
A: Start with ES6+. It's cleaner and what most tutorials and jobs use. Old JavaScript (`var`, function expressions) is still valid but less common. Focus on `const`/`let`, arrow functions, and classes.
Q: How long does it take to learn JavaScript for a complete beginner?
A: It depends on your background. With daily practice (1-2 hours), basic proficiency takes 3-6 months. DOM manipulation and async/await click around month 2. Frameworks add another 2-3 months.
Q: Should I learn a framework like React or Vue right away?
A: No. I recommend waiting until you're comfortable with vanilla JS—especially DOM manipulation, promises, and ES6 syntax. Jumping into React without fundamentals leads to confusion. Build 3-5 small projects with plain JavaScript first.
---
*Start coding today. Open your browser's console (F12), type `console.log("Hello, world!");`, and press Enter. You've written your first JavaScript.*