Function createLI not an arrow function?

Great question.

When declaring a function, you'll see something like this:

function createLi() {
}

While the function declaration above is syntactically a statement, functions can also be created by a function expression. >Such a function can be anonymous; it does not have to have a name:

When using arrow functions, the function does not have a name (it's always anonymous):

ul.addEventListerner('click', (e) => {

});

This is a great resource that explains functions in greater detail: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions

Hope this helps!

To add. Named function declarations can be useful when debugging errors. The console will show the function name instead of stating anonymous. This log is what is referred to as the stack trace

To cover another difference between the two involves a topic called hoisting.

A function declarations is hoisted making it available in within the scope. A function expression will only be available after the assignment.

Example of a function declarations:

function createLI() {
// Magic
}

Example of a function expression:

let createLi = () => {
// Magic
}

For more information on hoisting:

MDN Hoisting

If you are going to use function just once, especially for event handler, you don't have function name. But if you are going to reuse it later on, you have to name your function.

For this function, you could write the createLI function like this:

const createLI = text => {

}