Mengapa JavaScript Penting di 2024?
JavaScript adalah bahasa pemrograman yang paling populer di dunia. Dengan JavaScript, Anda bisa membuat website yang interaktif, aplikasi mobile, bahkan aplikasi desktop. Di era modern ini, hampir semua website menggunakan JavaScript.
💡 Tips
JavaScript digunakan oleh 97.8% dari semua website sebagai client-side programming language!
JavaScript Fundamentals
Variables dan Data Types
// Modern JavaScript menggunakan let dan const
let userName = "John Doe"; // Variable yang bisa diubah
const userAge = 25; // Variable yang tidak bisa diubah
const isActive = true; // Boolean
const userSkills = ["HTML", "CSS", "JavaScript"]; // Array
const userProfile = {
name: "John",
age: 25,
skills: ["HTML", "CSS", "JS"]
}; // ObjectFunctions dan Arrow Functions
// Traditional function
function greetUser(name) {
return "Hello, " + name + "!";
}
// Arrow function (ES6+)
const greetUserModern = (name) => {
return `Hello, ${name}!`;
};
// Short arrow function
const greetUserShort = name => `Hello, ${name}!`;
// Usage
console.log(greetUser("John")); // Hello, John!DOM Manipulation
DOM (Document Object Model) manipulation adalah cara JavaScript berinteraksi dengan HTML:
// Selecting elements
const button = document.getElementById('myButton');
const elements = document.querySelectorAll('.card');
// Changing content
button.textContent = 'Click Me!';
button.innerHTML = '<span>Click Me!</span>';
// Adding event listeners
button.addEventListener('click', function() {
alert('Button clicked!');
});
// Modern event listener with arrow function
button.addEventListener('click', () => {
console.log('Button clicked!');
});
// Changing styles
button.style.backgroundColor = '#007bff';
button.classList.add('active');
button.classList.toggle('hidden');Modern JavaScript (ES6+)
Fitur-fitur modern JavaScript yang wajib dikuasai:
Template Literals
// Old way
const message = "Hello, " + userName + "! You have " + messageCount + " messages.";
// Modern way with template literals
const message = `Hello, ${userName}! You have ${messageCount} messages.`;
// Multi-line strings
const htmlTemplate = `
<div class="card">
<h3>${title}</h3>
<p>${description}</p>
</div>
`;Destructuring
// Array destructuring
const colors = ['red', 'green', 'blue'];
const [primary, secondary, tertiary] = colors;
// Object destructuring
const user = { name: 'John', age: 25, city: 'Jakarta' };
const { name, age, city } = user;
// Function parameter destructuring
const displayUser = ({ name, age }) => {
console.log(`${name} is ${age} years old`);
};Async/Await untuk API Calls
// Modern way to handle API calls
const fetchUserData = async (userId) => {
try {
const response = await fetch(`/api/users/${userId}`);
const userData = await response.json();
return userData;
} catch (error) {
console.error('Error fetching user data:', error);
throw error;
}
};
// Usage
const loadUser = async () => {
try {
const user = await fetchUserData(123);
displayUser(user);
} catch (error) {
showErrorMessage('Failed to load user data');
}
};Best Practices JavaScript 2024
- Gunakan const dan let, hindari var
- Prefer arrow functions untuk callback
- Gunakan template literals untuk string interpolation
- Implement error handling dengan try/catch
- Gunakan async/await daripada .then()
- Destructure objects dan arrays
- Gunakan modern array methods (map, filter, reduce)
- Implement proper event delegation