CMPS 211 JavaScript

1. CMPS 211 JavaScript Topic 2 Functions and Arrays

2. Goals and Objectives Chapter Headlines Introduction Function Definition Function Calls Predefined Functions Recursion Array Definition and Properties Multidimensional Arrays Array Manipulations Associative Arrays Functions and Arrays Summary Outline Chapter 20 - Functions and Arrays

3. Goals and Objectives • Goals Understand the basics of JavaScript functions and arrays, their definitions, their use, their role in automating repetitive tasks, their algorithms, their input, their output, and the use of predefined JavaScript functions • Objectives • Importance of functions and arrays • Function definition and calling • Recursion • Array definition and use • Array dimensionality • Array manipulation • Objects and associative arrays • Practice: use functions and arrays together Chapter 20 - Functions and Arrays

4. Topic Headlines • 1 Introduction • Functions and arrays are great concepts to learn • 2 Function Definition • A function needs a head and a body • 3 Function Calls • All you need to use is the function head • 4 Predefined functions • Check out how JavaScript helps us use functions • 5 Recursion • Without recursion, JavaScript life would be difficult to repeat Chapter 20 - Functions and Arrays

5. Topic Headlines • 6 Array Definition and Properties • If you have patterns of data, then arrays are for you • 7 Multidimensional Arrays • As the patterns get tough, JavaScript has the solutions • 8 Array Manipulations • Find out what you can do with data patterns one defined • 9 Associative Arrays • Who needs these arrays? • 10 Functions and Arrays • The combination allows you to write serious code Chapter 20 - Functions and Arrays

6. Introduction • Repetitive tasks are viewed as algorithms • Functions are a set of statements that take and input, use the algorithm, and produces an output • Functions make programs modular and portable • One can create a function library to reuse some functions • Array is a complex variable that can hold multiple values • JavaScript uses arrays in a unique way • Arrays and functions must be defined before we can use them Chapter 20 - Functions and Arrays

7. Function Definition • A function definition has two parts:Signature specifies function name and input parametersBody  includes any legal JavaScript statements • Signature:function functionName([param1, param2,…])Parameters provide input to the function and are optional • Body:{ statement 1; statement 2; return value;}Body is included between two curly brackets • A function definition is executed only when it is called Chapter 20 - Functions and Arrays

8. Function Calls • Function definitions have to be called to be executed • Function call if function returns a value: returnValue = functionName(val1, val2, …) • Function call if function does not return a value: functionName(val1, val2, …) • The call consists of function name and input values known as arguments or parameters • Arguments in a call must match those in the definition • Function call can be placed before or after the function definition • Functions can be nested and there is no limit on level of nesting Chapter 20 - Functions and Arrays

9. Function Calls • Example 20.1: Define and call functions Function must take an integer and find numbers divisible by it in the range of 1 to 25 Chapter 20 - Functions and Arrays

10. Function Calls • Example 20.3: XHTML tags in functions Use XHTML tags in a function to format its output Chapter 20 - Functions and Arrays

11. Predefined Functions • JavaScript has several predefined functions • eval(string) function takes a string and evaluates it • This function is good to check small chunks of code quickly • There are two parse functions parseFloat(string) and parseInt(string), they convert valid string into a number • The escape(string) and unescape(string) allow us to encode and decode strings respectively Chapter 20 - Functions and Arrays

12. Recursion • Recursion helps in solving a large class of problem • Recursion is the decomposition of a problem into sub problems of the same type • Recursive functions support recursion • A recursive function is a function that calls itself • JavaScript supports recursive functions Chapter 20 - Functions and Arrays

13. Recursion • Example 20.4: Use recursive functions Calculate the factorial of a number Chapter 20 - Functions and Arrays

14. Array Definition and Properties • Array is an ordered set of values with a single variable name, colors=(red, blue, green, yellow) • We must define arrays as we define variables:myArray = new Array(4) • Each array has an implicit data type and must have a name • It also has a size that specifies the number of elements • Array is a predefined JavaScript object • Arrays can be initialized when they are defined • Array index is a counter that locates the array elementmyArray[2] accesses the third element • JavaScript uses zero-based arrays, first element index is 0 • Array size defines its bounds Chapter 20 - Functions and Arrays

15. Array Definition and Properties • Example 20.5: Use arrays Calculate the sum of squares of (2, 5, 6, -3, 0, -7, 9, 4) Chapter 20 - Functions and Arrays

16. Multidimensional Arrays • Dimensionality is determined by the number of bracket pairs ([]) • Arrays can be n-dimensional i.e. 2D, 3D, …., nD • 2D array becomes a matrix grid, 3D array becomes a box, further visualization is not possible • Each dimension of an array corresponds to an index for its accessibility • We can nest array definitions to create multidimensional arrays, for example 2 x 3 array is created asarr = new Array(new Array(2), new Array(3)); • The elements of the array can be accessed using arr[i][j] Chapter 20 - Functions and Arrays

17. Multidimensional Arrays Chapter 20 - Functions and Arrays

18. Array Definition and Properties • Example 2.6: Use multidimensional arrays Chapter 20 - Functions and Arrays

19. Array Manipulations • Arrays can be resized, copied, sorted by using predefined functions in JavaScript Function Description reverse() reverses the order of array elements sort() sorts elements in ascending/alphabetical order concat() combines the elements of two arrays slice() slices an array and returns a sub array of it Chapter 20 - Functions and Arrays

20. Array Manipulations • Example 20.7: Sorting Arrays Write a program that sorts string and number arrays Chapter 20 - Functions and Arrays

21. Associative Arrays • It is an interesting concept • It allows us to associate implicit arrays with objects to save their properties and variables • It requires thorough understanding of objects and their concepts Chapter 20 - Functions and Arrays

22. Functions and Arrays • Functions can use arrays in their bodies or arrays can be passed into functions as arguments for manipulations and processing • Example 20.8: Pass arrays to functions Chapter 20 - Functions and Arrays

23. Summary • Functions and arrays provide a useful combination in programming • Function definition has a signature and body • Function calls call the function body for execution • JavaScript has several predefined functions • JavaScript supports recursive functions • Arrays are useful in many applications • Arrays can be n-dimensional • Arrays can be manipulated using predefined functions • Associative arrays is an interesting concept • Function can use arrays Chapter 20 - Functions and Arrays