Fix Common ESLint Warnings in Existing JS Code (Part 3)

Preface ESLint is a widely used JavaScript linting tool. When code triggers an ESLint rule, the tool reports an error. This series explains rules that require manual fixes to help migrate existing code under ESLint protection.

no-empty

Disallows empty code blocks such as if , else , for , or catch .

Example of an empty if block:

if (foo) {

} else {
    bar()
}

Inverting the condition removes the empty block and simplifies the code:

if (!foo) {
    bar()
}

If inverting harms readability, add a comment inside the block to break the “empty” status:

if (foo) {
    // do nothing
} else {
    bar()
}

A block that contains only a comment is no longer considered empty because the comment explains its purpose.

The same reasoning applies to empty try / catch blocks. A silent‑failure pattern often looks like:

try {
    bar()
} catch (e) {}

Adding a comment clarifies the intent:

try {
    bar()
} catch (e) {
    // silent failure
}

no-empty-function

Disallows empty functions.

Empty functions may appear because the implementation is pending; completing the function resolves the warning.

When an intentionally empty function is needed, such as a default callback, it can be expressed with a comment:

function noop() {
    // do nothing
}

Example where a default empty function is used for a callback parameter:

function showData(dataUrl, callback) {
    // prepare an empty function as default
    function noop() {}
    callback = callback || noop

    // fetch data
    getData(dataUrl)
        .then(function (data) {
            var html = render(data)
            wrapper.innerHTML = html
            // finally invoke the callback
            callback()
        })
}

The purpose of the noop default is to ensure callback() does not throw when no callback is supplied.

If callback is not a function, the call will still fail. Validating the argument before invoking it removes the need for a default empty function:

function showData(dataUrl, callback) {
    getData(dataUrl)
        .then(function (data) {
            var html = render(data)
            wrapper.innerHTML = html
            // verify callback is a function before calling
            if (isFunction(callback)) callback()
        })
}

This version is more robust and eliminates the empty‑function warning.