Switch statement and equivalent if else loop always return wrong value

I am currently trying to display a different icon next to a document for different file types using Angular framework. However, no matter what file type I set as the fileExtension, be it txt or jpg as examples, it always goes to the default value of returning file-text as the iconType.

    public getIcon(document: Document): string {
        let mimeType = document.fileType;
        let fileExtension = mimeType.split('.')[1];
        let iconType = '';

        switch (fileExtension) {
            case fileExtension === 'jpeg' || 'gif' || 'png' || 'svg' || 'xml'  || 'bmp' || 'jpg'|| 'tif' || 'tiff':
                iconType = 'picture';
                break;
            case fileExtension === 'avi' || 'mpg' || 'wmv' || 'mpeg' || 'mp4' || 'mov':
                iconType = 'video-folder';
                break;
            case fileExtension === 'cda' || 'mp3' || 'mpa' || 'wav' || 'wma':
                iconType = 'volume';
                break;
            case fileExtension === 'pdf' || 'ai' || 'pptx':
                iconType = 'article';
                break;
            default:
                //includes: .docx , .odt, .rtf, .txt, .xml, .xps
                iconType = 'file-text';
                break;
        }
        console.log(iconType);
        return iconType;
    }

If I try debugging, I can see that despite the value of fileExtension being "jpg", it returns the default icon-type of "file-text". Image of debugging with breakpoints

I also tried using a simple if else loop equivalent but when I do that it seems to always return the first if case value for all (e.g: picture even when fileExtension = "txt"):

        if (fileExtension === 'jpeg' || 'gif' || 'png' || 'svg' || 'xml' || 'bmp' || 'jpg' || 'tif' || 'tiff') {
            iconType = 'picture';
        } else if (fileExtension === 'avi' || 'mpg' || 'wmv' || 'mpeg' || 'mp4' || 'mov') {
            iconType = 'video-folder';
        } else if (fileExtension === 'cda' || 'mp3' || 'mpa' || 'wav' || 'wma') {
            iconType = 'volume';
        } else if (fileExtension === 'pdf' || 'ai' || 'pptx') {
            iconType = 'article';
        } else {
            iconType = 'file-text';
        }
        console.log(iconType);
        return iconType;

I am just really confused as to why it doesn't go to the proper case. Any help would be greatly appreciated!

You need to restate the left side of your conditional check in your if statement each time; or have a separate case for each individual file extension type in your switch.

if(fileExtension === “jpg” || fileExtension === “png” …) {…}

Here are a few other options as well in case you’re interested:

Include each picture type in an array, and check to see if the value is included in the array:

pictureFileExtensions = [“jpg”, “gif”, …]
videoFileExtensions = […]

If (pictureFileExtension.includes(fileExtension)){
        iconType = “picture”
    } else if (videoFileExtension.includes(fileExtension)){
        iconType = “video”
    } else if …

Create an object with the file extension as the key and the icon type as the value:

const iconTypes = {jpg: “picture”, avi: “video”, …}

iconType = iconType[fileExtension]

You're actually using the switch case wrong. Here is the correct syntax:

    switch (fileExtension) {
        case 'jpeg':
        case 'gif':
        case 'png':
        case 'svg':
        case 'xml':
        case 'bmp':
        case 'jpg':
        case 'tif':
        case 'tiff':
            iconType = 'picture';
            break;
        case 'avi':
        case 'mpg':
        case 'wmv':
        case 'mpeg':
        case 'mp4':
        case 'mov':
            iconType = 'video-folder';
            break;
        case 'cda':
        case 'mp3':
        case 'mpa':
        case 'wav':
        case 'wma':
            iconType = 'volume';
            break;
        case 'pdf':
        case 'ai':
        case 'pptx':
            iconType = 'article';
            break;
        default:
            //includes: .docx , .odt, .rtf, .txt, .xml, .xps
            iconType = 'file-text';
            break;
    }