JavaScript Modularity

Goals By the end of this lecture, you should … Understand why programmers use modularity. Understand how to create a function in JavaScript. Understand how to pass values to and from functions.

What is Modularity? Modularity means breaking more complex programming problems into smaller, more manageable blocks. Why should we use modularity in our code? ◦ Eliminates duplicate code ◦ Makes code more understandable ◦ Facilitates code reusability In JavaScript, modularity is handled normally through functions …

Functions Allow us to generate new, more complex commands. Programmers give functions names to identify a function’s block of code. Some functions require values, called parameters, in order to work properly. Sometimes, functions also return values.

Function Rules of Thumb You should group functions together with other functions. You should keep function length fairly short – about the length of 1 screen in your editor. It’s also a good idea to break larger functions into smaller ones so that you have one task per function.

Function Rules of Thumb Like a variable’s name, a function’s name should reflect its purpose. Name your functions to show its purpose. Work to minimize “interrelations” between functions (this is called daisy chaining). Instead, use data to connect functions. A good idea is to call all other functions from a main function.

Parts of a Function A function definition consists of two parts: ◦ A function header, which includes the function’s name and defines the function’s parameters (if the function requires them) ◦ The function’s executable block, which defines what the function will do when other code calls it. ◦ If a function returns a value to the code that calls it, the executable block will also contain a return statement.

Variable Scope Scope refers to the region of a program where we define a variable (Flanagan). JavaScript supports two types of scope: ◦ Global Scope ◦ Local Scope

Global Scope Variables We declare global scope variables outside of functions. Global variable values are available to all of the JavaScript. Global variables exist in memory so long as the JavaScript program executes. Don’t use global scope variables in N341 – I want you to use local scope variables …

Local Scope Variables We declare local scope variables inside a function’s executable block. Local scope variables exist in memory ONLY when a function executes. Local scope variables are available ONLY to the code inside a function’s executable block. Other functions cannot use or see a function’s local scope variables. However, we can pass a local scope variable’s value to another function. Use local scope variables for your labs in N341.

Passing Information To pass information to function, we define function parameters. Functions can have no parameters or they can can have any number of parameters. We declare parameters using a comma-separated list after a function’s name. We can re-use parameters each time our program calls a function. Parameters have implicit data types; we don’t need to explicitly type a parameter when we declare it.

Writing a Function - Step 1 Before coding, ask yourself the following: ◦ What will the function do? ◦ Will the function need to get any values from the code that calls it? How many parameters will the function need? ◦ Will the function need to return values to the code that calls it?

Writing a Function - Step 2 Start with the reserved word function ◦ This prepares JavaScript for a function – it says “Get ready, here comes a function.” function

Writing a Function - Step 3 Give the function a meaningful name ◦ The function’s name should somewhat describe what the function will do function SayHi

Writing a Function - Step 4 Establish function parameters (if needed) ◦ Give parameters names that describe what they are going to do. ◦ Separate multiple parameters with commas. function SayHi(fName,lName)

Writing a Function - Step 5 Write the function’s executable block: ◦ Start with a “{” and code any statements that the function will execute. ◦ Use function parameters like variables. function SayHi(fName,lName) { var strMsg = new String(“”); strMsg = “Hello, ”; strMsg += fName + “ ” + lName; strMsg += “!”; Local Variable Parameters

Writing a Function - Step 6 If needed, return a value to the code that called the function. ◦ Use the reserved word return to return a value. function SayHi(fName,lName) { var strMsg = new String(“”); strMsg = “Hello, ”; strMsg += fName + “ ” + lName; strMsg += “!”; return strMsg;

Writing a Function - Step 7 Close the executable block with a “}” ◦ This tells JavaScript that we are done with the function’s definition. function SayHi(fName,lName) { var strMsg = new String(“”); strMsg = “Hello, ”; strMsg += fName + “ ” + lName; strMsg += “!”; return strMsg; }

Calling a Function When code calls a function, control of the program is transferred to that function. When the function finishes, the program will execute the next line in code after the function call. We can call a function in two ways: ◦ If we don’t expect the function to return a value (or if we don’t want to use the returned value) we can call a function by simply using the function’s name. ◦ If we expect the function to return a value, we need to assign that value to a variable. We can do that by assigning the function’s name to the variable.

Calling a Function – Example 1 The function doesn’t return value (or we discard it). The function doesn’t have explicit parameters. SayHi();

Calling a Function – Example 2 The function doesn’t return value (or we discard it). The function has explicit parameters, that we need to send it. SayHi(strFirst, strLast); This code sends the variable values for strFirst & strLast to fName and lName, respectively.

Calling a Function – Example 3 The function returns a value. The function doesn’t have explicit parameters. strMyMsg = SayHi();

Calling a Function – Example 4 The function returns a value. The function has explicit parameters, that we need to send it. strMsg = SayHi(strFirst, strLast);

Questions?

Function for Call Example 1 function SayHi() { var strMsg = new String(“”); strMsg = “Hello World!”; window.alert(strMsg); }

Function for Call Example 2 function SayHi(fName,lName) { var strMsg = new String(“”); strMsg = “Hello, ”; strMsg += fName + “ ” + lName; strMsg += “!”; window.alert(strMsg); } strFirst strLast

Function for Call Example 3 function SayHi() { var strMsg = new String(“”); strMsg = “Hello world!”; return strMsg; }

Function for Call Example 4 function SayHi(fName,lName) { var strMsg = new String(“”); strMsg = “Hello, ”; strMsg += fName + “ ” + lName; strMsg += “!”; return strMsg; } strFirst strLast