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}

Functions

Functions are reusable blocks of code that perform specific tasks. They help organize code and avoid repetition.

Function Declaration

javascript
// Basic function
function greet() {
    console.log("Hello, World!");
}

greet(); // Call the function

// Function with parameters
function greetUser(name) {
    console.log("Hello, " + name + "!");
}

greetUser("Alice"); // "Hello, Alice!"

// Function with return value
function add(a, b) {
    return a + b;
}

let result = add(5, 3);
console.log(result); // 8

Function Expression

javascript
// Function expression
let multiply = function(a, b) {
    return a * b;
};

console.log(multiply(4, 5)); // 20

// Anonymous function
let numbers = [1, 2, 3];
let doubled = numbers.map(function(num) {
    return num * 2;
});

Parameters and Arguments

javascript
// Multiple parameters
function introduce(name, age, city) {
    return `Hi, I'm ${name}, ${age} years old from ${city}`;
}

console.log(introduce("John", 25, "NYC"));

// Default parameters
function greet(name = "World") {
    return "Hello, " + name + "!";
}

console.log(greet());        // "Hello, World!"
console.log(greet("Alice")); // "Hello, Alice!"

// Rest parameters
function sum(...numbers) {
    let total = 0;
    for (let num of numbers) {
        total += num;
    }
    return total;
}

console.log(sum(1, 2, 3, 4)); // 10

Return Statement

javascript
// Simple return
function square(num) {
    return num * num;
}

// Early return
function checkAge(age) {
    if (age < 0) {
        return "Invalid age";
    }
    if (age < 18) {
        return "Minor";
    }
    return "Adult";
}

// Multiple return points
function getGrade(score) {
    if (score >= 90) return "A";
    if (score >= 80) return "B";
    if (score >= 70) return "C";
    return "F";
}

Function Scope

javascript
let globalVar = "I'm global";

function outerFunction() {
    let outerVar = "I'm in outer function";
    
    function innerFunction() {
        let innerVar = "I'm in inner function";
        console.log(globalVar);  // Can access
        console.log(outerVar);   // Can access
        console.log(innerVar);   // Can access
    }
    
    innerFunction();
    // console.log(innerVar); // Error! Can't access
}

outerFunction();

Higher-Order Functions

javascript
// Function that takes another function
function processArray(arr, callback) {
    let result = [];
    for (let item of arr) {
        result.push(callback(item));
    }
    return result;
}

let numbers = [1, 2, 3, 4];
let squared = processArray(numbers, function(x) {
    return x * x;
});

// Function that returns a function
function createMultiplier(factor) {
    return function(number) {
        return number * factor;
    };
}

let double = createMultiplier(2);
let triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

Practical Examples

javascript
// Calculator functions
function calculator(a, b, operation) {
    switch (operation) {
        case "add": return a + b;
        case "subtract": return a - b;
        case "multiply": return a * b;
        case "divide": return b !== 0 ? a / b : "Cannot divide by zero";
        default: return "Invalid operation";
    }
}

// User validation
function validateUser(user) {
    if (!user.name || user.name.length < 2) {
        return { valid: false, error: "Name too short" };
    }
    if (!user.email || !user.email.includes("@")) {
        return { valid: false, error: "Invalid email" };
    }
    return { valid: true };
}

// Array utilities
function getUniqueValues(arr) {
    return [...new Set(arr)];
}

function findLargest(arr) {
    return Math.max(...arr);
}

// String utilities
function capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

function reverseString(str) {
    return str.split("").reverse().join("");
}

Function Best Practices

javascript
// Good: Descriptive names
function calculateTotalPrice(items, taxRate) {
    // Implementation
}

// Poor: Unclear names
function calc(x, y) {
    // Implementation
}

// Good: Single responsibility
function validateEmail(email) {
    return email.includes("@") && email.length > 5;
}

function sendEmail(email, message) {
    // Send email logic
}

// Good: Pure functions (no side effects)
function addNumbers(a, b) {
    return a + b; // Doesn't modify external state
}

// Avoid: Functions with side effects when possible
let counter = 0;
function incrementCounter() {
    counter++; // Modifies external state
}

AceDevHub

JavaScript

Functions

Functions

Function Declaration

Function Expression

Parameters and Arguments

Return Statement

Function Scope

Higher-Order Functions

Practical Examples

Function Best Practices