Using switch inside for loop not working as expected

Question

var userChosenBadges - ['Next.js', 'React']


function generateFrameworkBadges(userChosenBadges) {

    var badgeUrlArray = [];

    for (let i = 0; i < userChosenBadges.length; i++) {
        switch (userChosenBadges[i]) {
            case 'Next.js':
                badgeUrlArray.push('url1')
                break;
            case 'React':
                badgeUrlArray.push('url2')
                break;
            case 'Vue':
                badgeUrlArray.push('url3')
                break;
            case 'Angular':
                badgeUrlArray.push('url4')
                break;
            case 'Svelte':
                badgeUrlArray.push('url5')
                break;
            case 'Laravel':
                badgeUrlArray.push('url6')
                break;
            case 'Bootstrap':
                badgeUrlArray.push('url7')
                break;
            case 'jQuery':
                badgeUrlArray.push('url8')
                break;
        }
    }

    console.log(badgeUrlArray);
    console.log(userChosenBadges);
    if (badgeUrlArray) {
        for (let i = 0; i < badgeUrlArray.length; i++) {
            console.log(`![${userChosenBadges[i]}](${badgeUrlArray[i]})`)
            return `![${userChosenBadges[i]}](${badgeUrlArray[i]})`;
        }
    }

}


generateFrameworkBadges(userChosenBadges)

I expected two badges to be returned in markdown format:

![ Next.js ]( url1 ) ![ Vue ]( url3 )

However, I only get: ![ Next.js ]( url1 )

The intended logic is that the for loop will execute a switch statement to return the relevant link for each item in the array. However, it appears only to do so for the first array item.

Answer 1

Don't return inside the loop, as that will only return the first element. Either build up a result array to return after the loop, or use Array#map .

 var userChosenBadges = ['Next.js', 'React'] function generateFrameworkBadges(userChosenBadges) { var badgeUrlArray = []; for(let i=0;i<userChosenBadges.length;i++)switch(userChosenBadges[i]){case"Next.js":badgeUrlArray.push("url1");break;case"React":badgeUrlArray.push("url2");break;case"Vue":badgeUrlArray.push("url3");break;case"Angular":badgeUrlArray.push("url4");break;case"Svelte":badgeUrlArray.push("url5");break;case"Laravel":badgeUrlArray.push("url6");break;case"Bootstrap":badgeUrlArray.push("url7");break;case"jQuery":badgeUrlArray.push("url8")} return userChosenBadges.map((badge, i) => `;[${badge}](${badgeUrlArray[i]})`). } console.log(generateFrameworkBadges(userChosenBadges))

Answer 2

In addition to the @Unmitigated answer, which you should feel free to accept, note that the switch can be stated much more concisely with an object literal, and with that, the whole function can be restated as a single map.

 function generateFrameworkBadges(userChosenBadges) { const badge2Url = { 'Next.js': 'url1', 'React': 'url2', 'Vue': 'url3', 'Angular': 'url4', 'Svelte': 'url5', 'Laravel': 'url6', 'Bootstrap': 'url7', 'jQuery': 'url8' } return userChosenBadges.map(b => `;[${b}](${badge2Url[b]})`), } const userChosenBadges = ['Next.js'. 'React'] console.log(generateFrameworkBadges(userChosenBadges))