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}

Loops

Loops allow you to repeat code multiple times. JavaScript provides several types of loops for different situations.

For Loop

Basic For Loop

javascript
// Print numbers 1 to 5
for (let i = 1; i <= 5; i++) {
    console.log(i);
}

// Loop through array
let fruits = ["apple", "banana", "orange"];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

// Countdown
for (let i = 10; i >= 1; i--) {
    console.log(i);
}
console.log("Blast off!");

For Loop Variations

javascript
// Skip even numbers
for (let i = 1; i <= 10; i++) {
    if (i % 2 === 0) continue;
    console.log(i); // Only odd numbers
}

// Break early
for (let i = 1; i <= 10; i++) {
    if (i === 5) break;
    console.log(i); // 1, 2, 3, 4
}

// Multiple variables
for (let i = 0, j = 10; i < 5; i++, j--) {
    console.log(`i: ${i}, j: ${j}`);
}

While Loop

javascript
// Basic while loop
let count = 1;
while (count <= 5) {
    console.log(count);
    count++;
}

// User input simulation
let userInput = "";
while (userInput !== "quit") {
    // userInput = prompt("Enter command (or 'quit' to exit):");
    console.log("Processing:", userInput);
    break; // Prevent infinite loop in example
}

// Array processing
let numbers = [1, 2, 3, 4, 5];
let i = 0;
while (i < numbers.length) {
    console.log(numbers[i]);
    i++;
}

Do-While Loop

javascript
// Executes at least once
let num = 0;
do {
    console.log("Number:", num);
    num++;
} while (num < 3);

// Menu system example
let choice;
do {
    console.log("1. Start Game");
    console.log("2. Settings");
    console.log("3. Exit");
    choice = 3; // Simulate user choice
} while (choice !== 3);

For...in Loop (Objects)

javascript
// Loop through object properties
let person = {
    name: "John",
    age: 30,
    city: "New York"
};

for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}

// Array indices (not recommended for arrays)
let colors = ["red", "green", "blue"];
for (let index in colors) {
    console.log(`Index ${index}: ${colors[index]}`);
}

For...of Loop (Iterables)

javascript
// Loop through array values
let fruits = ["apple", "banana", "orange"];
for (let fruit of fruits) {
    console.log(fruit);
}

// Loop through string characters
let word = "hello";
for (let char of word) {
    console.log(char);
}

// With index using entries()
for (let [index, fruit] of fruits.entries()) {
    console.log(`${index}: ${fruit}`);
}

Array Methods (Alternative to Loops)

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

// forEach - execute function for each element
numbers.forEach((num, index) => {
    console.log(`Index ${index}: ${num}`);
});

// map - transform each element
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// filter - keep elements that match condition
let evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

// find - get first matching element
let found = numbers.find(num => num > 3);
console.log(found); // 4

Practical Examples

javascript
// Sum array elements
function sumArray(arr) {
    let sum = 0;
    for (let num of arr) {
        sum += num;
    }
    return sum;
}

// Find maximum value
function findMax(arr) {
    let max = arr[0];
    for (let i = 1; i < arr.length; i++) {
        if (arr[i] > max) {
            max = arr[i];
        }
    }
    return max;
}

// Generate multiplication table
function multiplicationTable(num) {
    for (let i = 1; i <= 10; i++) {
        console.log(`${num} x ${i} = ${num * i}`);
    }
}

// Process shopping cart
function calculateTotal(cart) {
    let total = 0;
    for (let item of cart) {
        total += item.price * item.quantity;
    }
    return total;
}

let cart = [
    { name: "Laptop", price: 999, quantity: 1 },
    { name: "Mouse", price: 25, quantity: 2 }
];
console.log("Total:", calculateTotal(cart));

Loop Control

javascript
// Break - exit loop completely
for (let i = 1; i <= 10; i++) {
    if (i === 5) break;
    console.log(i); // 1, 2, 3, 4
}

// Continue - skip current iteration
for (let i = 1; i <= 5; i++) {
    if (i === 3) continue;
    console.log(i); // 1, 2, 4, 5
}

// Nested loops with labels
outer: for (let i = 1; i <= 3; i++) {
    for (let j = 1; j <= 3; j++) {
        if (i === 2 && j === 2) {
            break outer; // Break out of both loops
        }
        console.log(`i: ${i}, j: ${j}`);
    }
}