This is just a simplified version, as an example

My code:

function foo() {
   if (bar) {
      // logic
      return something;
   } else {
      return somethingElse;
   }
}

His refactor:

function foo() {
   if (bar) {
      // logic
      return something;
   }
   return somethingElse;
}

Which do you prefer?

I personally find the first to be more readable. Thoughts?

This really interested me particularly in the React ecosystem. A lot of times I see something like this:

const UserList = (props: Props) => {}
export default UserList;

I've never really understood this: why would you use a `const` here and an arrow function when you can just use the function keyword and make it far more concise? I would say it's even easier to understand and read

export default function UserList(props: Props) {}

Maybe I'm an old fart but I remember the arrow function being introduced basically for two primary purposes:

1. lambda-like inline functions (similar to python)

2. maintaining an outer scope of this

for the lambda function, it's basically just replicating python so you don't have to write out an entire function body for a simple return:

// before arrow function, tedious to write out and hard to format
users.map(function (user) {
  return user.id;
})
// after, quick to read and easy to understand
users.map(user => user.id);

the other way I've really seen it apply is when you need `this` to reference the outer scope. For example:

function Dialog(btn: HTMLButtonElement) {
  this._target = btn;
  this._container = document.createElement('dialog');
}

Dialog.prototype.setup = function setup() {
  this._target.addEventListener('click', () => {
    this._container.open = !this._container.open;
  });
}

// Gotta use the `const self = this` if you wanna use a normal function
// Without an arrow function, it looks like this:
Dialog.prototype.setup = function setup() {
  const self = this;
  self._target.addEventListener('click', function () {
    self._container.open = !self._container.open;
  });
}

but in the case I showed above, I see it everywhere in react to use constants to store functions, but I don't totally understand what the inherent benefit is past maybe some consistency. The only other one I've found is that if you're using typescript, you can more easily apply types to a constant.

So is there some reason I am not aware of to prefer constants and avoid the function keyword?

I can code things using Javascript, but the more I learn about the language, the more I feel I'm not using it properly. This was especially made apparent after I watched Douglas Crockford's lecture "Javascript: The good parts." I want to take my abilities to the next level, but I'm not really sure where to start, so I was hoping people could list things they constantly see programmers improperly do in JS and what they should be doing instead.. or things that they always see people get wrong in interviews. Most of the info I've learned came from w3schools, which gives a decent intro to the language, but doesn't really get into the details about the various traps the language has. If you have any good book recommendations, that would be appreciated as well.