The most efficient way to simplify Javascript code

Question

I have a function that looks for the names of the classes to then include the libraries according to the editor to find. It checks the function declaration to know if the library has already been imported.

The code works fine but it repeats.

The question : Is there less simplification of the following code

The problem : I cannot pass variable to the anonymous function of $.getScript

function wfRunEditors(reScann) {
    if ($('.wfe-editorjs').length) {
        if ('undefined' === typeof initWfEditorJS) {
            $.getScript('/src/libs/js/editorjs.full.min.js', function () {
                $.getScript('/src/js/editor/wfeditorjs.js', function () {
                    $.loadCSS('/src/css/editors/editorjs.min.css');
                    wfCheckerFunction['editorjs'] = true;
                    initWfeditorjs(reScann);
                });
            });
        } else {
            wfCheckerFunction['editorjs'] = true;
            initWfeditorjs(reScann);
        }
    }
    if ($('.wfe-trumbowyg').length) {
        if ('undefined' === typeof initWfTrumbowyg) {
            $.getScript('/src/libs/js/trumbowyg.full.min.js', function () {
                $.getScript('/src/js/editor/wftrumbowyg.js', function () {
                    $.loadCSS('/src/css/editors/trumbowyg.min.css');
                    wfCheckerFunction['trumbowyg'] = true;
                    initWftrumbowyg(reScann);
                });
            });
        } else {
            wfCheckerFunction['trumbowyg'] = true;
            initWftrumbowyg(reScann);
        }
    }
    // add other editors
}

Solution :

• I have minified all the js files
• the init functions and the one that includes the css are called at the end of the minified file
• I globalised the variable reScann

function wfRunEditors() {
    let editors = [
        'editorjs',
        'trumbowyg'
        // add other editors
    ];
    for (i = 0; i < editors.length; i++) {
        if ($('.wfe-' + editors[i]).length) {
            if ('undefined' === typeof window['initWf' + editors[i]]) {
                $.getScript('/src/js/editor/' + editors[i] + '.full.min.js');
            } else {
                wfCheckerFunction[editors[i]] = true;
                window['initWf' + editors[i]]();
            }
        }
    }
}

Answer 1

First: Both if statements haven't exactly the same structure:

• in the first you load a script named like the editor but with a wf before: '/src/js/editor/wfeditorjs.js' but in the second you do it without: '/src/js/editor/trumbowyg.js'
• in the second if statement you are additionally loading a css file: $.loadCSS('/src/libs/css/trumbowyg.min.css');

---

If both if statement have exactly the same structure and the called function doesn't use the editor name in camelCase (fe initWfeditorjs instead of initWfEditorJS ) you could just save an array with the editor names and loop over them in a for -loop.

In that loop you could "build" your selector- and src-strings by concatenation with the editor name, for example $('.wfe-' + editors[i]) , and call the function with: window['yourFunctionName'](your_function_param) , for example window['initWf' + editors[i]](reScann) .

Furthermore: You don't need to pass a variable to the anonymous function if that variable is declared globally like your reScann variable.

Example:

function wfRunEditors(reScann) {
    let editors = [
        'editorjs',
        'trumbowyg'
    ];
    
    for (i = 0; i < editors.length; i++) {
        if ($('.wfe-' + editors[i]).length) {
            if ('undefined' === typeof window['initWf' + editors[i]]) {
                $.getScript('/src/libs/js/' + editors[i] + '.full.min.js', function () {
                    $.getScript('/src/js/editor/wf' + editors[i] + '.js', function () {
                        $.loadCSS('/src/libs/css/' + editors[i] + '.min.css');
                        wfCheckerFunction[editors[i]] = true;
                        window['initWf' + editors[i]](reScann);
                    });
                });
            } else {
                window['initWf' + editors[i]](reScann);
            }
        }
    }
}