function LearnToCode() {

const [skills, setSkills] = useState([]);

const [isLearning, setIsLearning] = useState(true);

useEffect(() => {

if (isLearning) {

// Keep adding new skills

const timer = setInterval(() => {

setSkills(prev => [...prev, getNewSkill()]);

}, 1000);

return () => clearInterval(timer);

}

}, [isLearning]);

return (

{skills.map(skill => (

))}

AceDevHub

Frontend

Backend

Database

DevOps

Preparing your learning journey...

learning.jsx

1function LearnToCode() {

2 const [skills, setSkills] = useState([]);

3 const [isLearning, setIsLearning] = useState(true);

5 useEffect(() => {

6 if (isLearning) {

7 // Keep adding new skills

8 const timer = setInterval(() => {

9 setSkills(prev => [...prev, getNewSkill()]);

10 }, 1000);

12 return () => clearInterval(timer);

13 }

14 }, [isLearning]);

16 return (

17 <div className="developer">

18 {skills.map(skill => (

19 <Skill key={skill.id} name={skill.name} />

20 ))}

21 </div>

22 );

23}

Array Methods (map, filter, reduce, etc.)

Array methods are powerful tools for transforming, filtering, and processing data without mutating the original array.

map() - Transform Elements

javascript
// Transform each element
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// Transform objects
const users = [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 },
    { name: "Charlie", age: 35 }
];

const names = users.map(user => user.name);
console.log(names); // ["Alice", "Bob", "Charlie"]

const userInfo = users.map(user => `${user.name} is ${user.age} years old`);
console.log(userInfo); // ["Alice is 25 years old", ...]

// With index
const indexed = numbers.map((num, index) => `${index}: ${num}`);
console.log(indexed); // ["0: 1", "1: 2", "2: 3", "3: 4", "4: 5"]

filter() - Select Elements

javascript
// Filter by condition
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4, 6, 8, 10]

// Filter objects
const products = [
    { name: "Laptop", price: 999, inStock: true },
    { name: "Phone", price: 599, inStock: false },
    { name: "Tablet", price: 399, inStock: true }
];

const availableProducts = products.filter(product => product.inStock);
const expensiveProducts = products.filter(product => product.price > 500);

// Complex filtering
const users = [
    { name: "Alice", age: 25, active: true },
    { name: "Bob", age: 17, active: true },
    { name: "Charlie", age: 30, active: false }
];

const activeAdults = users.filter(user => user.active && user.age >= 18);
console.log(activeAdults); // [{ name: "Alice", age: 25, active: true }]

reduce() - Combine Elements

javascript
// Sum numbers
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 15

// Find maximum
const max = numbers.reduce((max, num) => num > max ? num : max, numbers[0]);
console.log(max); // 5

// Count occurrences
const fruits = ["apple", "banana", "apple", "orange", "banana", "apple"];
const count = fruits.reduce((acc, fruit) => {
    acc[fruit] = (acc[fruit] || 0) + 1;
    return acc;
}, {});
console.log(count); // { apple: 3, banana: 2, orange: 1 }

// Group by property
const people = [
    { name: "Alice", department: "Engineering" },
    { name: "Bob", department: "Marketing" },
    { name: "Charlie", department: "Engineering" }
];

const byDepartment = people.reduce((acc, person) => {
    const dept = person.department;
    if (!acc[dept]) acc[dept] = [];
    acc[dept].push(person);
    return acc;
}, {});

find() and findIndex()

javascript
const users = [
    { id: 1, name: "Alice", email: "alice@example.com" },
    { id: 2, name: "Bob", email: "bob@example.com" },
    { id: 3, name: "Charlie", email: "charlie@example.com" }
];

// Find first matching element
const user = users.find(u => u.name === "Bob");
console.log(user); // { id: 2, name: "Bob", email: "bob@example.com" }

// Find index of first matching element
const index = users.findIndex(u => u.name === "Bob");
console.log(index); // 1

// Returns undefined/−1 if not found
const notFound = users.find(u => u.name === "David");
console.log(notFound); // undefined

some() and every()

javascript
const numbers = [2, 4, 6, 8, 10];
const mixedNumbers = [1, 2, 3, 4, 5];

// some() - at least one element matches
console.log(numbers.some(num => num > 5)); // true
console.log(numbers.some(num => num % 2 === 1)); // false

// every() - all elements match
console.log(numbers.every(num => num % 2 === 0)); // true
console.log(mixedNumbers.every(num => num % 2 === 0)); // false

// Practical examples
const users = [
    { name: "Alice", age: 25, verified: true },
    { name: "Bob", age: 30, verified: true },
    { name: "Charlie", age: 17, verified: false }
];

const hasMinors = users.some(user => user.age < 18); // true
const allVerified = users.every(user => user.verified); // false

forEach() - Execute Function

javascript
const fruits = ["apple", "banana", "orange"];

// Basic forEach
fruits.forEach(fruit => {
    console.log(fruit);
});

// With index
fruits.forEach((fruit, index) => {
    console.log(`${index}: ${fruit}`);
});

// Modifying external data
const results = [];
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => {
    results.push(num * 2);
});
console.log(results); // [2, 4, 6, 8, 10]

// Note: forEach doesn't return anything
const returned = fruits.forEach(fruit => fruit.toUpperCase());
console.log(returned); // undefined

sort() - Sort Elements

javascript
// Sort strings (alphabetical)
const fruits = ["banana", "apple", "orange", "grape"];
fruits.sort();
console.log(fruits); // ["apple", "banana", "grape", "orange"]

// Sort numbers (need compare function)
const numbers = [10, 5, 40, 25, 1000, 1];
numbers.sort(); // Wrong! Sorts as strings
console.log(numbers); // [1, 10, 1000, 25, 40, 5]

numbers.sort((a, b) => a - b); // Correct ascending
console.log(numbers); // [1, 5, 10, 25, 40, 1000]

numbers.sort((a, b) => b - a); // Descending
console.log(numbers); // [1000, 40, 25, 10, 5, 1]

// Sort objects
const users = [
    { name: "Charlie", age: 35 },
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 }
];

// Sort by age
users.sort((a, b) => a.age - b.age);

// Sort by name
users.sort((a, b) => a.name.localeCompare(b.name));

reverse() and slice()

javascript
const numbers = [1, 2, 3, 4, 5];

// reverse() - mutates original array
const reversed = numbers.reverse();
console.log(numbers); // [5, 4, 3, 2, 1] - original changed
console.log(reversed); // [5, 4, 3, 2, 1] - same reference

// slice() - extract portion without mutating
const original = [1, 2, 3, 4, 5];
const portion = original.slice(1, 4); // From index 1 to 4 (exclusive)
console.log(portion); // [2, 3, 4]
console.log(original); // [1, 2, 3, 4, 5] - unchanged

// slice() for copying
const copy = original.slice(); // Copy entire array

Method Chaining

javascript
const users = [
    { name: "Alice", age: 25, salary: 50000, active: true },
    { name: "Bob", age: 30, salary: 60000, active: false },
    { name: "Charlie", age: 35, salary: 70000, active: true },
    { name: "Diana", age: 28, salary: 55000, active: true }
];

// Chain multiple methods
const result = users
    .filter(user => user.active) // Only active users
    .filter(user => user.age > 25) // Only users over 25
    .map(user => ({ name: user.name, salary: user.salary })) // Transform
    .sort((a, b) => b.salary - a.salary); // Sort by salary descending

console.log(result);
// [
//   { name: "Charlie", salary: 70000 },
//   { name: "Diana", salary: 55000 }
// ]

// Calculate total salary of active users over 25
const totalSalary = users
    .filter(user => user.active && user.age > 25)
    .reduce((total, user) => total + user.salary, 0);

console.log(totalSalary); // 125000

Practical Examples

javascript
// E-commerce product filtering
const products = [
    { name: "Laptop", category: "Electronics", price: 999, rating: 4.5 },
    { name: "Shirt", category: "Clothing", price: 29, rating: 4.2 },
    { name: "Phone", category: "Electronics", price: 599, rating: 4.7 },
    { name: "Jeans", category: "Clothing", price: 79, rating: 4.0 }
];

function filterProducts(products, filters) {
    return products
        .filter(product => {
            if (filters.category && product.category !== filters.category) return false;
            if (filters.minPrice && product.price < filters.minPrice) return false;
            if (filters.maxPrice && product.price > filters.maxPrice) return false;
            if (filters.minRating && product.rating < filters.minRating) return false;
            return true;
        })
        .sort((a, b) => {
            if (filters.sortBy === 'price') return a.price - b.price;
            if (filters.sortBy === 'rating') return b.rating - a.rating;
            return 0;
        });
}

// Usage
const filtered = filterProducts(products, {
    category: "Electronics",
    minRating: 4.5,
    sortBy: "price"
});

// Data analysis
const salesData = [
    { month: "Jan", sales: 1000, expenses: 800 },
    { month: "Feb", sales: 1200, expenses: 900 },
    { month: "Mar", sales: 1100, expenses: 850 }
];

const analysis = {
    totalSales: salesData.reduce((sum, data) => sum + data.sales, 0),
    totalExpenses: salesData.reduce((sum, data) => sum + data.expenses, 0),
    profitableMonths: salesData.filter(data => data.sales > data.expenses),
    averageSales: salesData.reduce((sum, data) => sum + data.sales, 0) / salesData.length
};

// Text processing
const words = ["hello", "world", "javascript", "is", "awesome"];

const processed = words
    .filter(word => word.length > 3) // Only words longer than 3 chars
    .map(word => word.toUpperCase()) // Convert to uppercase
    .sort() // Sort alphabetically
    .join(" "); // Join into string

console.log(processed); // "AWESOME HELLO JAVASCRIPT WORLD"

Performance Tips

javascript
// Avoid unnecessary iterations
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Less efficient - multiple iterations
const result1 = numbers
    .filter(n => n > 3)
    .filter(n => n < 8)
    .map(n => n * 2);

// More efficient - single filter
const result2 = numbers
    .filter(n => n > 3 && n < 8)
    .map(n => n * 2);

// Use appropriate method
// Don't use map if you don't need the returned array
numbers.map(n => console.log(n)); // Wrong - use forEach
numbers.forEach(n => console.log(n)); // Correct

// Don't use forEach if you need a new array
const doubled = [];
numbers.forEach(n => doubled.push(n * 2)); // Wrong - use map
const doubled2 = numbers.map(n => n * 2); // Correct

AceDevHub

JavaScript

Array Methods (map, filter, reduce, etc.)

Array Methods (map, filter, reduce, etc.)

map() - Transform Elements

filter() - Select Elements

reduce() - Combine Elements

find() and findIndex()

some() and every()

forEach() - Execute Function

sort() - Sort Elements

reverse() and slice()

Method Chaining

Practical Examples

Performance Tips