Below code works fine with function declaration but not with function expression

Question

I am writing two type of code in javascript one is with function declaration and one with function expression i just wrote first with function declaration for createDrinkorder function and second one with function expression and the problem i am facing is that i am getting correct output for function declaration but error with function expression and according to javascript rules i can use both function declaration and function expression but when i try to do the task with function expression i am getting error that createDrinkorder is not a function

below is my code for that

var passengers = [{
    name: "Jane Doloop",
    paid: true,
    ticket: "coach"
  },
  {
    name: "Dr. Evel",
    paid: true,
    ticket: "firstclass"
  },
  {
    name: "Sue Property",
    paid: false,
    ticket: "firstclass"
  },
  {
    name: "John Funcall",
    paid: true,
    ticket: "coach"
  }
];

function servePassengers(passengers) {
  for (var i = 0; i < passengers.length; i++) {
    serveCustomer(passengers[i]);
  }
}
servePassengers(passengers);

function createDrinkOrder(passenger) {
  if (passenger.ticket === "firstclass") {
    document.write("Would you like a cocktail or wine?" + "<br>");
  } else {
    document.write("Your choice is cola or water." + "<br>");
  }
}

function serveCustomer(passenger) {
  createDrinkOrder(passenger);
  createDrinkOrder(passenger);
}

and this is code for function expression

var passengers = [{
    name: "Jane Doloop",
    paid: true,
    ticket: "coach"
  },
  {
    name: "Dr. Evel",
    paid: true,
    ticket: "firstclass"
  },
  {
    name: "Sue Property",
    paid: false,
    ticket: "firstclass"
  },
  {
    name: "John Funcall",
    paid: true,
    ticket: "coach"
  }
];

function servePassengers(passengers) {
  for (var i = 0; i < passengers.length; i++) {
    serveCustomer(passengers[i]);
  }
}
servePassengers(passengers);
var createDrinkOrder = function(passenger) {
  if (passenger.ticket === "firstclass") {
    document.write("Would you like a cocktail or wine?" + "<br>");
  } else {
    document.write("Your choice is cola or water." + "<br>");
  }
}

function serveCustomer(passenger) {
  createDrinkOrder(passenger);
  createDrinkOrder(passenger);
}

Because you call `servePassengers` which is *before* `createDrinkOrder` is created. So when `servePassengers` calls `serviceCustomer` and then that calls `createDrinkOrder`, the function hasn't been defined yet. — VLAZ, Feb 12 '20 at 11:10
Does this answer your question? [var functionName = function() {} vs function functionName() {}](https://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname) — VLAZ, Feb 12 '20 at 11:11
Due to hoisting, functions hoisted at the top then the variables. This is where you get the issue...;) — Jai, Feb 12 '20 at 11:13
but to check the same thimg i tried a simple code i first created a fumction and call another function in that and again anoher function expression in that and that was for just a simple printing a number that works fine but this is not working — Kaptan Bhardwaj, Feb 12 '20 at 11:15

score 0 · Answer 1 · answered Feb 12 '20 at 11:13

You are executing the function servePassengers before createDrinkOrder declaration, createDrinkOrder do not exist when you call serverPassengers

try this

var passengers = [{
    name: "Jane Doloop",
    paid: true,
    ticket: "coach"
  },
  {
    name: "Dr. Evel",
    paid: true,
    ticket: "firstclass"
  },
  {
    name: "Sue Property",
    paid: false,
    ticket: "firstclass"
  },
  {
    name: "John Funcall",
    paid: true,
    ticket: "coach"
  }
];

function servePassengers(passengers) {
  for (var i = 0; i < passengers.length; i++) {
    serveCustomer(passengers[i]);
  }
}

var createDrinkOrder = function(passenger) {
  if (passenger.ticket === "firstclass") {
    document.write("Would you like a cocktail or wine?" + "<br>");
  } else {
    document.write("Your choice is cola or water." + "<br>");
  }
}

function serveCustomer(passenger) {
  createDrinkOrder(passenger);
  createDrinkOrder(passenger);
}

servePassengers(passengers);

score 0 · Accepted Answer · answered Feb 12 '20 at 11:28

When running your script the JavaScript interpreter jumbles some stuff around in your file. This is called hoisting. It literally means that parts of your script are hoisted to the top of the script. First come your function and variable declarations. Note that the variables have no assigned value on this point.

That leaves the top of your script looking like this: (This is what your browser is doing)

function servePassengers(passengers) {
  for (var i = 0; i < passengers.length; i++) {
    serveCustomer(passengers[i]);
  }
}

function serveCustomer(passenger) {
  createDrinkOrder(passenger);
  createDrinkOrder(passenger);
}

var passengers, createDrinkOrder;

The rest of your script, however, remains largely the same. Assignments and initializations stay in the same order. So, when reading from top to bottom, what happens is that first passengers gets assigned the array as value.

Then we go to the servePassengers initialization which in turn calls the createDrinkOrder through different callbacks. But createDrinkOrder does not have a value yet. That value is assigned after servePassengers is called.

// Passengers are assigned.
passengers = [{
    name: "Jane Doloop",
    paid: true,
    ticket: "coach"
  },
  {
    name: "Dr. Evel",
    paid: true,
    ticket: "firstclass"
  },
  {
    name: "Sue Property",
    paid: false,
    ticket: "firstclass"
  },
  {
    name: "John Funcall",
    paid: true,
    ticket: "coach"
  }
];

// servePassengers is called, but at this point, createDrinkOrder does not
// have an assigned value yet.
servePassengers(passengers);

// Only after servePassengers does createDrinkOrder have a value.
createDrinkOrder = function(passenger) {
  if (passenger.ticket === "firstclass") {
    document.write("Would you like a cocktail or wine?" + "<br>");
  } else {
    document.write("Your choice is cola or water." + "<br>");
  }
}

So you are calling a variable with a function as value which is not yet there. It is so important to pay attention to the order and know what is happening behind the scenes in your browser. For example: const and let are not hoisted and have to be in the correct order from top to bottom.

Below code works fine with function declaration but not with function expression

2 Answers2