declaring a variable without returning a value .

Question

hey guys i am new to Jquery and JS in general and have a very simple question basically i came across a sorting script online and i tried to understand whats going on by going through the jquery documentation :

the script is as follows :

$(function () {
        var buttons = $('#fruit,#vegetable,#meat').click(function() {
            $(this).toggleClass('active');
            var classes = buttons.filter('.active').map(function() {
                return this.id;
            })
            .get().join(',.');
            $('div.fruit,div.vegetable,div.meat').hide().
                filter('.' + (classes || 'none')).show();               
                console.log(classes.get().join(',.'));
        });
    });

and this script is run on the following HTML :

<div style="float:right; padding:25px;">
            <button id="fruit" class="active"><span>fruit</span></button>
            <button id="vegetable" class="active">vegetable</button>
            <button id="meat" class="active">meat</button>
        </div>

        <div>
            <p>Trying to use buttons as an "or" case rather than "and." When choosing fuit or vegetable, I want to see tomato as part of each list, <em>not just</em> when both are selected.</p>  

        <div class="fruit">
            <p>apple</p>
        </div>

        <div class="vegetable">
            <p>pumpkin</p>
        </div>

        <div class="vegetable">
           <p>okra</p>
        </div>

        <div class="fruit">
            <p>orange</p>
        </div>

        <div class="meat">
            <p>beef</p>
        </div>    


        <div class="fruit vegetable">
            <p>tomato</p>
        </div>    

        </div>

fiddle here.

now i understand most part of the script except the following :

on line four of the script the author is using the following code :

                var classes = buttons.filter('.active').map(function() {

now button has not been returned any value , so should't it be empty ??

or is it that by saying the following (on line one):

            var buttons = $('#fruit,#vegetable,#meat').click(function() {

the author has also defined the button implicitly , as in :

var buttons = $('#fruit,#vegetable,#meat')

can somebody clarify this for me , as i am struggling to grasp this simple concept .

Thank you.

Alex-Z.

Answer 1

It's an unusual pattern, but buttons is indeed declared correctly (and explicitly`) in the statement reading:

var buttons = $(...).click(...);

By the time any click event ever happens the above code will have executed (since JS is single-threaded) and buttons will already contain the desired set of elements and can be safely used within the callback.

This also of course relies on the way that many jQuery methods "chain" - they return the same object as the one on which they were called, so the net result is that buttons does just contain $('#fruit,#vegetable,#meat')