Javascript namespace - exchange of variable between functions

Question

I know I am doing something egregiously wrong in using the namespaces. I am posting this question after researching a ton in the net / google searches. Still can’t find what I am doing wrong. Can you please help me out? This is what I have

Javascript

Javascript file1

(function (js_namspace1, $, undefined) {
    js_namespace1.n1function1 = function(){

      var return_obj = {
         return_function_to_call: “n1function_name2”
         return_function_to_call_namespace: “js_namespace1”
       }
      js_namespace2.n2function1(return_obj)
    }
    Js_namespace1.n1function_name2 =function(list_of_names){
        Js_namespace1.list_of_names = list_of_names
        // do some processing to js_namespace1. list_of_names
    }
}
(window. js_namspace1 = window. js_namspace1|| {}, jQuery ));

Javascript file2

(function (js_namspace2, $, undefined) {
    js_namespace2.n2function1(return_obj) = function(return_obj){
    js_namespace2.return_function_to_call =     return_obj.return_function_to_call
    js_namespace2.return_function_to_call_namespace = return_obj.  .return_function_to_call_namespace

    // do some processing
    Js_namespace2.list_of_names = []
    Js_namespace2. list_of_names.push(value_name)
    window[js_namespace2.return_function_to_call_namespace][js_namespace2.return_function_to_call]( Js_namespace2.list_of_names);
  }
}
(window. js_namspace2 = window. js_namspace2|| {}, jQuery ));

Html

From html file1 call js_namespace1.n1function1 based on end user clicking a field

// js_namespace1.n1function1 calls js_namespace2.n2function1 and displays another html file2

// In html file2 process the data (collect value of names) and then call the return function Js_namespace1.n1function_name2

In Js_namespace1.n1function_name2, process Js_namespace1.list_of_names(array), but when I do this, it also changes in Js_namespace2.list_of_names

For example when I do Js_namespace1.n1function_name2.push(add_another_name), and then call js_namespace1.n1function1 (which in turn calls js_namespace2.n2function1). Js_namespace2.list_of_names contains the value of add_another_name.

Please note that when js_namespace2.n2function1 is called from js_namespace1.n1function1 the array is not passed as parameter.

My expectation was when js_namespace1.n1function1 calls js_namespace2.n2function1 it would not update Js_namespace2.list_of_names with the add_another_name.

Can you please explain what is happening? most importantly point out any mistakes that I should be avoiding in this design (namespace, exchange of parameters between function calls). Am I using the namespace correctly in javascript – any best practices to recommend?

First thing to do is check your developer console. You've got lots of typos in your code (`Var` instead of `var` etc). — Pointy, Oct 17 '15 at 14:47
Please write your code in an editor, not a word processor. Spelling and casing matters in programming. Use `"…"` not `“…”`, use `js_namespace…` not `Js_namespace…`. Also some indentation would help readability a lot. — Bergi, Oct 17 '15 at 15:59
See also [Copying array by value in JavaScript](http://stackoverflow.com/q/7486085/1048572) for a solution of your problem. — Bergi, Oct 17 '15 at 16:02

show-me-the-code · Answer 1 · 2015-10-17T16:05:48.643

Here's a link from a quick Google search on best practices for JS. There are different schools of thought out there (eg. use of terminating semicolons), but use of a some kind of linter might help you figure out typos, case sensitivity, and unintended whitespace in the code if you can't notice for yourself. Below is your code with some fixes:

(function (js_namespace1, $, undefined) {

    js_namespace1.n1function1 = function(){

      var return_obj = {
         return_function_to_call: "n1function_name2",
         return_function_to_call_namespace: "js_namespace1"
       };
      js_namespace2.n2function1(return_obj)
    };
    js_namespace1.n1function_name2 =function(list_of_names){
        js_namespace1.list_of_names = list_of_names;
        console.log(js_namespace1.list_of_names); // ["some_name"]
    };
}
(js_namespace1 = window.js_namespace1 || {}, jQuery));

(function (js_namespace2, $, undefined) {
    js_namespace2.n2function1 = function(return_obj){
    js_namespace2.return_function_to_call =  return_obj.return_function_to_call;
    js_namespace2.return_function_to_call_namespace = return_obj.return_function_to_call_namespace;

    // do some processing
    js_namespace2.list_of_names = [];
    js_namespace2.list_of_names.push("some_name");
    window[js_namespace2.return_function_to_call_namespace][js_namespace2.return_function_to_call]( js_namespace2.list_of_names);
  };
}
(js_namespace2 = window.js_namespace2 || {}, jQuery));
js_namespace1.n1function1();

Some points about your code and my fixes:

You used case sensitive names like js_namespace2 for Js_namespace2.
Your syntax here is incorrect js_namespace2.n2function1(return_obj) = function(return_obj).
And here: return_obj. .return_function_to_call_namespace and others.
value_name is not defined

I tested the code here and see expected behavior.

Javascript namespace - exchange of variable between functions

1 Answers1