Is it possible to provide default parameters with rest operator

Question

I was learning from an ES6 essential course and trying default parameters and rest operator for functions. I have defined a function sayHi as below with default parameters and then rest operator which does not gives the desired output.

const sayHi = (greetings, ...names) => {

    names.forEach(item => {
        console.log(`${greetings} ${item}`);
    });

}

sayHi('Hi', 'Ahsan', 'Awais', 'Haseeb');

The above snippet works as desired. but when I tried to set a default parameter value for greetings variable it works but gives unwanted result i.e. value 'Ahsan' is taken by the greetings variable.

const sayHi = (greetings = ' Hi', ...names) => {

  names.forEach(item => {
    console.log(`${greetings} ${item}`);
  });

}

sayHi('Ahsan', 'Awais', 'Haseeb');

Is there a way I can set default parameters in function like above before rest operator?

Answer 1

You can't, no. The rest parameter only picks up the "rest" of the parameters not consumed by any previous formal parameters, so greeting will always receive the first argument's value.

Separately, since both the names and the greeting have the same type, you can't provide a default at all if you want to accept the names that way.

A couple of options for you:

A curried function

You could have a function that accepts the greeting and returns a function that uses it with whatever you pass it:

const greet = (greeting = "Hi") => (...names) => {
    for (const name of names) {
        console.log(`${greeting} ${name}`);
    }
};

greet()("Ahsan", "Awais", "Haseeb");
greet("Hello")("Ahsan", "Awais", "Haseeb");

Note how we called that:

greet()("Ahsan", "Awais", "Haseeb");

greet() creates the function using the default greeting. Then we call that function by using ("Ahsan", "Awais", "Haseeb") on it. greet("Hello") creates a function that uses the greeting "Hello" (and then we call it).

(I also took the liberty of using for..of rather than forEach, but it's a matter of style.)

Take names as an array

Another option is to accept the names as an array. That way, we can tell inside the function whether we got a greeting or not:

const greet = (greeting, names) => {
    if (Array.isArray(greeting)) {
        names = greeting;
        greeting = "Hi";
    }
    for (const name of names) {
        console.log(`${greeting} ${name}`);
    }
};

greet(["Ahsan", "Awais", "Haseeb"]);
greet("Hello", ["Ahsan", "Awais", "Haseeb"]);