“component1.toLowerCase is not a function” + trouble understanding higher-order functions :/

Question

I've recently started out learning javascript and I'm having trouble understanding higher-order functions and callback functions.

So i tried to make some code in which I would need to use them or where they would be efficient in, but I just can't seem to figure it out.

const iceCreamFlavors = ["Strawberry", "Chocolate", "Vanilla", "Caramel"];

const giveIceCream = (mixedFlavors) => {
  console.log(`Here you go, I've made a ${mixedFlavors()} icecream for you.`);
}

const mixStuff = (component1, component2) => component1.toLowerCase() + " and " + component2.toLowerCase();

const randomChoice = () => iceCreamFlavors[Math.floor(Math.random()*iceCreamFlavors.length())];

giveIceCream(mixStuff(randomChoice, randomChoice));

The result should be "Here you go, I've made a ${mixedFlavors()} icecream for you." Where the mixed flavors would be two random flavors from the array, but I'm getting an error that component1 is not a function, so I'm kind of confused...

EDIT:

const giveIceCream = mixedFlavors => console.log(`Here you go, I've made a ${mixedFlavors} icecream for you.`);

const mixStuff = (component1, component2) => component1().toLowerCase() + " and " + component2().toLowerCase();

const randomChoice = () => iceCreamFlavors[Math.floor(Math.random()*iceCreamFlavors.length)];

giveIceCream(mixStuff(randomChoice, randomChoice));

I've fixed it to what I had wanted to do, thanks everyone ^^

Answer 1

Please check the code. I have mentioned the mistakes and improvements here.

const iceCreamFlavors = ["Strawberry", "Chocolate", "Vanilla", "Caramel"];

const giveIceCream = (mixedFlavors) => {
    console.log(`Here you go, I've made a ${mixedFlavors} icecream for you.`);
}

const mixStuff = (component1, component2) => {
    return component1.toLowerCase() + " and " + component2.toLowerCase();
}

/**
 * Get random number between length of array and 0
 */
const randomChoice = () => {
    // Return the random element from array
    return iceCreamFlavors[Math.floor(Math.random() * (iceCreamFlavors.length)) + 0];
}

/**
 * 1. While calling the function: mixStuff, you missed to pass two parameters. Instead you
 * passed only one, that too as a variable. You cannot pass a function as a variable. You
 * have to pass a function with paranthesis
 * 
 * 2. You did not use any return keyword in function, so the value was never returned from function,
 * It returned undefined, and thus undefined.toLowerCase() is not a function because it is not a string.
 * 
 * 3. In giveIceCream function, in order to use the ${mixedFlavors()}, you have to use ` and not ' for console.log.
 * Also mixedFlavors is a parameter, so you need not put any () to print that.
 * Please watch the code carefully.
 * 
 * 4. Array length is not a function. It is a value. so you can use it directly. 
 * Array.length is correct. Array.length() is wrong.
 * 
 * Thanks and happy coding :)
 */

giveIceCream(mixStuff(randomChoice(), randomChoice()));