Override JavaScript default parameter with undefined

Maybe because you can't. That's the reason default parameters are designed to guard against undefined values.

As per Mozilla documentation

Default function parameters allow named parameters to be initialized with default values if no value or undefined is passed

See above. It's clearly written: if undefined is passed, default parameters are used.

what would be an appropriate way to write foo to achieve this?

If you mean to default only when there is no parameter passed to the function call, then you need to check the arguments length, or to spread the arguments if you want to keep an arrow function.

const foo = (...args) => {
  const bar = args.length ? args[0] : "";
  console.log(bar)
}

foo(null) // null
foo(undefined) // undefined
foo(); // ""

In the example code you just provided, that's apparently not possible.

As per the official documentation.

In JavaScript, function parameters default to undefined. However, it's often useful to set a different default value. This is where default parameters can help.

No, you can't, by design.

You've run into an interesting demonstration of JavaScript's 'two nulls', null and undefined.

null is a designated null value

undefined is the absence of any value at all

You ask about the passing the 'value' undefined but that premise is flawed. There is no value undefined - undefined is the lack of a value.

Therefore, you shouldn't pass undefined as a meaningful value to be interpreted by a function. I mean, you can, but from the point of view of JavaScript it is equivalent to passing nothing at all - so you're fighting against the design of the language and will run into issues like this one.

If you want to pass a meaningful, purposeful null value, that is what null is for.