Function Types

Now that we know how to define a function and how to use a function, we can take a look at other ways we can make functions.

There are 3 kinds of functions.

Function Types

Function Declaration

This is also called Function Statement

function myFunc() {
  return 'some value'
}

This is the most normal way of declaring functions, and you are going to use most of these.

Function Expression

This is also called Function Literal

const myFunc = function optionalName() {
  return 'some value'
}

A function expression have to be declared first before you can call them. These can be without a name like the example bellow. These are called anonymous function expression.

const myFunc = function () {
  return 'some value'
}

Arrow Function

Arrow functions are a part of the new ES6 JavaScript.

const myFunc = () => {
  return 'some value'
}

const myFunc2 = (name, age) => {
  return 'My name is ' + name + ' and my age is ' + age
}

These are the same as the anonymous function expression but instead of having a keyword function before the parentheses, they have the arrow sign after =>.

But if you are going to only return just some value back you can skip the { } curly brackets and the return keyword.

const myFunc2 = (name, age) => {
  return 'My name is ' + name + ' and my age is ' + age
}

// is the same as

const myFunc2 = (name, age) => 'My name is ' + name + ' and my age is ' + age

There are some differences between these 3 way of declaring the functions.

I like to use the arrow function as much as I can when I bind them to an object, and I like the function declaration when is just alone.

Hoisting

One important practical difference is hoisting. JavaScript moves function declarations to the top of the file before running your code, so you can call them before they appear in the source.

// This works — function declaration is hoisted
sayHello()

function sayHello() {
  console.log('Hello!')
}

Function expressions and arrow functions are not hoisted. You must define them before calling them.

// This throws an error — greet is not yet defined
greet()

const greet = () => {
  console.log('Hello!')
}

As a rule: if you use const or a function expression, always write the definition before the call.