Should I use unnamed or named functions?

Question

I am using jQuery 1.7.2

I have two ways of writing the same code. One way seems more verbose and the other seems more flexible. Is this the only difference? Is there any performance difference? Is there a better way of writing these?

Code sample #1 uses two named functions so they are reusable. It's a bit more code.

Code sample #2 uses two unnamed functions that work only on the hover method. It's less code but not reusable.

Any thoughts or comments?

//  CODE SAMPLE #1

// IPP FUNCTIONS    
var openIPP = function openIPP() {
    $IPPNonDefault.stop().animate({"height": OpenHeight}, DownRate);
}
var closeIPP = function closeIPP() {
    $IPPNonDefault.stop().animate({"height": "0px"}, UpRate);   
}

// IPP ACTIONS
$IPPWrapper.mouseover(openIPP).mouseout(closeIPP);

//  CODE SAMPLE #2

$IPPWrapper.hover(
    function() {
        $IPPNonDefault.stop().animate({"height": OpenHeight}, DownRate);
    },
    function() {
        $IPPNonDefault.stop().animate({"height": "0px"}, UpRate);
    }
);

Answer 1

So this is redundant.

var openIPP = function openIPP() {
    $IPPNonDefault.stop().animate({"height": OpenHeight}, DownRate);
}

Because both of these functions are the same.

var openIPP = function() {
    $IPPNonDefault.stop().animate({"height": OpenHeight}, DownRate);
}
function openIPP() {
    $IPPNonDefault.stop().animate({"height": OpenHeight}, DownRate);
}

This is the easiest for me to read.

$IPPWrapper.hover(
    function() {
        $IPPNonDefault.stop().animate({"height": OpenHeight}, DownRate);
    },
    function() {
        $IPPNonDefault.stop().animate({"height": "0px"}, UpRate);
    }
);

But if you want more information in case a bug is thrown then use named functions like so.

$IPPWrapper.hover(
    function openIPP() {
        $IPPNonDefault.stop().animate({"height": OpenHeight}, DownRate);
    },
    function closeIPP() {
        $IPPNonDefault.stop().animate({"height": "0px"}, UpRate);
    }
);

Answer 2

Generally speaking, anonymous (unnamed) functions are completely acceptable within the land of Javascript. They are used frequently and without prejudice, so don't be afraid of them.

That said, I'm not a fan of the second code sample. Without an understanding of the jQuery API, I don't really know what the two functions do to the hover call. Are both called, one after another? Perhaps something else happens? The name hover doesn't really give any clues here.

I think a great option here would be to combine the two samples. Use the anonymous functions of the second with the explicit naming of the first. Furthermore, it should be noted that according to the docs, hover is shorthand for mouseenter and mouseleave, not mousein and mouseout. I'll let you read over the docs and decide which of the two you decide to go with, but ultimately I recommend going with something like this:

$IPPWrapper.mouseenter(function() {
    $IPPNonDefault.stop().animate({"height": OpenHeight}, DownRate);
}).mouseleave(function() {
    $IPPNonDefault.stop().animate({"height": "0px"}, UpRate);
});