How to Eliminate Empty Code Blocks with ESLint’s no‑empty Rule

Preface ESLint is the most popular and powerful JS code validation tool. When code triggers ESLint rules, it reports errors. This series will explain the ESLint rules that require manual fixing, helping you migrate existing code under ESLint protection.

no-empty

Disallows empty code blocks such as if / else / for / catch etc.

For example, the following if statement has an empty block:

if (foo) {

} else {
    bar()
}

Inverting the condition removes the empty if block and makes the code shorter:

if (!foo) {
    bar()
}

If the inverted condition is hard to read, you can add a comment to break the “empty block” state:

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

Comments inside an otherwise empty block are considered non‑empty, so ESLint will not warn.

The same applies to try / catch. Silent failures often have an empty catch block:

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

Although the code runs, readers may not understand the intent. Adding a comment clarifies the silent‑failure purpose:

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

no-empty-function

Disallows empty functions.

Empty functions may appear because the implementation is unfinished. In that case, simply complete the function.

Sometimes an empty function is intentional, e.g., a no‑op placeholder like jQuery’s .noop() used as a default callback.

I really need an empty function

If you rely on a library that provides .noop(), use it. Otherwise, you can define a no‑op with a comment to express intent:

function noop() {
    // do nothing
}

Empty function as a default parameter

Consider a function that fetches data via Ajax and accepts a callback. A no‑op can be used as the default value:

function showData(dataUrl, callback) {
    // prepare a no‑op as default
    function noop() {}
    callback = callback || noop

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

However, if callback is not a function, calling it will throw. It is safer to check the type before invoking:

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

This makes the code more robust and eliminates the need for an empty function.