Function expression in JS

Well in JavaScript you can also store functions in variable. When a function is stored inside of a variable, it's called a function expression.

var catSays = function(max) {
  var catMessage = "";
  for (var i = 0; i < max; i++) {
    catMessage += "meow ";
  }
  return catMessage;
};

Notice how the function keyword no longer has a name.

var catSays = function(max) { 
  // code here 
};

This is called an anonymous function. Because you stored the functions in a variable called catSays.And, if you try accessing the value of the variable catSays, you'll even see the function returned back to you.

catSays;
Returns:

function(max) {
  var catMessage = ""
  for (var i = 0; i < max; i++) {
    catMessage += "meow ";
  }
  return catMessage;
}

Function expressions and hoisting So now you have two ways to define a function in JavaScript a Function Declaration and a Function Expression.Deciding when to use a function expression and when to use a function declaration can depend on a few things, and you will see some ways to use them in the next section. But, one thing you'll want to be careful of is hoisting. One thing that needs to be consider is a quirky behaviour in JavaScript called hoisting.

Screenshot 2022-08-18 at 3.39.38 PM.png

All function declarations are hoisted and loaded before the script is actually run. Function expressions are not hoisted, since they involve variable assignment, and only variable declarations are hoisted. The function expression will not be loaded until the interpreter reaches it in the script.

Functions as parameters Being able to store a function in a variable makes it really simple to pass the function into another function. A function that is passed into another function is called a callback. Let's say you had a helloCat() function, and you wanted it to return "Hello" followed by a string of "meows" like you had with catSays. Well, rather than redoing all of your hard work, you can make helloCat() accept a callback function, and pass in catSays.

 // function expression catSays
var catSays = function(max) {
  var catMessage = "";
  for (var i = 0; i < max; i++) {
    catMessage += "meow ";
  }
  return catMessage;
};

// function declaration helloCat accepting a callback
function helloCat(callbackFunc) {
  return "Hello " + callbackFunc(3);
}

// pass in catSays as a callback function
helloCat(catSays);

Named function expressions The function actually has a name.

var favMovie=function movie(){
return "Cinderilla";
};
favMovie();//return "Cinderilla"

Inline function expressions A function expression is when a function is assigned to a variable. And, in JavaScript, this can also happen when you pass a function inline as an argument to another function.

// Function expression that assigns the function displayFavorite 
// to the variable favoriteMovie
var favoriteMovie = function displayFavorite(movieName) {
  console.log("My favorite movie is " + movieName);
};

// Function declaration that has two parameters: a function for displaying
// a message, along with a name of a movie
function movies(messageFunction, name) {
  messageFunction(name);
}

// Call the movies function, pass in the favoriteMovie function and name of movie
movies(favoriteMovie, "Finding Nemo");
Returns: My favorite movie is Finding Nemo

But you could have bypassed the first assignment of the function, by passing the function to the movies() function inline.

// Function declaration that takes in two arguments: a function for displaying
// a message, along with a name of a movie
function movies(messageFunction, name) {
  messageFunction(name);
}

// Call the movies function, pass in the function and name of movie
movies(function displayFavorite(movieName) {
  console.log("My favorite movie is " + movieName);
}, "Finding Nemo");
Returns: My favorite movie is Finding Nemo

This type of syntax, writing function expressions that pass a function into another function inline, is really common in JavaScript. It can be a little tricky at first, but be patient, keep practicing, and you'll start to get the hang of it!

Why use anonymous inline function expressions? Anonymous inline function expressions are often used with function callbacks that are probably not going to be reused elsewhere.