// ===== VARIABLE DECLARATION =====
// Modern JavaScript menggunakan let dan const (hindari var)// const – untuk nilai yang tidak berubah
const siteName = “Kelas Programmer”;
const currentYear = 2024;
const isLearning = true;

// let – untuk nilai yang bisa berubah
let userName = “Budi”;
let userAge = 25;
let userScore = 0;

// ===== TIPE DATA PRIMITIF =====
// 1. String – teks
let message = “Belajar JavaScript itu menyenangkan!”;
let template = `Halo ${userName}, selamat datang di ${siteName}`;

// 2. Number – angka (integer dan float)
let price = 150000;
let discount = 0.15;
let total = price * (1 – discount);

// 3. Boolean – true/false
let isLoggedIn = false;
let hasPermission = true;
let isComplete = userName.length > 0;

// 4. Undefined – variabel belum diberi nilai
let undefinedVar;
console.log(undefinedVar); // undefined

// 5. Null – nilai kosong yang disengaja
let emptyValue = null;

// ===== TIPE DATA COMPLEX =====
// 1. Array – kumpulan data
const fruits = [“apel”, “jeruk”, “mangga”, “pisang”];
const numbers = [1, 2, 3, 4, 5];
const mixed = [“text”, 123, true, null];

// 2. Object – data terstruktur
const student = {
name: “Sari”,
age: 22,
major: “Computer Science”,
isActive: true,
grades: [85, 90, 78, 92],
address: {
city: “Jakarta”,
zipCode: “12345”
}
};

// ===== CHECKING TIPE DATA =====
console.log(typeof message); // “string”
console.log(typeof userAge); // “number”
console.log(typeof isLoggedIn); // “boolean”
console.log(typeof fruits); // “object” (array adalah object)
console.log(typeof student); // “object”
console.log(typeof undefinedVar); // “undefined”

// Cek apakah array
console.log(Array.isArray(fruits)); // true
console.log(Array.isArray(student)); // false

// ===== TEMPLATE LITERALS (ES6+) =====
const greeting = `
Halo ${student.name}!
Umur: ${student.age} tahun
Jurusan: ${student.major}
Nilai rata-rata: ${student.grades.reduce((a, b) => a + b) / student.grades.length}
`;

console.log(greeting);

// ===== DESTRUCTURING ASSIGNMENT =====
// Array destructuring
const [firstFruit, secondFruit, …otherFruits] = fruits;
console.log(firstFruit); // “apel”
console.log(otherFruits); // [“mangga”, “pisang”]

// Object destructuring
const { name, age, major } = student;
console.log(name); // “Sari”
console.log(age); // 22
console.log(major); // “Computer Science”

// ===== SPREAD OPERATOR =====
const moreFruits = [“durian”, “rambutan”];
const allFruits = […fruits, …moreFruits];
console.log(allFruits); // gabungan semua buah

const updatedStudent = {
…student,
age: 23,
semester: 6
};
console.log(updatedStudent);

// ===== FUNCTION DECLARATION =====
// Hoisted – bisa dipanggil sebelum dideklarasikan
function greetUser(name, age) {
return `Halo ${name}, umur ${age} tahun. Selamat belajar JavaScript!`;
}// ===== FUNCTION EXPRESSION =====
// Tidak hoisted – harus dideklarasikan dulu sebelum dipanggil
const calculateTotal = function(price, tax = 0.1) {
const total = price + (price * tax);
return total;
};

// ===== ARROW FUNCTIONS (ES6+) =====
// Syntax lebih singkat, tidak punya ‘this’ binding
const multiply = (a, b) => a * b;

const processUserData = (user) => {
return {
…user,
fullName: `${user.firstName} ${user.lastName}`,
isAdult: user.age >= 18,
canVote: user.age >= 17
};
};

// Arrow function dengan satu parameter (tanpa parentheses)
const square = x => x * x;

// Arrow function tanpa parameter
const getCurrentTime = () => new Date().toLocaleString();

// ===== HIGHER ORDER FUNCTIONS =====
// Function yang menerima function lain sebagai parameter
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// map – transform setiap element
const doubled = numbers.map(num => num * 2);
const squared = numbers.map(square);

// filter – ambil element yang memenuhi kondisi
const evenNumbers = numbers.filter(num => num % 2 === 0);
const bigNumbers = numbers.filter(num => num > 5);

// reduce – gabungkan semua element jadi satu nilai
const sum = numbers.reduce((total, num) => total + num, 0);
const max = numbers.reduce((max, num) => num > max ? num : max);

// forEach – eksekusi function untuk setiap element
numbers.forEach((num, index) => {
console.log(`Index ${index}: ${num}`);
});

// ===== CONTROL FLOW – CONDITIONAL STATEMENTS =====
function checkGrade(score) {
let grade;
let message;

if (score >= 90) {
grade = “A”;
message = “Excellent! Outstanding performance!”;
} else if (score >= 80) {
grade = “B”;
message = “Good job! Keep up the good work!”;
} else if (score >= 70) {
grade = “C”;
message = “Not bad, but you can do better!”;
} else if (score >= 60) {
grade = “D”;
message = “You need to study more!”;
} else {
grade = “F”;
message = “Please retake the exam.”;
}

return { grade, message, score };
}

// Ternary operator – conditional singkat
const getStatus = (age) => age >= 18 ? “Adult” : “Minor”;

// Switch statement – untuk multiple conditions
function getDayMessage(day) {
switch (day.toLowerCase()) {
case ‘monday’:
return “Start of the work week! 💪”;
case ‘tuesday’:
return “Tuesday motivation! 🚀”;
case ‘wednesday’:
return “Hump day! Halfway there! 🐪”;
case ‘thursday’:
return “Almost weekend! 🎯”;
case ‘friday’:
return “TGIF! Weekend is coming! 🎉”;
case ‘saturday’:
case ‘sunday’:
return “Weekend vibes! Relax and recharge! 😎”;
default:
return “Invalid day. Please enter a valid day name.”;
}
}

// ===== LOOPS =====
// For loop – traditional
console.log(“=== Traditional For Loop ===”);
for (let i = 1; i <= 5; i++) {
console.log(`Iteration ${i}: ${i * i}`);
}

// For…of loop – untuk arrays
console.log(“=== For…of Loop ===”);
const fruits = [“apple”, “banana”, “orange”, “mango”];
for (const fruit of fruits) {
console.log(`I love ${fruit}!`);
}

// For…in loop – untuk object properties
console.log(“=== For…in Loop ===”);
const person = { name: “John”, age: 30, city: “Jakarta” };
for (const key in person) {
console.log(`${key}: ${person[key]}`);
}

// While loop
console.log(“=== While Loop ===”);
let countdown = 5;
while (countdown > 0) {
console.log(`Countdown: ${countdown}`);
countdown–;
}
console.log(“Blast off! 🚀”);

// Do…while loop
console.log(“=== Do…While Loop ===”);
let userInput;
do {
userInput = prompt(“Enter ‘quit’ to exit:”);
console.log(`You entered: ${userInput}`);
} while (userInput !== ‘quit’);

// ===== PRACTICAL EXAMPLES =====
// Function untuk validasi email
const isValidEmail = (email) => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
};

// Function untuk generate random password
const generatePassword = (length = 8) => {
const chars = ‘ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*’;
let password = ”;
for (let i = 0; i < length; i++) {
password += chars.charAt(Math.floor(Math.random() * chars.length));
}
return password;
};

// Function untuk format currency
const formatCurrency = (amount, currency = ‘IDR’) => {
return new Intl.NumberFormat(‘id-ID’, {
style: ‘currency’,
currency: currency
}).format(amount);
};

// Testing functions
console.log(greetUser(“Budi”, 25));
console.log(calculateTotal(100000));
console.log(multiply(7, 8));
console.log(checkGrade(85));
console.log(getDayMessage(“Friday”));
console.log(isValidEmail(“user@example.com”));
console.log(generatePassword(12));
console.log(formatCurrency(150000));

// ===== DOM SELECTION METHODS =====
// 1. getElementById – select by ID (returns single element)
const header = document.getElementById(‘main-header’);
const loginForm = document.getElementById(‘login-form’);// 2. getElementsByClassName – select by class (returns HTMLCollection)
const buttons = document.getElementsByClassName(‘btn’);
const cards = document.getElementsByClassName(‘card’);

// 3. getElementsByTagName – select by tag (returns HTMLCollection)
const paragraphs = document.getElementsByTagName(‘p’);
const images = document.getElementsByTagName(‘img’);

// 4. querySelector – select first matching element (CSS selector)
const firstButton = document.querySelector(‘.btn’);
const emailInput = document.querySelector(‘input[type=”email”]’);
const navLink = document.querySelector(‘nav a:first-child’);

// 5. querySelectorAll – select all matching elements (returns NodeList)
const allButtons = document.querySelectorAll(‘.btn’);
const allInputs = document.querySelectorAll(‘input’);
const menuItems = document.querySelectorAll(‘.menu-item’);

// ===== DOM MANIPULATION =====
// Mengubah konten text
const welcomeMessage = document.querySelector(‘#welcome’);
welcomeMessage.textContent = ‘Selamat datang di JavaScript Fundamental!’;
welcomeMessage.innerHTML = ‘Selamat datang di JavaScript Fundamental!‘;

// Mengubah atribut
const profileImage = document.querySelector(‘#profile-img’);
profileImage.src = ‘https://via.placeholder.com/150×150/4CAF50/white?text=JS’;
profileImage.alt = ‘JavaScript Logo’;
profileImage.setAttribute(‘data-loaded’, ‘true’);

// Mengubah styling
const mainContainer = document.querySelector(‘.container’);
mainContainer.style.backgroundColor = ‘#f8f9fa’;
mainContainer.style.padding = ’20px’;
mainContainer.style.borderRadius = ’10px’;
mainContainer.style.boxShadow = ‘0 4px 6px rgba(0,0,0,0.1)’;

// Mengubah class
const alertBox = document.querySelector(‘.alert’);
alertBox.classList.add(‘alert-success’);
alertBox.classList.remove(‘alert-danger’);
alertBox.classList.toggle(‘show’);
alertBox.classList.contains(‘active’); // returns boolean

// ===== CREATING AND INSERTING ELEMENTS =====
// Membuat element baru
const newParagraph = document.createElement(‘p’);
newParagraph.textContent = ‘Paragraf ini dibuat dengan JavaScript!’;
newParagraph.className = ‘dynamic-content’;

const newButton = document.createElement(‘button’);
newButton.innerHTML = ‘🚀 Click Me!’;
newButton.className = ‘btn btn-primary’;
newButton.id = ‘dynamic-btn’;

// Menambahkan element ke DOM
const contentArea = document.querySelector(‘#content’);
contentArea.appendChild(newParagraph);
contentArea.appendChild(newButton);

// Insert methods yang lebih fleksibel
const targetElement = document.querySelector(‘#target’);
targetElement.insertAdjacentHTML(‘beforebegin’, ‘

Before target

‘);
targetElement.insertAdjacentHTML(‘afterbegin’, ‘

Start of target

‘);
targetElement.insertAdjacentHTML(‘beforeend’, ‘

End of target

‘);
targetElement.insertAdjacentHTML(‘afterend’, ‘

After target

‘);

// ===== REMOVING ELEMENTS =====
const elementToRemove = document.querySelector(‘.remove-me’);
if (elementToRemove) {
elementToRemove.remove(); // Modern way
// elementToRemove.parentNode.removeChild(elementToRemove); // Old way
}

// ===== EVENT HANDLING =====
// 1. Click Events
const clickButton = document.querySelector(‘#click-btn’);
clickButton.addEventListener(‘click’, function(event) {
console.log(‘Button clicked!’);
console.log(‘Event object:’, event);
console.log(‘Target element:’, event.target);

// Prevent default behavior (for links, forms, etc.)
// event.preventDefault();

// Stop event bubbling
// event.stopPropagation();
});

// Arrow function event handler
const hoverButton = document.querySelector(‘#hover-btn’);
hoverButton.addEventListener(‘mouseenter’, (e) => {
e.target.style.backgroundColor = ‘#007bff’;
e.target.style.color = ‘white’;
});

hoverButton.addEventListener(‘mouseleave’, (e) => {
e.target.style.backgroundColor = ”;
e.target.style.color = ”;
});

// 2. Form Events
const contactForm = document.querySelector(‘#contact-form’);
const nameInput = document.querySelector(‘#name-input’);
const emailInput = document.querySelector(‘#email-input’);

// Form submission
contactForm.addEventListener(‘submit’, function(e) {
e.preventDefault(); // Prevent form from submitting normally

const formData = new FormData(this);
const name = formData.get(‘name’);
const email = formData.get(’email’);

// Validation
if (!name || !email) {
alert(‘Please fill in all fields!’);
return;
}

if (!isValidEmail(email)) {
alert(‘Please enter a valid email address!’);
return;
}

console.log(‘Form submitted:’, { name, email });
showSuccessMessage(‘Form submitted successfully!’);
});

// Input events
nameInput.addEventListener(‘input’, function(e) {
const value = e.target.value;
console.log(‘Name input changed:’, value);

// Real-time validation
if (value.length < 2) {
e.target.style.borderColor = ‘red’;
} else {
e.target.style.borderColor = ‘green’;
}
});

// 3. Keyboard Events
document.addEventListener(‘keydown’, function(e) {
console.log(‘Key pressed:’, e.key);

// Keyboard shortcuts
if (e.ctrlKey && e.key === ‘s’) {
e.preventDefault();
console.log(‘Save shortcut pressed!’);
saveData();
}

if (e.key === ‘Escape’) {
closeModal();
}
});

// 4. Window Events
window.addEventListener(‘load’, function() {
console.log(‘Page fully loaded!’);
initializeApp();
});

window.addEventListener(‘resize’, function() {
console.log(‘Window resized:’, window.innerWidth, ‘x’, window.innerHeight);
handleResponsiveLayout();
});

// ===== EVENT DELEGATION =====
// Efficient way to handle events on multiple elements
const todoList = document.querySelector(‘#todo-list’);
todoList.addEventListener(‘click’, function(e) {
if (e.target.classList.contains(‘delete-btn’)) {
e.target.parentElement.remove();
}

if (e.target.classList.contains(‘complete-btn’)) {
e.target.parentElement.classList.toggle(‘completed’);
}
});

// ===== PRACTICAL FUNCTIONS =====
function isValidEmail(email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}

function showSuccessMessage(message) {
const alertDiv = document.createElement(‘div’);
alertDiv.className = ‘alert alert-success’;
alertDiv.textContent = message;

document.body.insertBefore(alertDiv, document.body.firstChild);

setTimeout(() => {
alertDiv.remove();
}, 3000);
}

function saveData() {
console.log(‘Saving data…’);
// Implement save functionality
}

function closeModal() {
const modal = document.querySelector(‘.modal.show’);
if (modal) {
modal.classList.remove(‘show’);
}
}

function initializeApp() {
console.log(‘Initializing application…’);
// App initialization code
}

function handleResponsiveLayout() {
const sidebar = document.querySelector(‘.sidebar’);
if (window.innerWidth < 768) {
sidebar.classList.add(‘mobile’);
} else {
sidebar.classList.remove(‘mobile’);
}
}

// ===== INTERACTIVE EXAMPLE: DYNAMIC TODO LIST =====
function createTodoApp() {
const todoContainer = document.createElement(‘div’);
todoContainer.className = ‘todo-app’;
todoContainer.innerHTML = `

📝 Dynamic Todo List

`;

document.body.appendChild(todoContainer);

const todoInput = document.getElementById(‘todo-input’);
const addBtn = document.getElementById(‘add-todo-btn’);
const todoList = document.getElementById(‘todo-list’);

let todos = [];

function addTodo() {
const text = todoInput.value.trim();
if (!text) return;

const todo = {
id: Date.now(),
text: text,
completed: false
};

todos.push(todo);
renderTodos();
todoInput.value = ”;
updateStats();
}

function renderTodos() {
todoList.innerHTML = ”;
todos.forEach(todo => {
const li = document.createElement(‘li’);
li.className = todo.completed ? ‘completed’ : ”;
li.innerHTML = `
${todo.text}
✓
✗
`;
todoList.appendChild(li);
});
}

function updateStats() {
const total = todos.length;
const completed = todos.filter(todo => todo.completed).length;
document.getElementById(‘total-todos’).textContent = `Total: ${total}`;
document.getElementById(‘completed-todos’).textContent = `Completed: ${completed}`;
}

addBtn.addEventListener(‘click’, addTodo);
todoInput.addEventListener(‘keypress’, (e) => {
if (e.key === ‘Enter’) addTodo();
});

todoList.addEventListener(‘click’, (e) => {
const id = parseInt(e.target.dataset.id);

if (e.target.classList.contains(‘complete-btn’)) {
const todo = todos.find(t => t.id === id);
todo.completed = !todo.completed;
renderTodos();
updateStats();
}

if (e.target.classList.contains(‘delete-btn’)) {
todos = todos.filter(t => t.id !== id);
renderTodos();
updateStats();
}
});
}

// Initialize todo app
createTodoApp();

// ===== CALLBACK HELL PROBLEM =====
// Masalah dengan callback tradisional
function oldWayCallback() {
setTimeout(() => {
console.log(“Step 1 completed”);
setTimeout(() => {
console.log(“Step 2 completed”);
setTimeout(() => {
console.log(“Step 3 completed”);
// Callback hell! 😱
}, 1000);
}, 1000);
}, 1000);
}// ===== PROMISES – SOLUTION TO CALLBACK HELL =====
// Creating a Promise
function createPromise(message, delay, shouldReject = false) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (shouldReject) {
reject(new Error(`Failed: ${message}`));
} else {
resolve(`Success: ${message}`);
}
}, delay);
});
}

// Using Promises with .then() and .catch()
function promiseExample() {
createPromise(“Fetching user data”, 1000)
.then(result => {
console.log(result);
return createPromise(“Fetching user posts”, 1000);
})
.then(result => {
console.log(result);
return createPromise(“Fetching post comments”, 1000);
})
.then(result => {
console.log(result);
console.log(“All data fetched successfully!”);
})
.catch(error => {
console.error(“Error occurred:”, error.message);
})
.finally(() => {
console.log(“Promise chain completed”);
});
}

// Promise.all – Wait for all promises to resolve
function promiseAllExample() {
const promises = [
createPromise(“Task 1”, 1000),
createPromise(“Task 2”, 1500),
createPromise(“Task 3”, 800)
];

Promise.all(promises)
.then(results => {
console.log(“All tasks completed:”, results);
})
.catch(error => {
console.error(“One or more tasks failed:”, error);
});
}

// Promise.race – First promise to resolve/reject wins
function promiseRaceExample() {
const promises = [
createPromise(“Fast task”, 800),
createPromise(“Medium task”, 1200),
createPromise(“Slow task”, 2000)
];

Promise.race(promises)
.then(result => {
console.log(“First completed task:”, result);
})
.catch(error => {
console.error(“First failed task:”, error);
});
}

// ===== ASYNC/AWAIT – MODERN SYNTAX =====
// Async function always returns a Promise
async function modernAsyncExample() {
try {
console.log(“Starting async operations…”);

const step1 = await createPromise(“User authentication”, 1000);
console.log(step1);

const step2 = await createPromise(“Loading dashboard”, 800);
console.log(step2);

const step3 = await createPromise(“Fetching notifications”, 600);
console.log(step3);

console.log(“All operations completed successfully!”);
return “Dashboard loaded”;

} catch (error) {
console.error(“Error in async operation:”, error.message);
throw error; // Re-throw if needed
} finally {
console.log(“Cleanup operations completed”);
}
}

// Parallel execution with async/await
async function parallelAsyncExample() {
try {
console.log(“Starting parallel operations…”);

// Start all operations simultaneously
const userPromise = createPromise(“Fetch user”, 1000);
const postsPromise = createPromise(“Fetch posts”, 1200);
const commentsPromise = createPromise(“Fetch comments”, 800);

// Wait for all to complete
const [user, posts, comments] = await Promise.all([
userPromise,
postsPromise,
commentsPromise
]);

console.log(“Parallel results:”, { user, posts, comments });
return { user, posts, comments };

} catch (error) {
console.error(“Parallel operation failed:”, error);
}
}

// ===== FETCH API – REAL HTTP REQUESTS =====
// GET Request
async function fetchUserData(userId) {
try {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);

// Check if request was successful
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}

const userData = await response.json();
console.log(“User data:”, userData);
return userData;

} catch (error) {
console.error(“Failed to fetch user data:”, error);
throw error;
}
}

// POST Request
async function createPost(postData) {
try {
const response = await fetch(‘https://jsonplaceholder.typicode.com/posts’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify(postData)
});

if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}

const newPost = await response.json();
console.log(“Post created:”, newPost);
return newPost;

} catch (error) {
console.error(“Failed to create post:”, error);
throw error;
}
}

// PUT Request (Update)
async function updatePost(postId, updatedData) {
try {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`, {
method: ‘PUT’,
headers: {
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify(updatedData)
});

if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}

const updatedPost = await response.json();
console.log(“Post updated:”, updatedPost);
return updatedPost;

} catch (error) {
console.error(“Failed to update post:”, error);
throw error;
}
}

// DELETE Request
async function deletePost(postId) {
try {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`, {
method: ‘DELETE’
});

if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}

console.log(`Post ${postId} deleted successfully`);
return true;

} catch (error) {
console.error(“Failed to delete post:”, error);
throw error;
}
}

// ===== ERROR HANDLING STRATEGIES =====
// Retry mechanism
async function fetchWithRetry(url, options = {}, maxRetries = 3) {
let lastError;

for (let i = 0; i <= maxRetries; i++) {
try {
const response = await fetch(url, options);
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
return await response.json();
} catch (error) {
lastError = error;
console.log(`Attempt ${i + 1} failed:`, error.message);

if (i < maxRetries) {
// Wait before retrying (exponential backoff)
const delay = Math.pow(2, i) * 1000;
await new Promise(resolve => setTimeout(resolve, delay));
}
}
}

throw lastError;
}

// Timeout wrapper
function withTimeout(promise, timeoutMs) {
const timeout = new Promise((_, reject) => {
setTimeout(() => {
reject(new Error(`Operation timed out after ${timeoutMs}ms`));
}, timeoutMs);
});

return Promise.race([promise, timeout]);
}

// ===== PRACTICAL EXAMPLES =====
// Weather App Example
async function getWeatherData(city) {
const API_KEY = ‘your-api-key-here’;
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`;

try {
const response = await withTimeout(fetch(url), 5000);

if (!response.ok) {
throw new Error(`Weather data not found for ${city}`);
}

const weatherData = await response.json();

return {
city: weatherData.name,
temperature: weatherData.main.temp,
description: weatherData.weather[0].description,
humidity: weatherData.main.humidity,
windSpeed: weatherData.wind.speed
};

} catch (error) {
console.error(“Weather fetch failed:”, error);
throw error;
}
}

// Image Loading with Progress
async function loadImageWithProgress(imageUrl) {
return new Promise((resolve, reject) => {
const img = new Image();

img.onload = () => {
console.log(`Image loaded: ${imageUrl}`);
resolve(img);
};

img.onerror = () => {
reject(new Error(`Failed to load image: ${imageUrl}`));
};

img.src = imageUrl;
});
}

// Batch Processing
async function processBatch(items, batchSize = 5) {
const results = [];

for (let i = 0; i < items.length; i += batchSize) {
const batch = items.slice(i, i + batchSize);
console.log(`Processing batch ${Math.floor(i / batchSize) + 1}…`);

const batchPromises = batch.map(item => processItem(item));
const batchResults = await Promise.allSettled(batchPromises);

results.push(…batchResults);

// Small delay between batches to avoid overwhelming the server
if (i + batchSize < items.length) {
await new Promise(resolve => setTimeout(resolve, 100));
}
}

return results;
}

async function processItem(item) {
// Simulate processing
await new Promise(resolve => setTimeout(resolve, Math.random() * 1000));
return `Processed: ${item}`;
}

// ===== MODERN JAVASCRIPT FEATURES =====
// Optional Chaining (?.)
const user = {
name: “John”,
address: {
street: “123 Main St”,
city: “Jakarta”
}
};

console.log(user?.address?.street); // “123 Main St”
console.log(user?.phone?.mobile); // undefined (no error)

// Nullish Coalescing (??)
const userPreferences = {
theme: null,
language: “en”,
notifications: false
};

const theme = userPreferences.theme ?? “light”; // “light”
const notifications = userPreferences.notifications ?? true; // false (not null/undefined)

// Destructuring with Default Values
const { name = “Anonymous”, age = 0, city = “Unknown” } = user;

// Rest/Spread with Objects
const baseConfig = { timeout: 5000, retries: 3 };
const apiConfig = { …baseConfig, baseURL: “https://api.example.com” };

// Dynamic Imports (ES2020)
async function loadModule() {
try {
const module = await import(‘./utils.js’);
module.doSomething();
} catch (error) {
console.error(“Failed to load module:”, error);
}
}

// ===== TESTING ASYNC FUNCTIONS =====
async function runAsyncExamples() {
console.log(“=== Running Async Examples ===”);

try {
// Test basic async/await
await modernAsyncExample();

// Test parallel execution
await parallelAsyncExample();

// Test fetch API
const userData = await fetchUserData(1);

// Test POST request
const newPost = await createPost({
title: “Learning JavaScript Fundamental”,
body: “Async/await makes JavaScript much more readable!”,
userId: 1
});

console.log(“All async examples completed successfully!”);

} catch (error) {
console.error(“Async example failed:”, error);
}
}

// Run examples
runAsyncExamples();