Modern JavaScript Develop And Design Instructor’s Notes Chapter 7- Creating Functions Modern JavaScript Design And Develop Copyright © 2012 by Larry Ullman

Objectives Define and invoke simple functions Define and invoke functions that take arguments Validate function parameters Understand how different types of values are passed to functions Return a value from a function

More Objectives Comprehend variable scope Appreciate that functions in JavaScript are another type of value Recognize the meaning of the special this keyword Perform some of the fancier things one can do with functions in JavaScript

Function Theory Functions are used for commonly repeated chunks of code. Can speed development time. Should have a “black box” mentality. Can be used to protect data from being manipulated or accessed inappropriately.

Defining Functions function functionName() { // Function body. } A function definition: keyword function, followed by the function’s name, followed by parentheses, and the function’s body goes between curly braces. The function is called by using the function’s name, followed by the parentheses.

Passing Values function functionName(someVar) { // Function body. } functionName(someValue); function functionName(someVar, someOtherVar) { // Function body. } functionName(someValue, someOtherValue); To have a function take an argument, name one or more variables, separated by commas, between the parentheses of the function definition. Don’t use var for function parameter variables.

Validating Parameters Functions do not check types. Functions do not check the number of parameters. Parameters cannot have default values. JavaScript is weakly typed, so any type of value can be passed to any function parameter. JavaScript will not through an error if a mismatched number of values is passed.

Validating Parameters function add(x, y) { if ( (typeof x == 'number') && (typeof y == 'number') ) { x + y; } Check the parameter’s type to validate it. A parameter will have the value undefined if not passed a value. In more advanced JavaScript programming, you can write a function so that it accepts a variable number of arguments.

How Values are Passed By Value By Reference Numbers Strings Booleans Dates Arrays Objects Simple values are passed to functions by value, which means a copy of the value is passed, not the original variable itself. Thus, changes to the value within the function has no impact on the variable outside of it. Complex values are passed to functions by reference, which means a reference to the original variable is passed to the function, not a copy of the variable’s value. Thus, changes to the value within the function DOES affect the variable outside of it. Complex variables are one way to get data out of a function. Note that this behavior is the same whether or not the arguments and parameters have the same names as each other.

Returning Values function functionName() { // Function body. return something; } var check = functionName(); Use the return statement to return a value. The value can be a literal or a variable. The value can be of any type. You can have multiple return statements but the function terminates as soon as one is executed. If a function does not return any value, it automatically returns undefined.

Variable Scope Realm in which a variable exists. Global scope Local scope Global scope is the largest, default scope. Function definitions create local scope. Each function has its own scope. Where and how a variable is defined determines its scope. Generally speaking, global variables should be avoided.

Global Variables Can create bugs and conflicts. No access control. Can adversely affect performance.

Variable Scope Variables defined outside of any function are global. Variables defined within a function using the var keyword are local. Function parameters are also local. Variables defined within a function WITHOUT using the var keyword are global. If a global and a local variable have the same name, the local variable will overrule the global one. Bugs can arise when variables are accidentally made global.

Functions as Objects Functions are objects of type Function. A function’s name points to its value, which is its definition. Functions are “first-class” citizens. Very important to understanding JavaScript. Functions in JavaScript are just another type of value. Functions can be used like any other type of value: you can assign the value to a variable, use it as a value to be passed to another function, or even return a function from another function.

Functions as Variable Values window.onload = init; window.onload = function() { // Function body. }; This is a common bit of JavaScript code. In it, a function’s definition is assigned to the onload property of the window object. Taking this a step further, you can just assign the function definition to the property. This is called an anonymous function, as it has no name. Note the use of the semicolon at the end, which terminates the assignment of the value statement.

Functions as Argument Values var someFunction = function() { }; someOtherFunction(someFunction); someOtherFunction(function() { }); Some functions actually need to be passed a function. You can do this in two steps or just one. Just be mindful of the syntax when defining the function inline as in the second example.

Functions That Need Functions forEach() every() some() map() filter() reduce() These array methods have been added in ECMAScript 5. Each requires a user-defined function.

Immediately Invoked Functions // Function body goes here. })(); (function() { var someVar; // Function body goes here. })(); An anonymous function that is also immediately called (when this code is encountered). Creates a temporary function. Can be used to hide variables from the global scope.

Nested Functions function functionName() { // Some function body. function anotherFunctionName() { // This function’s body. } You can define one function within another, because functions are objects and objects can have methods. The inner function is just a method of the outer function object. The inner function has its own scope but has access to the variables local to the parent function, including its arguments, as well as any global variable. The inner function is hidden from the global scope.

Recursive Functions function factorial(n) { if (n <= 1) { return 1; } else { return n * factorial(n-1); } A recursive function is one that calls itself. Useful in situations where the same process may need to be executed to an unknown depth.

Context and this Context or execution context is the context in which a line of code is being executed. Different objects and properties exist in different contexts. The special this variable reflects the context. Often, this refers to the object on which a function was invoked. If a function is not associated with an object, this refers to the global object. this allows an object to refer to its own members.