FAQ: Higher-Order Functions - Functions as Data

I have question of using the name property: How “deep” does the name property look? Will it go back all the way to the root?

Let me explain: Assuming I have nested a function within a function within a function like so:

const nestingLevel3 = () => {
   console.log('I am the root function!');
};

const nestingLevel2 = constNestingLevel3
const nestingLevel1 = constNestingLevel2

Would

console.log(nestingLevel1.name)

return nestingLevel3 ???

Easy enough to test, right?

I am having issues understanding how to utilize this for anything else later. I have searched around for examples of other small projects to try to wrap my brain around how this is useful, but this is the first topic they have covered where I cant even brain storm up my own idea on how to use it. There are not even really any tutorials on YouTube or anything. Unless you were doing some calculus here, I just don’t get it.

I’m currently going through the functions as data prompt and on the third prompt I’m running into a question. I use the code, console.log(is2p2.name()) and get the correct answer, i.e the checkmark appears next to the question, BUT the console reads TypeError: is2p2.name is not a function. Is this just a poor question or am I missing something here? How would I actually access the name of this function since the correct answer via the prompt does not do it?

.name is not a method, it’s a property:

console.log(is2p2.name)

Hello Everyone! So my confusion with Higher-Order Functions has to do with this part of the lecture:

" When we pass a function in as an argument to another function, we don’t invoke it. Invoking the function would evaluate to the return value of that function call. With callbacks, we pass in the function itself by typing the function name without the parentheses (that would evaluate to the result of calling the function):"

I understand the ‘we don’t invoke it’ part, because we write the functions as arguments without the parentheses. But with the rest, I do not understand the difference between ‘the function evaluating with parentheses to the return value of that function call’ VS ‘the function evaluating to the result of calling the function without parentheses’ - I mean, isn’t the function returning the same value? They are supposed to return the same thing unless we modify the function from the code body of the function, no?

If anybody can explain this part, I would be grateful - Thank you!

When passing a function as a reference we’re merely handing in the location of the function in memory. The higher order function will invoke it as needed to complete its operation(s).

const addAB = (a, b) => a + b;

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

let sumOfArray = array.reduce(addAB)
                              ^^^^^
                                 \
                          function reference
                              as callback

The function will be invoked nine times by the .reduce() method.

in documentary:

instance property: there is
[ Function.prototype.name ]

when we use the property, it only needs to call “function.name” and my question is where is the prototype in the middle? shouldnt be function.prototype.name?

Array.prototype.sort()

The sort method is in the prototype chain of every Array object.

array.sort()

Hi, I’m curious as to the practical use for reassigning a function to a new variable. I saw earlier it was mentioned that it’s useful to have a descriptive function name, so I can see how this might help when working with the same function later - but are there any other uses for this?

Or is the point of the exercise more to show how functions are passed by reference?

I definitely enjoyed the “I’m doing very important work!” message and the idea of checking 2+2=4 a million times, one of the most entertaining exercises so far :smiley:

Functions in JavaScript are first class objects which is why they can be assigned to a variable or passed into another function as an argument. In a one-off case, we might write the argument directly into the call and be done with it. However, in many cases the same function may be used in other arguments as well. That is a case for assignment to a global variable. Now only the reference needs to be passed in as an argument.

const addAB = function (a, b) {
    return a + b;
}
const mulAB = function (a, b) {
    return a * b;
}

Now say we have a function that accepts a function and two values…

const opAB = function (fn, a, b) {
    return fn(a, b)
}
// and the call
let y = opAB(addAB, 20, 22)
console.log(y)    //  42

let z = opAB(mulAB, 6, 7)
console.log(z)    //  42
1 Like

Great, thanks! So because they’re first class objects they’re very flexible - those examples help to show a little better how it’s useful to use them inside higher-order functions, beyond simply reassigning the name. Think I’m getting my head around callbacks now.

1 Like

The CC team knows about it from this bug report: [REPORTED] Bug with given and expected variable name

Quick question, for step 3, it asks:

Hmmm, if we forgot the original name of our function. Is there a way we could figure it out?

To which I have the following code:

const checkThatTwoPlusTwoEqualsFourAMillionTimes = () => { for(let i = 1; i <= 1000000; i++) { if ( (2 + 2) != 4) { console.log('Something has gone very wrong :( '); } } }; // Write your code below const isTwoPlusTwo = checkThatTwoPlusTwoEqualsFourAMillionTimes isTwoPlusTwo(); console.log(isTwoPlusTwo);

Which also prints the original name of the function, just in a different way than using the .name property. Is there any reason why this would be wrong to do it this way, or is the lesson just trying to get us used to understanding what the .name property does?

In the solution code the if statement is if ( (2 + 2) != 4) {
console.log('Something has gone very wrong :frowning: ');
} but it does not print out the console message. it will only print out the function name request

The only time the console message prints out is when i use the code if ( ( i+ i ) != 4) {
console.log('Something has gone very wrong :frowning: ');
}
This will print out the message the designated number of times listed in the for loop statement. Which way is correct. To me make sense after going through the for loop ( i ) is passed in as the value to be compared to 4. Can someone give some insight. Thanks

The goal is not to to print out the error message a million times. The error message is only supposed to be printed if somehow due to some bug or erroneous calculation, 2 + 2 ends up being something other than 4. If we get through a million iterations of the loop without the error message being triggered, then it means 2 + 2 equaled 4 every time exactly.
If the condition is amended to if ((i + i) != 4), then when i is 2, the message will not print. For all other values of i, the message will print. But, the goal isn’t to print the message a million times.

I got stuck trying to understand this part

const isTwoPlusTwo = checkThatTwoPlusTwoEqualsFourAMillionTimes ; isTwoPlusTwo()

can someone explain to me why you have to use a semi colon after checkThatTwoPlusTwoEqualsFourAMillionTimes is wrote down

If you write the two statements on separate lines, then ; is not mandatory in JavaScript (however it is better to include the semi-colon).

// Without semi-colons. Separate lines.
const isTwoPlusTwo = checkThatTwoPlusTwoEqualsFourAMillionTimes 
isTwoPlusTwo()

// With semi-colons. Separate lines.
const isTwoPlusTwo = checkThatTwoPlusTwoEqualsFourAMillionTimes; 
isTwoPlusTwo();

If you choose to write both statements on the same line, then it is necessary to use semi-colon to seprate the statements:

// Same Line
const isTwoPlusTwo = checkThatTwoPlusTwoEqualsFourAMillionTimes; isTwoPlusTwo()
// or 
const isTwoPlusTwo = checkThatTwoPlusTwoEqualsFourAMillionTimes; isTwoPlusTwo();

// Same Line without semi-colon. Error: INVALID SYNTAX
const isTwoPlusTwo = checkThatTwoPlusTwoEqualsFourAMillionTimes  isTwoPlusTwo()

From the documentation,

A semicolon is not necessary after a statement if it is written on its own line. But if more than one statement on a line is desired, then they must be separated by semicolons.

It is considered best practice, however, to always write a semicolon after a statement, even when it is not strictly needed. This practice reduces the chances of bugs getting into the code.

Wow! Thanks so much. I got really stuck trying to understand this but I’m glad someone actually responded. I see why it isn’t mandatory to use a semi colon now. So we use a semi colon to separate two different pieces of code on the same line, I never knew that before because I thought semi colons were just used to make your code look clean and format. Thanks!

1 Like

I thought this function is anonymous, why would it have a name?