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}

Conditionals (if, switch)

Conditionals allow your program to make decisions and execute different code based on different conditions.

If Statements

Basic If Statement

javascript
let age = 18;

if (age >= 18) {
    console.log("You can vote!");
}

let weather = "sunny";
if (weather === "sunny") {
    console.log("Great day for a walk!");
}

If-Else Statement

javascript
let score = 85;

if (score >= 90) {
    console.log("Grade: A");
} else {
    console.log("Grade: B or lower");
}

// User authentication
let isLoggedIn = false;
if (isLoggedIn) {
    console.log("Welcome back!");
} else {
    console.log("Please log in");
}

If-Else If-Else Chain

javascript
let temperature = 25;

if (temperature > 30) {
    console.log("It's hot!");
} else if (temperature > 20) {
    console.log("Nice weather");
} else if (temperature > 10) {
    console.log("A bit cool");
} else {
    console.log("It's cold!");
}

// Grade calculator
function getGrade(score) {
    if (score >= 90) {
        return "A";
    } else if (score >= 80) {
        return "B";
    } else if (score >= 70) {
        return "C";
    } else if (score >= 60) {
        return "D";
    } else {
        return "F";
    }
}

Nested If Statements

javascript
let user = {
    isLoggedIn: true,
    role: "admin",
    hasPermission: true
};

if (user.isLoggedIn) {
    if (user.role === "admin") {
        if (user.hasPermission) {
            console.log("Access granted to admin panel");
        } else {
            console.log("Permission denied");
        }
    } else {
        console.log("User dashboard");
    }
} else {
    console.log("Please log in");
}

Switch Statements

Basic Switch

javascript
let day = "monday";

switch (day) {
    case "monday":
        console.log("Start of work week");
        break;
    case "tuesday":
        console.log("Tuesday blues");
        break;
    case "wednesday":
        console.log("Hump day");
        break;
    case "friday":
        console.log("TGIF!");
        break;
    default:
        console.log("Regular day");
}

Switch with Multiple Cases

javascript
function getSeasonMessage(month) {
    switch (month) {
        case "december":
        case "january":
        case "february":
            return "Winter season";
        case "march":
        case "april":
        case "may":
            return "Spring season";
        case "june":
        case "july":
        case "august":
            return "Summer season";
        case "september":
        case "october":
        case "november":
            return "Fall season";
        default:
            return "Invalid month";
    }
}

Switch vs If-Else

javascript
// When to use switch (multiple exact matches)
function handleUserAction(action) {
    switch (action) {
        case "save":
            return "Document saved";
        case "delete":
            return "Document deleted";
        case "edit":
            return "Edit mode activated";
        default:
            return "Unknown action";
    }
}

// When to use if-else (ranges, complex conditions)
function categorizeAge(age) {
    if (age < 13) {
        return "child";
    } else if (age < 20) {
        return "teenager";
    } else if (age < 65) {
        return "adult";
    } else {
        return "senior";
    }
}

Ternary Operator

javascript
// Basic ternary
let age = 20;
let message = age >= 18 ? "Adult" : "Minor";

// Nested ternary (use sparingly)
let score = 85;
let grade = score >= 90 ? "A" : score >= 80 ? "B" : "C";

// Practical examples
function getStatusColor(status) {
    return status === "active" ? "green" : 
           status === "pending" ? "yellow" : "red";
}

let user = { name: "John" };
let displayName = user.name ? user.name : "Guest";
// Or better with nullish coalescing
let betterDisplayName = user.name ?? "Guest";

Practical Examples

javascript
// Form validation
function validateForm(data) {
    if (!data.email || !data.email.includes("@")) {
        return { valid: false, error: "Invalid email" };
    }
    
    if (!data.password || data.password.length < 8) {
        return { valid: false, error: "Password too short" };
    }
    
    return { valid: true };
}

// Shopping cart logic
function calculateShipping(total, userType) {
    if (total >= 100) {
        return 0; // Free shipping
    }
    
    switch (userType) {
        case "premium":
            return 5;
        case "regular":
            return 10;
        default:
            return 15;
    }
}

// Game logic
function checkGameResult(playerScore, computerScore) {
    if (playerScore > computerScore) {
        return "You win!";
    } else if (playerScore < computerScore) {
        return "Computer wins!";
    } else {
        return "It's a tie!";
    }
}

AceDevHub

JavaScript

Conditionals (if, switch)

Conditionals (if, switch)

If Statements

Basic If Statement

If-Else Statement

If-Else If-Else Chain

Nested If Statements

Switch Statements

Basic Switch

Switch with Multiple Cases

Switch vs If-Else

Ternary Operator

Practical Examples