# Can somebody help clear up function() for me?

**URL:** <https://forum.freecodecamp.org/t/can-somebody-help-clear-up-function-for-me/116778>\
**Category:** General\
**Tags:** help, function, javascript\
**Created:** [May 17, 2017, 4:52pm UTC](https://forum.freecodecamp.org/t/can-somebody-help-clear-up-function-for-me/116778 "2017-05-17T16:52:26Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![OmegaPointZero](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/omegapointzero/32/51571_2.png) [@OmegaPointZero](https://forum.freecodecamp.org/u/OmegaPointZero)\
**Post date:** [May 17, 2017, 4:52pm UTC](https://forum.freecodecamp.org/t/can-somebody-help-clear-up-function-for-me/116778/1 "2017-05-17T16:52:26Z")

</div>

I’m currently on the random quote machine and I’m having to use javascript for this page. I’ve blown through the algorithms just fine, but I’m not entirely sure how to use this with the page. When I see things in other people’s code like

```
    $(document).ready(function() {
  var getQuote = function(){

```

I’m not actually sure what function() itself does, or when to include things in the parenthesis, or how it interacts with the things in the parenthesis. Can anyone help clear this up for me?

---

<div class="post-metadata">

**Author:** ![Soupedenuit](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/soupedenuit/32/32478_2.png) [@Soupedenuit](https://forum.freecodecamp.org/u/Soupedenuit)\
**Post date:** [May 17, 2017, 4:58pm UTC](https://forum.freecodecamp.org/t/can-somebody-help-clear-up-function-for-me/116778/2 "2017-05-17T16:58:24Z")

</div>

This is the beginning of a jQuery function. Have you studied jQuery yet?  
You don’t need to use jQuery for your random quote machine. You can use it, but you don’t have to.

---

<div class="post-metadata">

**Author:** ![OmegaPointZero](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/omegapointzero/32/51571_2.png) [@OmegaPointZero](https://forum.freecodecamp.org/u/OmegaPointZero)\
**Post date:** [May 17, 2017, 5:06pm UTC](https://forum.freecodecamp.org/t/can-somebody-help-clear-up-function-for-me/116778/3 "2017-05-17T17:06:56Z")

</div>

I have gone through the jQuery part but I feel like they glossed over explaining this well. When I see something like

$(“button”).addClass(“animated bounce”);

It’s obvious and clear what it’s doing. But in looking at projects that use jQuery for this, I only understand about half the code I see.

---

<div class="post-metadata">

**Author:** ![anderamko](https://avatars.discourse-cdn.com/v4/letter/a/71e660/32.png) [@anderamko](https://forum.freecodecamp.org/u/anderamko)\
**Post date:** [May 17, 2017, 5:12pm UTC](https://forum.freecodecamp.org/t/can-somebody-help-clear-up-function-for-me/116778/4 "2017-05-17T17:12:28Z")

</div>

function() is a javascript keyword. Just like any other keywords like “var”, “using” or “return” it has number of syntax forms of definition.

Simple as only function can be defined:  
`
var MyOwnFunction = function() {
console.log(“Hello from MyOwnFunction”)
}
`

That’s simple definition of function. Once it is called as MyOwnFunction(), it will print out single console log statement “Hello from MyOwnFunction”. Those “things” in parenthesis are actual code which will be processed once the function is called.

What you have run into is anonymous or inline function definition. Let me extend MyOwnFunction a little bit.  
`
var MyOwnFunction = function() {
console.log(function() {
return “Hello from anonymous function”;
})
console.log(“Hello from MyOwnFunction”)
}
`  
The code itself is pure rubbish, but what it does is that instead of putting directly string in, I let process an anonymous function before there will be any string. Meaningless, although I hope you can better see into the things in parenthesis. Is it more clear now?

One very common usage you’ll be seeing a lot is called callback. Let’s leave that one for later.

---

<div class="post-metadata">

**Author:** ![psychometry](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/psychometry/32/79114_2.png) [@psychometry](https://forum.freecodecamp.org/u/psychometry)\
**Post date:** [May 17, 2017, 7:18pm UTC](https://forum.freecodecamp.org/t/can-somebody-help-clear-up-function-for-me/116778/5 "2017-05-17T19:18:14Z")

</div>

There are a few different things you could be asking.

you could be asking about anonymous functions, which is a function without a name like

```auto
function(){
///code
}

```

common usage is to use it as a callback, it’s a function you only need in a certain context, and therefore you only need t create it and use it when you need it. here’s an example in a non-async context

```auto
var arr=[1,2,3];
var sum=arr.reduce(function (acc,cur){
   return acc+cur;
});

```

Array.reduce is a function that reduces an array into a single value using an operation of your choosing. To decide what that operation should be, you need to give it a function that takes values from the array and do something with them, that’s all you need it for, so you can just define that function inline and use it right away, in this case it’s a function that adds the accumulator to the current element.

You could be asking about function expression, which is assigning a function to a variable

```auto
var foo=function(){
///code
}

```

you can read about the difference between function expressions and function statements [here](https://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/)

The common usage is also in a callback scenario which is a big thing in node.js, and really any sort of work that requires accessing an API.

---

<div class="post-metadata">

**Author:** ![IsaacAbrahamson](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/isaacabrahamson/32/30882_2.png) [@IsaacAbrahamson](https://forum.freecodecamp.org/u/IsaacAbrahamson)\
**Post date:** [May 17, 2017, 7:50pm UTC](https://forum.freecodecamp.org/t/can-somebody-help-clear-up-function-for-me/116778/6 "2017-05-17T19:50:47Z")

</div>

It has already been explained that it is a function called a callback. Let’s forget all the jargon and just approach the problem simply.

```javascript
$(document).ready( ... );

```

When the document is ready, the browser emits a ready event on the document object. This code is an event handler that let’s us do stuff when that event happens.

So, when the document is ready, what do we want to do? We want to run a function. So, let’s define that function:

```auto
function readyHandler() {
  console.log('Ready!');
}

```

Now how do we go about combining the document ready event handler with our function? Let’s approach this by pseudo-coding our own ready handler:

```auto
function documentReady(yourCode) {
  run yourCode;
}

```

We pass in `yourCode` into `documentReady()`, and `documentReady()` then runs your code. This is what jQuery does in your case. Now, let’s try it with the real code:

```auto
function readyHandler() {
  console.log('Ready!');
}

$(document).ready( readyHandler() );

```

or we can define it inline more simply:

```auto
$(document).ready( function readyHandler() {
  console.log('Ready!');
});

```

Let’s not over complicate things. When the document is ready, jQuery gives us an easy way to handle the event. We can pass in a function to jQuery, which will then be executed when the page is ready.

---

<div class="post-metadata">

**Author:** ![OmegaPointZero](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/omegapointzero/32/51571_2.png) [@OmegaPointZero](https://forum.freecodecamp.org/u/OmegaPointZero)\
**Post date:** [May 17, 2017, 11:57pm UTC](https://forum.freecodecamp.org/t/can-somebody-help-clear-up-function-for-me/116778/7 "2017-05-17T23:57:48Z")

</div>

Thank you! All of your guy’s answers have helped but this one has helped the most. I’m going to try and rubber duck a couple working examples until I understand everything enough to write it from scratch.

Again, thank you campers!

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:54pm UTC](https://forum.freecodecamp.org/t/can-somebody-help-clear-up-function-for-me/116778/8 "2021-01-17T20:54:41Z")

</div>

Closed on January 17, 2021, 8:54pm UTC