Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript and the DOM (Retiring) Responding to User Interaction Functions as Parameters

nishnash
nishnash
6,267 Points

Can somebody help clarify/simplify Functions within Functions

Hi,

I'm having a hard time understanding what just happened in this video with functions.

Can somebody simplify/explain this process to me. Its started at the 3:20 mark between lines 3 to 6...

Thanks :)

3 Answers

Steven Parker
Steven Parker
210,474 Points

:point_right: Functions in JavaScript are "first-class objects".

That means that like any other object they can be passed as arguments, returned as values, contain methods and properties, and be stored in variables. The only thing special about a function is that it contains a "code body" that can be invoked or called to cause the code to execute.

In the video, a function definition is moved into the parameter list of another function being called, which causes it to be defined and passed as an argument all at once. Then, since the function it is being passed to already has a parameter name to identify it with, the name given during the definition can be omitted. As mentioned in the video, this is a common practice known as an "anonymous function".

The change might seem a bit more mysterious since in the video the definition style is also changed from conventional to "arrow" syntax. That part of the change has nothing to do with functionality, it only makes the definition a bit more compact.

I can't, but I can't wait to see what someone else says.

/*  I would not call this a simple explaination
 or even an explaination
 I just went through and commented
 what I thought everything was doing */

/* this is one way of doing this*/
/* write a fn with a parameter*/

function say(somethin) { 
    console.log(something)
}
/*call the fn, pass in an argument*/
say("Hello");

/*...................................................................*/

/* this is another way */

function exec(func, arg) { /* I'm thinking that exec is a built in fn ecma6?*/
    func(arg);
}
/* exec is called here, the say fn is passed in as the first param*/
/* the second param is the string that say will print to theconsole*/
exec(say, "Hi, there");

/*.....................................................................*/

/* pass a fn into another fn*/
/* here, an entire fn is passed in*/
exec(function say(somethin) { 
    console.log(something)
}, "Hi, there") /* the string argument is passed in at the end*/

/*.....................................................................*/

/* make it an anonymous fn*/
/* it looks like this fn calls itself*/
/* it's anonymous because it is not named*/

exec((somethin) => { /*2: here*/
    console.log(something) /* prited to the console here*/
}, "Hi, there") /* 1: this string is passed*/

Thank you John for explaining steps by steps

nishnash
nishnash
6,267 Points

@john, @steven,

Thanks for your help with clarifying this for me.

@ steven, that helped, I think i just need to be able to practice more to understand the cocnept. Right now i understand the logic behind it but still find myself stumbling on this topic. Will youtube some videos on "anonymous function" to get a better grasp of it :)