Traditional Functions or Arrow Functions in Javascript?

The order matters. Declare it
into a variable and then call it.

I might be incorrectly interpreting what you're saying, but have you heard of IIFE? developer.mozilla.org/en-US/docs/G...
You can create a function and immediately call it while storing the result in a variable.

I use them pretty interchangeably these days - I like the traditional syntax for how self-explanatory it is (though, these days, I think most people are just as familiar with ES6 arrow syntax).

As Ben mentioned previously, one of the main draws of arrow syntax has to do with how it interacts with the this keyword. It does not generate its own context for this, but rather inherits the context of the environment in which it was created.

For things like React class components, this can be a godsend.

class Test extends React.Component {
  constructor(props){
    this.log = this.log.bind(this);
  }
  log(){
    console.log(this);
  }
  render(){
    return // Whatever
  }
}

vs.

class Test extends React.Component {
  log = () => console.log(this);
  render(){
    return // Whatever
  }
}

Of course, with more people being familiar with the convenience of Hooks, this is a bit less relevant. Still good to note.

Once you override the variable
where the function lives, it's over.

If you assign them to a constant, you don't run the risk of overriding them. In general, it's a good idea to always use the keyword const if you want to store your function expressions.

Generally I favour expressions over declarations because they are shorter to type. When written as callbacks, they also seen clearer to me.

This seems to be a recurring question. The most important purpose of arrow functions is actually to do with maintaining scope.