Enhancing Code Readability with default-param-last in ESLint

What is default-param-last?

In ESLint, the default-param-last rule enforces a specific code style for function parameters: it requires that default parameter values (= value) must always be placed at the end of the parameter list.

Why is this rule important?

There are two primary reasons for this rule:

• Compatibility
  In older versions of JavaScript (pre-ES6), default parameters were not supported. By placing defaults at the end, you ensure that your code remains functional even in these environments. However, with modern JavaScript, this compatibility concern is less relevant.
• Readability
  When default parameters are grouped together at the end, it makes the function signature easier to understand at a glance. It clarifies which parameters are mandatory and which have optional defaults.

Example

// Compliant: Default parameter at the end
function greet(name = "World") {
  console.log("Hello, " + name + "!");
}

// Non-compliant: Default parameter in the middle
function greet(greeting = "Hi", name) { // ESLint would flag this
  console.log(greeting + ", " + name + "!");
}

Configuration

The default-param-last rule can be enabled or disabled in your ESLint configuration file (.eslintrc.js or .eslintrc.json). You can also configure it to allow specific exceptions if needed.

How to use it

To enable default-param-last, add the following to your ESLint configuration:

{
  "rules": {
    "default-param-last": ["error"]
  }
}

This will make the rule report errors when it encounters non-compliant code.

---

Compliant Code

• Placing default parameters at the end:

function calculateArea(width, height = 10) {
  return width * height;
}

function greet(name = "World", message = "Hello") {
  console.log(message + ", " + name + "!");
}

const options = {
  debug: false,
  logLevel: "info" // Default value
};

• Using destructuring with default values:

function createUser({ name = "Anonymous", age } = {}) {
  return { name, age };
}

• Placing default parameters in the middle:

function calculateArea(width, height = 10, length) { // Non-compliant
  // ...
}

function greet(greeting = "Hi", name) { // Non-compliant
  console.log(greeting + ", " + name + "!");
}

• Omitting a default value after a parameter with a default:

function createUser(name = "Anonymous", age) { // Non-compliant (missing default for age)
  // ...
}

---

• Team Style Guide
  Establish a team-wide style guide that dictates how default parameters should be handled. This could involve adhering to default-param-last or adopting a different consistent approach. Having a documented style guide promotes maintainability and reduces the need for relying solely on ESLint rules.

• Formatting Tools
  Consider using code formatters like Prettier or ESLint's built-in formatting capabilities. These tools can automatically adjust the order of parameters, including defaults, to adhere to a consistent style. This removes the need for manual enforcement through a specific ESLint rule.

• Disabling the Rule
  If you have a strong preference for a different style or encounter specific scenarios where placing defaults last isn't ideal (like libraries with backwards compatibility concerns), you can disable the default-param-last rule in your ESLint configuration. However, be mindful of consistency within your codebase.