I'm learning how to return functions from other functions in JavaScript. Here is my code that works:
var passengers = [
{ name: "Jane", ticket: "coach" },
{ name: "Evel", ticket: "firstclass" },
{ name: "John", ticket: "coach" },
{ name: "Bob", ticket: "premium"}
];
function createDrinkOrder(passenger) {
var orderFunction;
if (passenger.ticket === 'firstclass') {
orderFunction = function() {
console.log(passenger.name + ', would you like wine or cocktail?');
};
} else if (passenger.ticket === 'premium') {
orderFunction = function() {
console.log(passenger.name + ', would you like some wine?');
};
} else {
orderFunction = function() {
console.log(passenger.name + ', soda or water?');
};
}
return orderFunction;
}
function serveOnePassenger(passenger) {
var getDrinkOrderFunction = createDrinkOrder(passenger);
getDrinkOrderFunction();
// createDrinkOrder(passenger);
}
// General function to serve passengers:
function servePassengers(passengers) {
for (var i = 0; i < passengers.length; i++) {
serveOnePassenger(passengers[i]);
}
}
servePassengers(passengers);
I'm learning how to return functions from other functions in JavaScript. Here is my code that works:
var passengers = [
{ name: "Jane", ticket: "coach" },
{ name: "Evel", ticket: "firstclass" },
{ name: "John", ticket: "coach" },
{ name: "Bob", ticket: "premium"}
];
function createDrinkOrder(passenger) {
var orderFunction;
if (passenger.ticket === 'firstclass') {
orderFunction = function() {
console.log(passenger.name + ', would you like wine or cocktail?');
};
} else if (passenger.ticket === 'premium') {
orderFunction = function() {
console.log(passenger.name + ', would you like some wine?');
};
} else {
orderFunction = function() {
console.log(passenger.name + ', soda or water?');
};
}
return orderFunction;
}
function serveOnePassenger(passenger) {
var getDrinkOrderFunction = createDrinkOrder(passenger);
getDrinkOrderFunction();
// createDrinkOrder(passenger);
}
// General function to serve passengers:
function servePassengers(passengers) {
for (var i = 0; i < passengers.length; i++) {
serveOnePassenger(passengers[i]);
}
}
servePassengers(passengers);
My question is about 'serverOnePassenger' function: when I ment out the first 2 lines in this function and unment the 3rd line instead, nothing happens in the console anymore. Why do I have to declare a variable and then assign a function to it, and only then call this var in order for this code to work? Thanks!
Share Improve this question asked Dec 21, 2016 at 21:23 Maria BlairMaria Blair 3191 gold badge3 silver badges9 bronze badges 2-
1
Your third line is returning a function, you're just not executing it. Try
createDrinkOrder(passenger)()
. – Shawn Erquhart Commented Dec 21, 2016 at 21:25 - The function you're trying to call doesn't exist till you execute the function that creates it – Honinbo Shusaku Commented Dec 21, 2016 at 21:26
5 Answers
Reset to default 5You must call both createDrinkOrder
and the function that it created, try this
(createDrinkOrder(passenger))();
Let's go through this step by step
createDrinkOrder(passenger)
callscreateDrinkOrder
which returns an anonymous function(...)()
calls that anonymous function
Absolutely - because you only get back the function - you never actually call it... Try this instead:
createDrinkOrder(passenger)();
Hope this helps!
Your own question title is basically the answer: you've written the createDrinkOrder()
function as something that returns another function. If you make a function but never call it, the function won't do anything.
You don't need a variable involved as in your serveOnePassenger()
function. You could create the function and call it with one statement:
createDrinkOrder(passenger)();
That calls createDrinkOrder()
and then immediately uses the returned value as a function.
You don't. Your problem is that the function you call returns another function, but the function that actually logs the text isn't called. If you call the returned function like this: createDrinkOrder(passenger)()
, it will call both functions.
var passengers = [
{ name: "Jane", ticket: "coach" },
{ name: "Evel", ticket: "firstclass" },
{ name: "John", ticket: "coach" },
{ name: "Bob", ticket: "premium"}
];
function createDrinkOrder(passenger) {
var orderFunction;
if (passenger.ticket === 'firstclass') {
orderFunction = function() {
console.log(passenger.name + ', would you like wine or cocktail?');
};
} else if (passenger.ticket === 'premium') {
orderFunction = function() {
console.log(passenger.name + ', would you like some wine?');
};
} else {
orderFunction = function() {
console.log(passenger.name + ', soda or water?');
};
}
return orderFunction;
}
function serveOnePassenger(passenger) {
// var getDrinkOrderFunction = createDrinkOrder(passenger); // Because this returns an anonymous function
// getDrinkOrderFunction(); // It must be executed to have the expected result
createDrinkOrder(passenger)(); // This line both returns the function, and executes it.
}
// General function to serve passengers:
function servePassengers(passengers) {
for (var i = 0; i < passengers.length; i++) {
serveOnePassenger(passengers[i]);
}
}
servePassengers(passengers);
createDrinkOrder
is returning a function object. The third line of code calls createDrinkOrder
which returns a function, but never calls the returned function. You don't necessarily need assign the value returned by createDrinkOrder
to a variable, but you do need to make sure that the function it returns gets called. You could do it like this without using a variable: createDrinkOrder(passenger)();