Functions

• You can put code in another file.
  • A reference
  • Cleaner in the end.
  • Reuse code.

  • <script type="text/javascript" src="code/hello.js"></script> 

  • The file contains

    'use strict'
    
    alert("hello from hello.js"); 

  • Code will be imported and executed if appropriate.
  • Later we will use this to import glsl code as well.
• Functions
  • Read
    • Chapter 3 of Eloquent Javascript
    • Reference
  • C style

    • function name(param1, param2, ... paramn) {
          statement;
          statement;
      
          return;
      } 

    • no type for the return
    • Return like c/c++ can return a value or not
    • Functions have scope like c/c++
    • Parameters
      • Primitve parameters (numbers, strings, ...) are passed by value
        • types defined

      • <script type="text/javascript">
        
        function DontChange(x) {
            console.log("In DontChange(x), x = ", x);
            x = "dog";
            console.log("In DontChange after assignemt, x = ", x);
        
            return;
        }
        
        let param = "hello";
        
        console.log("param = ", param);
        console.log("Calling DontChange(param)");
        DontChange(param);
        console.log("param = ", param);
        
        param = 4;
        console.log("param = ", param);
        console.log("Calling DontChange(param)");
        DontChange(param);
        console.log("param = ", param);
        </script>

      • objects are passed by reference.

      • <script type="text/javascript">
        function Change(x){
            console.log("In Change(x), x = ", x);
            x[1] = "dog";
            console.log("In Change after assignemt, x = ", x);
        
            return;
        }
        
        let param2 = [1,2,3];
        
        console.log("param2 = ", param2);
        console.log("Calling DontChange(param2)");
        Change(param2);
        console.log("param2 = ", param2);
        </script> 

      • It is easy to pass functions as parameters

        function Square(x) {
            console.log("In Square");
            return x * x;
        }
        
        function Twice(x) {
            console.log("In Twice");
            return x + x;
        }
        
        function RunFunc(x,y){
            console.log("In RunFunc");
            return x(y);
        }
        console.log(Square(4));
        console.log(Twice(4));
        console.log(RunFunc(Square, 4));
        console.log(RunFunc(Twice, 4)); 

    • Functions can be recursive

      • function Fib(x) {
            if (x === 0 || x === 1) {
                return 1;
            }
            return Fib(x-1) + Fib(x-2);
        }
        
        for(let i=0; i < 10; i++) {
            console.log("Fib(",i,"0) = " , Fib(i));
        }
        

  • You can delcare functions other ways as well:
    • with binding

    • let bob = function(x){return x+4;}
      console.log("bob(3) = ",bob(3));
      console.log(bob);
      console.log('RunFunc(function(x){return x+"hello"},5) = ',RunFunc(function(x){return x+"hello"},5));
      

    • There are also arrow functions

    • let y = RunFunc((x)=>{return x+9;},5);
      console.log("y = ", y);
      console.log('RunFunc((x)=>{return x+x+x;},9) = ',RunFunc((x)=>{return x+x+x;},9));
      

    • I honestly wouldn't use these unless you must.