Should I declare more functions or pass switch arguments to one function in JavaScript?
<p>My question involves the performance gain or loss when declaring and using functions with JavaScript. Suppose I have a function, <code>foo()</code>, defined as such:</p>

<pre><code>function foo(arg1) {
    //a simple CSS change, such as changing background color
}
</code></pre>

<p>Where <code>arg1</code> is a String used to identify an HTML element. <code>foo()</code> is triggered on a mouseover event.  The CSS change happens using jQuery, but I don't think that's important to my question. I would like to revert the CSS property back to default on a mouseout event. Would there be performance advantages of declaring another function, <code>foo2()</code>, such as:</p>

<pre><code>function foo2(arg1) {
    //undo the CSS change
}
</code></pre>

<p>Or would it be better to redefine <code>foo()</code> as follows, using a second argument as a switch:</p>

<pre><code>function foo(arg1,arg2) {
    if(arg2 == 'change') {
        //make the CSS change for arg1
    }else if(arg2 == 'revert') {
        //revert the change for arg1
    }
}
</code></pre>

<p>I am not concerned with the load time of the page. My goal is to minimize my amount of code, but without hampering the speed of the CSS change.</p>

<p><strong>EDIT</strong>: <code>arg1</code> will not strictly refer to one element. It can be used to identify a set of elements, such as a class name shared by <code>&lt;td&gt;</code>'s in a column. This is why the <code>:hover</code> CSS selector will not do what I need to do.</p>

<p><strong>EDIT</strong>: Again, for clarity, suppose I have a set of elements containing the class <code>arg1</code>. I want ALL of the elements to experience the CSS change even when only ONE of the elements with that class name triggers the event.</p>
