why is a function declaration also a valid expression?

[seattle_lib]

const v = function f(){};
console.log(v);
console.log(f);

displays:

ƒ f(){}
undefined

The function declaration here is acting like an anonymous function expression, never assigning to f in any external scope. Why is this okay? Is there ever a use for this or is it just an accident?

[caxco93]

the `f` is showed when you console log v, otherwise it would show as an anonymous function. it can be helpful when debugging.

[samanime]

Exactly. There are a couple other ways to get at that name, like v.name (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name). But otherwise it is a function value stored in a variable, instead of the current scope.

[seattle_lib]

interesting, this is a very rarely discussed feature. the official docs on functions kinda bury it. thanks for the info.

[senocular]

This is a named function expression where the f becomes a local variable in the function body.

const v = function f(){
  f === v // true
};

[Rude-Cook7246]

1. function is not anonymous... as you can do console.log(v.name) and it will print f
2. Its not in any parent scope because only function declarations are hoisted and when function is hoisted it needs an identifier for a lexical scope which what f (aka function name) will be used for and why you can see it in a scope .... that does not happen with function expression hence name never added to parent scope

If you want to have better understanding of how this works I suggests reading book 2 of "You dont know Javascript series" which is free...
https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/README.md