David StottsComputer Science Department

UNC Chapel Hill

Introduction to Programming

(in JavaScript)

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

The Big Six

(5) Procedure Abstraction

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

Procedure Abstraction

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

Procedure Abstraction

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

Pure Functions, Math Functions

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

JavaScript Functions

calling a function is making the function code execute to produce its results

You write the function body code onceYou 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 expressionIt evaluates to the result the function returns

A call can appear anywhere an expression can… assignment, arithmetic, alert, conditions

Function Call: Execution

Arguments are like “program” input for a functionReturn value is like output

var num, x = 47.3; num = sqrt ( x );

Call: Arguments, Return

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 isassigned 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

Arguments, Return

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 Call vs. Function Definition

Function definition

Function definition

Function call

Makes this execute

function myProg ( ) { var x = 5; var xcube; xcube = helper(x); alert(“the result is “ + xcube );}

myProg();

Function Call vs. Function Definition

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

Program Structure

Program Text Structure

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

“Runtime” Structure

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;}

Parameter Passing

For this call, we are computing 5 ^ 3since 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;}

Different Parameters, Different Results

For this call, we are computing 9 ^ 3since 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

Procedure Abstraction

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

ScopeNow you see it, now you don’t

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

Local Scope

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

Local Scope

var gx = 12;var count = 0;

function myMain( ) { . . .}function helper ( num ) { . . .}

Example

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;}

Example

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

Global Scope

var aNumber = 100;

tweak( );

function tweak( ) {

// This prints "undefined", because aNumber is

// also defined locally below.

alert(aNumber);

if (false) {

var aNumber = 123;

} }

Weird Function Scope Stuff

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;

} }

Same as …

In this form, you can see why it prints undefined

Declare your variables !

AT THE TOP OF FUNCTIONS!

RULE: Declare your variables !

no, srsly … declare your variablesat the top of functions