David Stotts Computer Science Department UNC Chapel Hill

0. data (types, simple information) 1. data storage (variables, assignment) 2. data retrieval (expressions, evaluation) 3. repetition (loops) 4. decision making (conditionals) 5. procedure abstraction (functions) 6. data abstraction (arrays) 7. objects: all-the-above, wrapped up

Named Functions  Sometimes we have a block of statement we need to execute at several different places in our program  We would like to avoid duplicating the code block… no cut and paste Principle: write the code lines once, refer to it as many times as you need

We have already seen this at work, and used it ◦ Math.floor(speed); ◦ Math.sqrt(num); ◦ prompt( “what is the number?” ) ; ◦ alert( “well done !! ” ); Someone else wrote the JavaScript code that computes square roots They wrapped it up in a way that lets you make it execute and work for you when you need it

One common use for functions is the traditional mathematical entity y = f(x) “black box” view, function turns input values into output values The inside of the box is the code you write for the function, the function body argument Return value (domain element) (range element)

You can “wrap up” your own code: you write functions, they are like named mini programs It helps to organize your code into smaller chunks rather than one long huge pile of statements You give a collection of statements a name, and then cause those statements to execute by referring to the name

calling a function is making the function code execute to produce its results You write the function body code once You call it as many times as you need to get results We say a function returns the result it computes A function call is an expression It evaluates to the result the function returns A call can appear anywhere an expression can… assignment, arithmetic, alert, conditions

Arguments are like “program” input for a function Return value is like output var num, x = 47.3; num = sqrt ( x ); Arguments: pass values into a function for use during execution Return value: function passes out a value when it ends a function call, an expression, return value is assigned to num

Functions are usually called using both arguments and return values… however, they are optional Sometimes we have occasion to write/call a function that has no arguments Sometimes we have occasion to write/call a function that has no return value Sometimes we call a function that returns a value but we choose to ignore it, not use it

function myProg ( ) { var x = 5; var xcube; xcube = helper(x); alert(“the result is “ + xcube ); } function helper ( num ) { var result = num ^ 3; return result; } Function definition Function call Makes this execute

function myProg ( ) { var x = 5; var xcube; xcube = helper(x); alert(“the result is “ + xcube ); } myProg(); Function definition Function call Makes this execute

Think of your program as  a collection of function definitions  one lonely call to make a function begin running We will write that “first function” as function myMain ( ) {... } This is just my style for this class, so all our programs have some consistency and similarity There are many ways to structure JavaScript programs

function myMain ( ) { calls helper( ) calls validate( ) } function validate ( ) {... } function helper ( ) { calls isInt( ) } function isInt ( ) {... } myMain( ); the lonely first function call

This call to the “first function” gets the whole snowball rolling downhill function myMain ( ) { calls helper( ) calls validate( ) } function isInt ( ) {... } myMain( ); function helper ( ) { calls isInt( ) } function validate ( ) {... }

function myProg ( ) { var x = 5; var xcube; xcube = helper(x); alert(“the result is “ + xcube ); } function helper ( num ) { var result = num ^ 3; return result; } For this call, we are computing 5 ^ 3 since 5 is passed is as the value for “num” 125 is sent back as the return value, put into “xcube”

function myProg ( ) { var x = 9; var xcube; xcube = helper(x); alert(“the result is “ + xcube ); } function helper ( num ) { var result = num ^ 3; return result; } For this call, we are computing 9 ^ 3 since 9 is passed is as the value for “num” 729 is sent back as the return value, put into “xcube”

Code examples Show no parameters ◦ input prompting Show return values ◦ User input data validation Show parameters passed in Show scope rules

Scope of a name : the part of the program where that name can be seen and used (assigned to, read from, called) JavaScript has global scope and local scope We will use global scope carefully for now

 Local Scope is basically all the names created inside a function  Arguments are variables local to a function  var declarations inside the function are local to that function  Functions can be declared inside a function… they are local

Anything declared local to a function  can be seen and used by code inside that function body  cannot be seen or used by any code outside that function

var gx = 12; var count = 0; function myMain ( ) {... } function helper ( num ) {... } We say that the “top level functions” are declared at the global level Turns out we can declare variables at the global level too Global variables can be seen in all functions return num * gx ;

function myMain( ) { var y = 5; var result; result = helper ( y ) ; } function helper ( num ) { var x = 7; alert( y ); // illegal // y in myMain is not visible return num*x; } Why can the name “helper” be seen and used (called) inside “myMain” ? A mystery… Function “helper” is not declared inside myMain…

For now, don’t use global variables  I want you to get used to passing arguments to functions, and to do it well  Using global variables can create conflicts when developing code modules as a team We will be using the global scope level for top level function names

var aNumber = 100; tweak( ); function tweak( ) { // This prints "undefined", because aNumber is // also defined locally below. alert(aNumber); if (false) { var aNumber = 123; } So don’t so this… it causes confusion Declare variables up top

var aNumber = 100; tweak( ); function tweak( ) { // This prints "undefined", because aNumber is // also defined locally below. var aNumber; alert(aNumber); if (false) { aNumber = 123; } In this form, you can see why it prints undefined

 Declare your variables !  AT THE TOP OF FUNCTIONS! no, srsly … declare your variables at the top of functions