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 5 of 5
  1. #1
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    38
    Thanked 505 Times in 499 Posts

    Question Scaling with map() function

    I'm trying to understand the properties of the map() function.

    So far I've figured how to do some simple actions.
    Code:
    <html>
    <head>
    <title>JavaScript Array MAP Methods</title>
    <style type="text/css">
     body { font-family:monospace; }
    </style>
    </head>
    <body>
    <script type="text/javascript">
    // Ideas from: http://www.codingforums.com/showthread.php?t=276006
    
    function createSequence(n) { return Object.keys(Object(Array(n)+"r")).map(Number); }
    function sqr(n) { return  n * n; }
    function incrementSequence(n) { n = n + 1; return n; }
    function limitPrecision(n) { return n.toFixed(3); }
    function scaleFactor(n,sf) { return (n * sf); }
    
    var numbers = [1, 4, 9, 16, 25, 36, 49];
    var roots = numbers.map(Math.sqrt);
    document.write('Sequence is: '+numbers+'<br>&nbsp;roots are : ' + roots ); 
    
        numbers = createSequence(10);
    var squares = numbers.map(sqr);
    document.write('<p>Sequence is : '+numbers+"<br>squares are : " + squares ); 
    
    var NUMBERS = numbers.map(incrementSequence);
    document.write('<p>&nbsp;&nbsp;&nbsp;Sequence is : '+numbers+"<br>increments are : " + NUMBERS ); 
    
        roots = NUMBERS.map(Math.sqrt);
    document.write('<p>Sequence is: '+NUMBERS);
    var Roots = roots.map(limitPrecision);
    document.write('<br>&nbsp;roots are : ' + Roots.join(', ') ); 
    
    </script>
    </body>
    </html>
    So my question becomes, can I pass more than one parameter to the map()?
    See the function below. While I get no syntax errors, it does not work when I try to scale each element in the array by a factor of 0.5
    Code:
        numbers = createSequence(10);
    var scaled = numbers.map(scaleFactor,0.5);
    document.write('<p>Sequence is : '+numbers+"<br>&nbsp;scaled  are : " + scaled );
    Is the secret to creating a scaled array to define another map() function passing only the scale factor?
    Are multiple parameters not allowed in the map() function?

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    [].map accepts one extra argument, this :
    Code:
    [1,2,3,4,5].map(function scaleFactor(n, arrayIndex, wholeArray){ return n * this;}, 0.5)
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    38
    Thanked 505 Times in 499 Posts

    Question

    Quote Originally Posted by rnd me View Post
    [].map accepts one extra argument, this :
    Code:
    [1,2,3,4,5].map(function scaleFactor(n, arrayIndex, wholeArray){ return n * this;}, 0.5)
    That works great.
    In my effort to understand what it is doing and how it works,
    I tried to make it a stand-alone function call like the others.

    The following is my futile attempt.
    Is there a way to call it like the highlighted in red line (commented out to make example work).

    Also, if possible, could you expand on the explanation of how your function above works with the extra paramters that I don't see predefined?

    Code:
    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <head>
    <title>JavaScript Array MAP Methods</title>
    <style type="text/css">
     body { font-family:monospace; }
    </style>
    </head>
    <body>
    <div id="divArea"></div>
    
    <script type="text/javascript">
    // Ideas from: http://www.codingforums.com/showthread.php?t=276006
    
    function createSequence(n) { return Object.keys(Object(Array(n)+"r")).map(Number); }
    function sqr(n) { return  n * n; }
    function incrementSequence(n) { n = n + 1; return n; }
    function limitPrecision(n) { return n.toFixed(3); }
    
    var str = '';
    
    var numbers = [1, 4, 9, 16, 25, 36, 49];
    var roots = numbers.map(Math.sqrt);
    str = 'Sequence is: '+numbers+'<br>&nbsp;roots are : ' + roots; 
    str += '<hr>';
    
        numbers = createSequence(10);
    var squares = numbers.map(sqr);
    str += '<p>Sequence is : '+numbers+"<br>squares are : " + squares; 
    str += '<hr>';
    
    var NUMBERS = numbers.map(incrementSequence);
    str += '<p>&nbsp;&nbsp;&nbsp;Sequence is : '+numbers+"<br>increments are : " + NUMBERS; 
    str += '<hr>';
    
        roots = NUMBERS.map(Math.sqrt);
    str += '<p>Sequence is: '+NUMBERS;
    var Roots = roots.map(limitPrecision);
    str += '<br>&nbsp;roots are : ' + Roots.join(', '); 
    str += '<hr>';
    
    /* */
    // function scaleFactor(n, arrayIndex, wholeArray){ return n * this;};
        numbers = createSequence(10);
    
    // var scaled = numbers.map(scaleFactor),0.5} ;  // THIS VERSION DOES NOT WORK
    
    var scaled = numbers.map(function scaleFactor(n, arrayIndex, wholeArray){ return n * this;}, .5);
    str += '<p>Sequence is&nbsp;: '+numbers+"<br>&nbsp;scaled  are : " + scaled; 
    
    var tarr = numbers.map(incrementSequence);
        scaled = tarr.map(function scaleFactor(n, arrayIndex, wholeArray){ return n * this;}, .5);
    str += '<br>Sequence is : '+tarr+"<br>&nbsp;scaled  are : " + scaled; 
    /* */
    str += '<hr>';
    
    document.getElementById('divArea').innerHTML = str;
    </script>
    </body>
    </html>

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    Quote Originally Posted by jmrker View Post
    That works great.
    In my effort to understand what it is doing and how it works,
    I tried to make it a stand-alone function call like the others.

    The following is my futile attempt.
    Is there a way to call it like the highlighted in red line (commented out to make example work).

    Also, if possible, could you expand on the explanation of how your function above works with the extra paramters that I don't see predefined?
    the red is a syntax error: unbalanced parens and a floating "}"...


    if you want to "bake in" 0.5 so that it doesn't need passed, you can do so using bind:
    Code:
    function scaleFactor(n, arrayIndex, wholeArray){ return n * this;}
    var scaleHalf=scaleFactor.bind(0.5);
    
    [1,2,3,4,5].map(scaleHalf); // shows: [0.5, 1, 1.5, 2, 2.5]

    the "extra" params are always defined for you by map/filter, i simply labeled them.

    compare to a for-loop:

    Code:
    var r=[11,22,33,44,55], ob, i=0, mx=r.length;
    for(i;i<mx;i++){
      var ob=r[i];
      out[i]=ob*0.5;
     console.log(ob, i, r);
    }
    /*
    //prints:
    11 0 [11,22,33,44,55]
    22 1 [11,22,33,44,55]
    33 2 [11,22,33,44,55]
    44 3 [11,22,33,44,55]
    55 4 [11,22,33,44,55]
    */
    map() is sightly simpler inho, and has scope, but the pattern is the same:
    Code:
    [11,22,33,44,55].map(function(ob, i, r){
      console.log(ob, i, r);
      return ob * 0.5;
    });
    
    
    /*
    //prints:
    11 0 [11,22,33,44,55]
    22 1 [11,22,33,44,55]
    33 2 [11,22,33,44,55]
    44 3 [11,22,33,44,55]
    55 4 [11,22,33,44,55]
    */
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    38
    Thanked 505 Times in 499 Posts
    Thank you.

    I'll go study on your explanation for awhile.


  •  

    Posting Permissions

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