CMPS 211 JavaScript Topic 2 Functions and Arrays

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

3Chapter 20 - Functions and Arrays Goals and Objectives Goals 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 Objectives Importance of functions and arrays Importance of functions and arrays Function definition and calling Function definition and calling Recursion Recursion Array definition and use Array definition and use Array dimensionality Array dimensionality Array manipulation Array manipulation Objects and associative arrays Objects and associative arrays Practice: use functions and arrays together Practice: use functions and arrays together

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

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

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

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

8Chapter 20 - Functions and Arrays 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

9Chapter 20 - Functions and Arrays 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

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

11Chapter 20 - Functions and Arrays 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

12Chapter 20 - Functions and ArraysRecursion 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

13Chapter 20 - Functions and ArraysRecursion Example 20.4: Use recursive functions Calculate the factorial of a number

14Chapter 20 - Functions and Arrays 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 element myArray[2] accesses the third element JavaScript uses zero-based arrays, first element index is 0 Array size defines its bounds

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

16Chapter 20 - Functions and Arrays 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 as arr = new Array(new Array(2), new Array(3)); The elements of the array can be accessed using arr[i][j]

17Chapter 20 - Functions and Arrays Multidimensional Arrays

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

19Chapter 20 - Functions and Arrays Array Manipulations Arrays can be resized, copied, sorted by using predefined functions in JavaScript FunctionDescription 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

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

21Chapter 20 - Functions and Arrays 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

22Chapter 20 - Functions and Arrays 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

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