Is there a difference between a function and an arrow (=>) function

Question

I've been playing around ES6 features for sometime now and on this very occasion, there was an error of me using the function before declaring it, but when I changed to the good old traditional way, the error wasn't caught.

Does function hoisting only work for the traditional way, or there's a catch I'm missing?

I've tried searching but this Besides syntax, is there any difference between a normal function and an arrow function? couldn't give me a satisfactory result

A simple input form code:

<!DOCTYPE html>
<html>
<head>
  <title>Hero Form</title>
</head>
<body>
  <form id="hero">
    <label for="heroName">Name:
      <input type="text" name="heroName" autofocus
      placeholder="Your super Hero Name"Smaxlength="32">
    <!-- </label> -->
    <button id="submit" type="submit">Submit</button>
  </form>
</body>
</html>

<script>
  // Throws an error when called first
  form.addEventListener('submit', makeHero, false);
  const form = document.forms.hero;

  const makeHero = (event) => {
    event.preventDefault();
    const hero = {};
    hero.name = form.heroName.value;
    console.log(JSON.stringify(hero), hero, 'clear');
    return hero;
  }
</script>

<script>
  const form = document.forms.hero;

  const makeHero = (event) => {
    event.preventDefault();
    const hero = {};
    hero.name = form.heroName.value;
    console.log(JSON.stringify(hero), hero, 'clear');
    return hero;
  }
// Works fine after arrow function declaration
  form.addEventListener('submit', makeHero, false);
</script>

arrow function aren’t hoisted, so you need to put that `form.addEventListener('submit', makeHero, false);` at the bottom. — Federkun, Aug 09 '19 at 13:15
Arrow functions are clearly just values being assigned to regular variables. `function` declarations on the other hand are a completely different kind of statement, and they're hoisted. — deceze, Aug 09 '19 at 13:16
"Does function hoisting only work for the traditional way, or there's a catch I'm missing?" — You've **demonstrated** that function declarations are hoisted and arrow function assignments to constants are not. It's unclear why you feel the need to ask this as a question. — Quentin, Aug 09 '19 at 13:17

Scott Marcus · Answer 1 · 2019-08-09T13:32:08.840

This really has nothing to do with arrow functions, per se. In JavaScript, declarations are hoisted to the top of their scope. A declaration might look like this:

let x = 42;

But, there are really two things being done with this single statement. First, the declaration:

let x

And then the assignment:

x = 42

Here, the declaration (let x) is hoisted, but not the assignment (x = 42).

This is no different than what you are doing with your variable declaration that you are doing with your variable being assigned to an arrow function:

const makeHero = (event) => { ...

The const makeHero will be hoisted, but not the assignment of: `makeHero = (event) => { ...

Functions can be set up in more than just one way though and one such way is a Function Declaration, which doesn't assign a variable and the entire function is hoisted:

function makeHero(event) {
}

Now a Function Expression, is just an expression where a function is being assigned as the value of something else and that's what you are doing with your assignment of the arrow function to the constant hero. So, const hero gets hoisted, but not the assignment, so if you were to try to call hero before the assignment, you'd get an error.

Is there a difference between a function and an arrow (=>) function

1 Answers1