Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question javascript function parameters or variables or arguments -- are these three the same?

    Hi all,

    I'm really trying to understand the what is the difference between parameters/variables/args in javascript functions.

    for instance:

    Is writing the parameters/variables/args inside the parentheses of the function, i.e.:


    Code:
    function addCSSRule(sheet, selector, rules, index) {
    
    }
    the same as writing the function with the variables written inside the function body:

    Code:
    function addCSSRule() {
      var sheet; 
      var selector; 
      var rules;
      var index;
    
    }
    
    // Use it!
    addCSSRule(document.styleSheets[0], "header", "float: left");

    I've used the jQuery function to create jQuery objects by including the selector inside the parentheses as the function's arguments or parameters or variable i.e.:

    Code:
    $("div").css("color", "blue");

    and it seems very obvious to me what is going on and why the selectors are within the parentheses of these functions. However, when I need to create a function or if I am reading someone else's code where they are creating their own custom native javascript functions. I don't know why it is so hard for me to understand.

    I get very confused with the parameter/arguments /variables syntax.

    1. Are these three the same thing?

    If not,
    1. how are they different?
    2. Why are they used?
    3. When are they used?
    4. How do you know when to use them?




  • #2
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts
    * revision to #4

    4. How do you know when to use them, selecting one over the other?

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,611
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Code:
    function addCSSRule() {
      var sheet; 
      var selector; 
      var rules;
      var index;
    
    }
    
    // Use it!
    addCSSRule(document.styleSheets[0], "header", "float: left");
    this will not work because you are passing document.styleSheets[0], "header", "float: left" to the function but not reading it in the function.

    sheet, selector, rules and index are defined locally inside the function and don't exist outside.



    Code:
    function addCSSRule(sheet, selector, rules, index) {
    
    }
    This function gives names to four parameters that it expects to be passed when the function is called - these also exist inside the function but also exist outside the function (but not necessarily with the same names)


    You use parameters with a function when you want to pass information to the function that can be different each time the function is called. Variables defined inside the function are created when the function starts running and are deleted when that execution of the function funushes.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    gabrielleU (03-21-2014)

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Code:
    function calculateAverage(a, b, c) {
        var total = a + b + c;
        var average = total/3;
        alert(average);
    }
    
    calculateAverage(10, 20, 30);
    calculateAverage(40, 50, 60);
    calculateAverage(70, 80, 90);
    In the code above, a, b and c are parameters or arguments to the calculateAverage function. And total and average are local variables to the function. And the function is called 3 times with different set of parameters/arguments generating different results. Actually, a, b, c, total and average are all local variables. The difference is that for a, b, c variables, the default values are specified outside the function when that function is invoked with values passed to it.

  • Users who have thanked glenngv for this post:

    gabrielleU (03-21-2014)

  • #5
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts
    @felgall
    @glenngv,

    Thank you both for detailed answers including examples. I think I'm beginning to understand better, but still unsure of how to properly construct the variables. Please bear with me a bit longer.

    #1.
    There seems to be many ways to and assign properties/variables (or maybe I am just confusing them up) to the object. For instance, why would this code (in red) not work:

    function Person(name, bldg, status){

    this.name = name;
    this.bldg= bldg;
    this.status= status;

    var personDetails = name + " " + bldg + " " + status;

    this.getPersonDetails = function() {
    return personDetails;
    }

    var newPerson = new Person({
    name: "Gabrielle",
    bldg: "123 Paloma Vista",
    status: "active"

    });


    }

    console.log(newPerson.getPersonDetails());



    But this code (in green), would work:

    function Person(name, bldg, status){
    this.name = name;
    this.bldg= bldg;
    this.status= status;

    var personDetails = name + " " + bldg + " " + status;

    this.getPersonDetails = function() {
    return personDetails;
    }


    var newPerson = new Person("Gabrielle", "123 Paloma Vista", "active");

    }

    console.log(newPerson.getPersonDetails());



    #2.
    What is happening here:

    this.name = name;
    this.bldg= bldg;
    this.status= status;


    Is the above code redundant to the parameters/args passed to the Person function? //function Person(name, bldg, status)

    Thank you very much.

  • #6
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts
    * to and assign properties/variables

    should be:

    to assign properties/variables

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,611
    Thanks
    0
    Thanked 645 Times in 635 Posts
    The code in red is passing a single object to the function, the code in green is passing THREE strings to the function. The function expects three strings to be passed and not one object and so does not work if an object is passed instead of the three strings.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    gabrielleU (03-21-2014)

  • #8
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts
    @felgall,

    Thank you! That makes sense. Also, I clicked on the links in your signature and I am going through your tutorials for 'modern javascript'. Thank you for posting and all your help.



  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •