How to define a default value for function in JavaScript

I am trying to formulate a story to start off this post but I can't come up with any after work so here goes nothing.

function setUser(name, age) {
  // api request with name and age
}

Above you just saw a very normal JavaScript function with normal parameters that this very normal function can accept. I just bit my tongue saying that. Because it's a function that anybody can pass anything to it, including undefined and null, we should probably either check if it's a valid value or for the purpose of this post, we should set a default value.

if / else ​

This is probably the most straight forward method to go about it and will never go wrong besides it's taking too many lines.

function setUser(name, age) {
  if (!name) {
    name = "Jennifer"
  }

  if (!age) {
    age = 18
  }
}

Basically it is checking if name and age are given any values if not we just give it a value. The benefit is it is very clear on what is happening and you can add more stuffs in those conditions. But I think it's taking too many lines for just checking if values are set and there are more succinct ways to do this.

Boolean Logical Operator ​

function setUser(name, age) {
  name = name || "Jennifer"
  age = age || 18
}

Here we are utilizing how JavaScript understand truthy and falsy values. If the values are empty then it is false. When doing OR comparison, it will evaluate the first item, if falsy then evaluate the second and so on. In this case we evaluate if name is falsy or if it is empty (it could also be other values like 0 but assuming it is just a string), if it empty then evaluate the second item which is an actual string. Since this string is truthy it will return this value so now name should always have a value.

Ternary ​

function setUser(name, age) {
  name = name ? name : "Jennifer"
  age = age ? age : 18
}

Ternary in my opinion is a shorter version of if / else. We evaluate if name is truthy, if so then return name or return the string we set. This seems cleaner than if / else and also shorter.

Default Parameters ​

function setUser(name = "Jennifer", age = 18) {
  // api request with name and age
}

I hope you didn't think I was just trying to hold the best answer for the last. OK I did. We can easily set the default value when we define our parameters. So if name and age are not defined, the function will adopt the default values.

Bonus: Optional Chaining with Nullish Coalescing Operator ​

function setUser(user) {
  const name = user?.name ?? "Jennifer"
  const age = user?.age ?? 18
}

In the above function, we expect the parameter user is an object and expect it has name and age key. But of course sometimes it may not have it as we cannot control how people will use this function. The ?. in user?.name denotes that if user is defined but is null or undefined, then return undefined. if you don't have user defined and you try to access the key you will get the infamous error:

VM58:1 Uncaught ReferenceError: user is not defined

This won't happen if using optional chaining, the ?.. Combining with nullish coalescing operator, we make it return another value if it first receives null or undefined. In this case, if user has a value of undefined, it will evaluate to be undefined then return "Jennifer".

The main Difference between nullish coalescing operator and boolean logical operator is the first will only check if the left hand side results in null or undefined then move on to the right hand side whereas boolean logical operator just checks if left hand side is falsy.