Can somebody help clear up function() for me?

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?

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.

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.

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.

2 Likes

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

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

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

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

you can read about the difference between function expressions and function statements here

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.

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.

$(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:

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:

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:

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

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

or we can define it inline more simply:

$(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.

1 Like

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!

1 Like