How can change this Javascript to not use global variables?

Question

I'm having some trouble working out how to control program flow and not use global variables with the Javascript in my web app. In this example, when get_notes() is called, the ids of the received notes are stored in the current_note_ids array. When add_to_discussion() is called, current_note_ids is sent as a parameter to the server request. How can I do this without having current_note_ids as a global variable?

<script type="text/javascript">
    var current_note_ids = [];

    function add_to_discussion(){
        $.post('/add_to_discussion',{current_note_ids:current_note_ids});
    }

    function get_notes(){
        $.post('/get_note_combination',{}, function(data) {            
            current_note_ids = []; // clear existing note details
            for (i in data.notes) {
                current_note_ids.push(data.notes[i].guid);
            }
        }
    }

    $(document).ready(function() {

        $('#add_to_discussion_button').click(function(){
            add_to_discussion();
            return false;
        });

        $('#get_notes_link').click(function(){
            get_notes();
            return false;
        });

    });

</script>

I guess you could pass the array as an argument in every one of your functions. — fireshadow52
– fireshadow52, Commented Aug 20, 2011 at 1:27

Joe · Accepted Answer · 2011-08-20 01:29:00Z

4

This removes all that code from the global scope using a closure

(function () {

    var current_note_ids = [];

    function add_to_discussion(){
        $.post('/add_to_discussion',{current_note_ids:current_note_ids});
    }

    function get_notes(){
        $.post('/get_note_combination',{}, function(data) {            
            current_note_ids = []; // clear existing note details
            for (i in data.notes) {
                current_note_ids.push(data.notes[i].guid);
            }
        }
    }

    $(document).ready(function() {

        $('#add_to_discussion_button').click(function(){
            add_to_discussion();
            return false;
        });

        $('#get_notes_link').click(function(){
            get_notes();
            return false;
        });

    });

})();

answered Aug 20, 2011 at 1:29

Joe

82.8k18 gold badges130 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

William Niu · Accepted Answer · 2011-08-23 02:02:23Z

You can use anonymous function to make it OO-like. In this case, you can choose what to "expose".

var notes = $(function() {
    var current_note_ids = [];

    function add_to_discussion() {
        $.post('/add_to_discussion', {
            current_note_ids: current_note_ids
        });
    }

    function get_notes() {
        $.post('/get_note_combination', {}, function(data) {
            current_note_ids = []; // clear existing note details
            for (i in data.notes) {
                current_note_ids.push(data.notes[i].guid);
            }
        })
    }
    return {
        add_to_discussion: add_to_discussion,
        get_notes: get_notes
    };
})();

$(document).ready(function() {

    $('#add_to_discussion_button').click(function() {
        notes.add_to_discussion();
        return false;
    });

    $('#get_notes_link').click(function() {
        notes.get_notes();
        return false;
    });

});

Collectives™ on Stack Overflow

How can change this Javascript to not use global variables?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related