const - JS | lectureJavaScript Fundamentals 2

In JavaScript, there are different ways of writing functions, and each type of function works in a slightly different way but don't worry, they're still all very similar.

The functions we wrote in the previous lecture are known as function declarations because we used the function keyword to declare our function just like we do when we declare variables.

Let's declare a function, and this time a function that greets someone based on the given name.

// Function Declaration
function greetUser(userName) {
  const text = `Good morning ${userName}`;
  /**
   *  We could also do it in one go like this:
   *  return `Good morning ${userName}`
   */
  return text;
}

const greeting = greetUser('Ulrich');

To create a function expression, instead of writing a function with the name greetUser, we simply write function without a name. We still define the function parameters and the function body. After that, we store that function into a variable, and that variable will be the function. Here is what I mean:

// Function Expression
const greetUser1 = function (userName) {
  const text = `Good morning ${userName}`;
  /**
   *  We could also do it in one go like this:
   *  return `Good morning ${userName}`
   */
  return text;
};

const greeting1 = greetUser1('Ulrich');

You can notice that we wrote both functions in a similar way, but we didn't give a name to our second function (function expression). Functions without a name are usually referred to as anonymous functions. Our function expression, just as its name says, is an expression that produces a value that we store in greetUser1, which will then be the function.

If you then try to log both greeting and greeting1, you see that you get the same result showing us that the function expression works the same way as the function declaration. We call it the same way; we capture the return value in the same way, and the result is the same because the function body is the same.

It's, however, important to know that we have these two types of functions in JavaScript because, in some places, we will need to write them as function expressions.

Besides this technical difference, you might be asking yourself what's the big difference between them. The main practical difference is that we can call function declarations before they are defined in the code. Let's have an example:

const greeting = greetUser('Ulrich');
// Function Declaration
function greetUser(userName) {
  const text = `Good morning ${userName}`;
  return text;
}

You can now see from the above code that we're calling our function first and then defining it later. If we try logging greeting, we still get the same result. If we try or attempt to do the same with the expression, it will not work.

const greeting1 = greetUser1('Ulrich'); // Result ==> Uncaught ReferenceError
// Function Expression
const greetUser1 = function (userName) {
  const text = `Good morning ${userName}`;
  return text;
};

We see that we get a ReferenceError. Internally this happens because of a process called hoisting but more about this in a future lecture.

Now about which function type to use because I guess that's the next question you have. To answer this question, I'll say it's just a matter of personal preference. Different developers prefer different formats. I like using function expressions because this then forces me into a nice structure where I have to define all the functions first at the beginning of my scripts, and only then can I call them, making the code look nicer and more structured.