JavaScript – Functions

JavaScript – Functions 2017, Fall Pusan National University Ki-Joune Li

JavaScript Function <!DOCTYPE html> <html> <body> <h2>JavaScriptFunctions</h2> <p>Thisis a sample function:</p> <pid="demo"></p> <script> functionmyFunction(p1, p2) { return p1 * p2; } document.writeln("<p> result is "+myFunction(4, 3)+"</p>"); </script> </body> </html> JavaScript function is a block of code to perform a particular task. Example

JavaScript Function – argument <!DOCTYPE html> <html> <body> <h2>JavaScriptFunctions</h2> <p>Thisis a sample function:</p> <script> functionmyFunction( p1, p2 ) { return p1 * p2; } document.writeln("<p> result is "+myFunction( 4, 3 )+"</p>"); </script> </body> </html> Formal Parameters Parameters Actual Parameters Arguments • Syntax: very similar with other high level languages like Java function name( parameter1, parameter2, parameter3 ) {code to be executed} * Function invocation without (): Example

JavaScript Function – argument passing function changeStuff(a, b, c) { a = a * 10; b.item = "changed"; c = {item: "changed"}; } var num = 10; var obj1 = {item: "unchanged"}; var obj2 = {item: "unchanged"}; changeStuff(num, obj1, obj2); document.writeln("<p>"+num+"</p>"); document.writeln("<p>"+obj1.item+"</p>"); document.writeln("<p>"+obj2.item+"</p>"); 10 changed unchanged • Call-by Sharing • JavaScript primitive types are passed by value. The function only gets to know the values, not the argument's locations • JavaScript objects are passed by reference. In JavaScript, object references are values. Because of this, objects will behave like they are passed by reference

JavaScript Function – argument passing function functionA(a, b, c) { a = a * 10; b.item = "changed"; c = {item: "changed"}; } var num = 10; var obj1 = {item: "unchanged"}; var obj2 = {item: "unchanged"}; functionA(num, obj1, obj2); document.writeln("<p>"+num+"</p>"); document.writeln("<p>"+obj1.item+"</p>"); document.writeln("<p>"+obj2.item+"</p>"); 10 changed unchanged • num: a value 10 is passed to parameter a • References of num and a are different – no effect on the caller • obj1: a reference value to obj1 is passed to b • References of obj1 and b are identical – effect on the caller • obj2: a reference value to obj2 is passed to c • References of obj1 and c were identical • A new object is created and overwritten – no effect on the caller

JavaScript Function – argument passing caller callee functionA(num, obj1, obj2); functionfunctionA(a, b, c) value copied num a reference copied obj1 b reference copied obj2 c {item: "changed"}

JavaScript Function – argument passing <!DOCTYPE html> <html> <body> <script> function changeObject(x) { x = {member:"bar"}; alert("in changeObject: " + x.member); } function changeMember(x) { x.member = "bar"; alert("in changeMember: " + x.member); } var x = {member:"foo"}; alert("before changeObject: " + x.member); changeObject(x); alert("after changeObject: " + x.member); alert("before changeMember: " + x.member); changeMember(x); alert("after changeMember: " + x.member); </script> </body> </html> Another Example 1. Member change: effect on the caller 2. Object change: no effect on the caller

JavaScript Function – argument <!DOCTYPE html> <html> <body> <h2>JavaScript Functions</h2> <p>This is a sample function:</p> <p id="demo"></p> <script> function myFunction(p1,p2) { if(p2==undefined ) p2=0; return p1 * p2; } document.writeln("<p> result is "+myFunction( 4 )+"</p>"); </script> </body> </html> 1 missing argument (default argument) 1 argument • Missing Arguments

JavaScript Function – argument <!DOCTYPE html> <html> <body> <h2>JavaScript Functions</h2> <p>This is a sample function:</p> <p id="demo"></p> <script> x=findMax(1, 200, 23, 34, 90); document.writeln("<p> Max"+x+"</p>"); function findMax() { var i; var max = -Infinity; for (i = 0; i < arguments.length ; i++) { if( arguments[i] > max) { max = arguments[i] ; } } return max;} </script> </body> </html> Argument Object • JavaScript functions have a built-in object called the arguments object.

JavaScript Function – function as a variable <!DOCTYPE html> <html> <body> <h2>JavaScript Functions</h2> <p>This is a sample function:</p> <p id="demo"></p> <script> var x= function(p1, p2) {return p1 * p2;} document.writeln("<p> result is "+x(4,3)+"</p>"); </script> </body> </html> Anonymous Function • Function expression can be stored as a variable

JavaScript Function – function as a variable <!DOCTYPE html> <html> <body> <h2>JavaScript Functions</h2> <p>This is a sample function:</p> <p id="demo"></p> <script> var x=function(p1, p2) {return p1 * p2;} var z=x; document.writeln("<p> result is "+z(4, 3)+"</p>"); </script> </body> </html> • Variable as a function

JavaScript Function – Function constructor <!DOCTYPE html> <html> <body> <h2>JavaScriptFunctions</h2> <p>Thisis a sample function:</p> <pid="demo"></p> <script> var x=newFunction("a", "b", "returna * b") ; document.writeln("<p> result is "+x(4, 3)+"</p>"); </script> </body> </html> Built-in Java function constructor Function Constructor: Function()

JavaScript Function – function invocation var myObject = { firstName:"John", lastName: "Doe",fullName: function () {returnthis.firstName + " " + this.lastName; }}myObject.fullName(); • Function is invoked • When it is invoked (called) from JavaScript code • When an event occurs (when a user clicks a button) • Automatically (self invoked) • Invoking a functionas a method

JavaScript Function – function invocation function myFunction(a, b) {return a * b;}myFunction(10, 2); function myFunction(a, b) {return a * b;}window.myFunction(10, 2); By default, global function that belongs to HTML page  to window object Invoking a global function

JavaScript Function – function invocation <!DOCTYPE html> <html> <body> <p>In this example, myFunction is a function constructor:</p> <p id="demo"></p> <script> function myFunction(arg1, arg2) { this.firstName = arg1; this.lastName = arg2; } var x = new myFunction("John","Doe") document.getElementById("demo").innerHTML = x.firstName; </script> </body> </html> By default, global function that belongs to HTML page  to window object Invoking function constructor

JavaScript Function – event <!DOCTYPE html> <html> <body> <p>Counting with a global variable.</p> <button type="button" onclick=＂ myFunction() ">Count!</button> <p id="demo">0</p> <script> var counter = 0; function add() { return counter += 1; } function myFunction(){ document.getElementById("demo").innerHTML = add(); } </script> </body> </html> Callback function – invoked when button is clicked Invoking a global function

JavaScript Function – recursion <!DOCTYPE html> <html> <body> <p>Computing Factorial by Recursion</p> <script> function myFactorial(a) { if(a==1) return 1; else return a*myFactorial(a-1); } var num; var intValue; num=window.prompt("Please enter an integer number"); intValue=parseInt(num); document.writeln("<p>"+intValue+"! is "+ myFactorial(intValue)+"<p>"); </script> </body> </html> > Recursion like other high level language

JavaScript – Functions