Arrow Functions don't works. Regular ones do. Why?

Question

I have a piece of code, that is just vanilla javascript. When I use arrow functions I get this error:

Uncaught ReferenceError: loadEventListeners is not defined

When I use regular function, syntax, it works fine.

Here is my code:

const form = document.querySelector('#task-form');
const taskList = document.querySelector('.collection');
const clearBtn = document.querySelector('.clear-tasks');
const filter = document.querySelector('#filter');
const taskInput = document.querySelector('#task');

// Load all event listeners
loadEventListeners();

// Load all event listeners
const loadEventListeners = () => {
  // Add task event
  form.addEventListener('submit', addTask);
}

// Add Task
const addTask = (e) => {
  if(taskInput.value === '') {
    alert('Add a task');
  }

  // Create li element
  const li = document.createElement('li');
  // Add class
  li.className = 'collection-item';
  // Create text node and append to li
  li.appendChild(document.createTextNode(taskInput.value));
  // Create new link element
  const link = document.createElement('a');
  // Add class
  link.className = 'delete-item secondary-content';
  // Add icon html
  link.innerHTML = '<i class="fa fa-remove"></i>';
  // Append the link to li
  li.appendChild(link);

  // Append li to ul
  taskList.appendChild(li);

  // Clear input
  taskInput.value = '';

  e.preventDefault();
}

My question is this. Do I need to do something that enables arrow functions, in my code? Maybe I need to setup Webpack or Parcel for this? I do not know why this is. Just replace the const <functionName> = () => {} with function <functionName>() {} and it works. Would really like a more thorough explanation why this is happening, if it is possible.

Thanks for your time..

`const` vars are not available before they’re declared. Move the declaration above the invocation. See https://stackoverflow.com/questions/31219420/are-variables-declared-with-let-or-const-not-hoisted-in-es6 — Clive, Oct 17 '18 at 10:22
Also, this: https://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname — jrook, Oct 17 '18 at 10:24
check out the topic of [hoisting](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting) — Thomas, Oct 17 '18 at 10:30

You Nguyen · Accepted Answer · 2018-10-17T23:19:24.697

That's something called Temporal Dead Zone

let bindings are created at the top of the (block) scope containing the declaration, commonly referred to as "hoisting". Unlike variables declared with var, which will start with the value undefined, let variables are not initialized until their definition is evaluated. Accessing the variable before the initialization results in a ReferenceError. The variable is in a "temporal dead zone" from the start of the block until the initialization is processed.

All the considerations about the "temporal dead zone" apply to both let and const.

Example:

function do_something() {
  console.log(bar); // undefined
  console.log(foo); // ReferenceError
  var bar = 1;
  let foo = 2;
}

In your case, just simply define the function first before using it.

Arrow Functions don't works. Regular ones do. Why?

1 Answers1