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}

Arrays — Basics

Arrays are ordered collections of items. They're one of the most important data structures in JavaScript.

Creating Arrays

javascript
// Array literal (most common)
const fruits = ["apple", "banana", "orange"];
const numbers = [1, 2, 3, 4, 5];
const mixed = ["hello", 42, true, null];

// Array constructor
const arr1 = new Array(); // Empty array
const arr2 = new Array(5); // Array with 5 empty slots
const arr3 = new Array(1, 2, 3); // [1, 2, 3]

// Empty array
const empty = [];

// Array with different types
const data = [
    "string",
    123,
    true,
    { name: "John" },
    [1, 2, 3],
    function() { return "hello"; }
];

Accessing Array Elements

javascript
const colors = ["red", "green", "blue", "yellow"];

// Access by index (0-based)
console.log(colors[0]); // "red"
console.log(colors[1]); // "green"
console.log(colors[3]); // "yellow"

// Last element
console.log(colors[colors.length - 1]); // "yellow"

// Non-existent index
console.log(colors[10]); // undefined

// Negative indices don't work like in Python
console.log(colors[-1]); // undefined

Array Properties

javascript
const items = ["a", "b", "c", "d"];

// Length property
console.log(items.length); // 4

// Changing length
items.length = 2;
console.log(items); // ["a", "b"] - truncated

items.length = 5;
console.log(items); // ["a", "b", empty × 3] - extended with empty slots

Adding Elements

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

// Add to end
fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]

// Add multiple to end
fruits.push("grape", "mango");
console.log(fruits); // ["apple", "banana", "orange", "grape", "mango"]

// Add to beginning
fruits.unshift("strawberry");
console.log(fruits); // ["strawberry", "apple", "banana", "orange", "grape", "mango"]

// Add at specific index
fruits[10] = "kiwi";
console.log(fruits); // Creates empty slots between
console.log(fruits.length); // 11

Removing Elements

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

// Remove from end
const lastNumber = numbers.pop();
console.log(lastNumber); // 5
console.log(numbers); // [1, 2, 3, 4]

// Remove from beginning
const firstNumber = numbers.shift();
console.log(firstNumber); // 1
console.log(numbers); // [2, 3, 4]

// Remove at specific index
delete numbers[1];
console.log(numbers); // [2, empty, 4] - creates hole

// Better way to remove at index
const colors = ["red", "green", "blue", "yellow"];
const removed = colors.splice(1, 2); // Remove 2 elements starting at index 1
console.log(removed); // ["green", "blue"]
console.log(colors); // ["red", "yellow"]

Modifying Elements

javascript
const pets = ["dog", "cat", "bird"];

// Change element
pets[1] = "hamster";
console.log(pets); // ["dog", "hamster", "bird"]

// Add element at specific position
pets[3] = "fish";
console.log(pets); // ["dog", "hamster", "bird", "fish"]

// Replace multiple elements
pets.splice(1, 2, "rabbit", "turtle");
console.log(pets); // ["dog", "rabbit", "turtle", "fish"]

Array Methods Overview

javascript
const arr = [1, 2, 3];

// Check if it's an array
console.log(Array.isArray(arr)); // true
console.log(Array.isArray("hello")); // false

// Convert to string
console.log(arr.toString()); // "1,2,3"
console.log(arr.join(" - ")); // "1 - 2 - 3"

// Find index of element
const fruits = ["apple", "banana", "orange", "banana"];
console.log(fruits.indexOf("banana")); // 1 (first occurrence)
console.log(fruits.lastIndexOf("banana")); // 3 (last occurrence)
console.log(fruits.indexOf("grape")); // -1 (not found)

// Check if element exists
console.log(fruits.includes("apple")); // true
console.log(fruits.includes("grape")); // false

Copying Arrays

javascript
const original = [1, 2, 3];

// Shallow copy methods
const copy1 = [...original]; // Spread operator
const copy2 = Array.from(original); // Array.from()
const copy3 = original.slice(); // slice()

// All create independent copies
copy1.push(4);
console.log(original); // [1, 2, 3] - unchanged
console.log(copy1); // [1, 2, 3, 4]

// Be careful with nested objects/arrays
const nested = [1, [2, 3], 4];
const shallowCopy = [...nested];
shallowCopy[1].push(5);
console.log(nested); // [1, [2, 3, 5], 4] - inner array modified!

Combining Arrays

javascript
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];

// Using concat
const combined1 = arr1.concat(arr2);
console.log(combined1); // [1, 2, 3, 4, 5, 6]

// Using spread operator (modern)
const combined2 = [...arr1, ...arr2, ...arr3];
console.log(combined2); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

// Adding individual elements
const combined3 = [...arr1, "middle", ...arr2];
console.log(combined3); // [1, 2, 3, "middle", 4, 5, 6]

Practical Examples

javascript
// Shopping cart
const cart = [];

function addToCart(item) {
    cart.push(item);
    console.log(`Added ${item} to cart`);
}

function removeFromCart(item) {
    const index = cart.indexOf(item);
    if (index > -1) {
        cart.splice(index, 1);
        console.log(`Removed ${item} from cart`);
    }
}

function showCart() {
    console.log("Cart contents:", cart.join(", "));
}

// Usage
addToCart("laptop");
addToCart("mouse");
addToCart("keyboard");
showCart(); // "Cart contents: laptop, mouse, keyboard"
removeFromCart("mouse");
showCart(); // "Cart contents: laptop, keyboard"

// Todo list
const todos = [];

function addTodo(task) {
    todos.push({
        id: Date.now(),
        task: task,
        completed: false
    });
}

function completeTodo(id) {
    const todo = todos.find(t => t.id === id);
    if (todo) {
        todo.completed = true;
    }
}

function getTodos() {
    return todos.filter(t => !t.completed);
}

// Student grades
const grades = [85, 92, 78, 96, 88];

function addGrade(grade) {
    if (grade >= 0 && grade <= 100) {
        grades.push(grade);
    }
}

function getAverage() {
    const sum = grades.reduce((total, grade) => total + grade, 0);
    return sum / grades.length;
}

function getHighestGrade() {
    return Math.max(...grades);
}

console.log("Average:", getAverage()); // Average: 87.8
console.log("Highest:", getHighestGrade()); // Highest: 96

Common Patterns

javascript
// Initialize array with values
const zeros = new Array(5).fill(0); // [0, 0, 0, 0, 0]
const sequence = Array.from({length: 5}, (_, i) => i + 1); // [1, 2, 3, 4, 5]

// Remove duplicates
const numbers = [1, 2, 2, 3, 3, 3, 4];
const unique = [...new Set(numbers)]; // [1, 2, 3, 4]

// Flatten array (one level)
const nested = [[1, 2], [3, 4], [5, 6]];
const flattened = [].concat(...nested); // [1, 2, 3, 4, 5, 6]
// Or use flat()
const flattened2 = nested.flat(); // [1, 2, 3, 4, 5, 6]

// Check if array is empty
function isEmpty(arr) {
    return arr.length === 0;
}

// Get random element
function getRandomElement(arr) {
    return arr[Math.floor(Math.random() * arr.length)];
}

// Shuffle array
function shuffle(arr) {
    const shuffled = [...arr];
    for (let i = shuffled.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
    }
    return shuffled;
}