1. M4 - Functions
School of Media, Art, & Design
CWMD2601 –
Scripting for Design
4/3/2020 M4 - Functions 1

2. 4/3/2020
13
3
5
1
15
4
0
2
4
6
8
10
12
14
16
N/A E Fail D 50-70% C 70-80% B 80-90% A 90-110%
In-Class Coding #1: Grade Distributions
Thursday (41 students)
4
1 1 0
5
30
0
5
10
15
20
25
30
35
N/A E Fail D 50-70% C 70-80% B 80-90% A 90-110%
In-Class Coding #1: Grade Distributions
Friday (41 students)
In Class Coding #1 – Grade Distributions

3. 4/3/2020 3
functionsreuse
decisionscondition
loops
repeat
arrays and
objects
variables
values
expressions
key elements
Programming
process
M3 – week 3
M4 – week 4 and 5
M5 – week 6, 8 and 9
(week 7 –mid term)
M6 – week 10 and 11
M7 – week 12 and 13
(week 14 – final)
Course Learning Path – 7 Modules course outlines
enhance
JavaScript
programming
M1 – week 1
M2 – week 2
M4 - Functions
• Algorithms
• Pseudo code
• Flow charts
• Essential statements
• Adding JS to Web pages
• Writing basic code
• Events and DOM
• Using Developer tools
• Declaring variables
• Data types
• Arithmetic operators
• precedence
• Definition
• Parameters
• Return values
• Application
• Scope
• Declaring
• Index
• Reading & writing values
• Dimension
• application
• Conditions
• Boolean values & operators
• Precedence
• If statements
• application
• For statement
• While statement
• Nested loops

4. 4/3/2020 4
Refresh -M1, M2 and M3 Takeaways
M2 – Getting Started
with JavaScript
M1 -The
Programming
Process
IPO
1. INPUT
2. OUTPUT
3. DECLARATION
4. EXPRESSION
5. DECISION
6. LOOP
variables values expressions
Algorithms
PC, FC
Statements
IPO
I&D Web
Page
PROGRAMMING
RUN
M3 – Variables,
Values,
Expressions
M4 - Functions
input output
process
How Data are stored ?
lobal vs local variables
declaration using “let”
What are the Data types ?
number
string
Boolean
null
undefined
object/function/arrays
How Data are computed?
assignment
arithmetic, string operators
comparison operator
mixed operator
IPO – Data Processing
M4 – Functions
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
output
properties methods events
Object
DOM
HTML
(structure, ”look”)
CSS
(presentation,
“feel”)
JS
(behavior, “act”)
 IO statements
 comments
 debug
 good practices

5. 4/3/2020 M4 - Functions 5
Refresh -M1, M2 and M3 Takeaways
 Download the “M1-3 Summary” spreadsheet, and provide an
example for each; from M2 and M3 in-class coding exercises

6. 4/3/2020 6
M4 Functions – Objectives
Make Use of JavaScript Built-in and
Custom-Built Functions
 Definition
 Parameters
 Return Values
 Application
 Scope
M4 - Functions

7. 4/3/2020 7
M4 Functions – Activities (WK4 and 5)
 Understand parameters, arguments, and return values
 Explore some common errors when coding functions
 Revisit scope rules for variables declared with let
 Demonstrate the ES6 arrow function syntax
M4 - Functions
 Explain the function concept and its benefits
 Differentiate between built in and user defined
functions
 Distinguish function declarations and function
expressions
 Create user defined functions

8. 4/3/2020 M4 - Functions 8
 Concepts: Notation and Benefits
 Built-in Functions: Core, Browser (BOM) and
Document (DOM)
 Custom-Built Functions: User defined, Named vs
Anonymous
 Invoking Functions: Parameters and Return
(Input/Output)
 Variable Scopes: Global vs Local
M4 Functions – Topics

9. What is a flowchart?
A. A text-based way of designing an
algorithm
B. A set of diagrams that represents a
set of instructions
4/3/2020 M1 – The Process of Programming 9
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)

10. Which flowchart symbol represents input?
A. Rectangle
B. Circle
C. Parallelogram
D. Terminal (ovals or rectangles
with rounded corners)
4/3/2020 M1 – The Process of Programming 10
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)

11. Which flowchart symbol represents process
statements?
A. Rectangle
B. Circle
C. Parallelogram
D. Diamond
4/3/2020 M1 – The Process of Programming 11
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)

12. 4/3/2020 M4 - Functions 12
M4 Functions – Concepts
 Re-use: Applications often need to run
the same block or section of code at
several points or places
 Modularity: Modern systems tend to be
complex and difficult to understand,
test, and debug, e.g. this course has 7
modules
 Function: A block of code performing a
specific task that can be ran as a single
unit, with/without a name, and be used
many times, in the same or different
programs, e.g. M3 (Mortgage calculations)
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
output
functions
ProcessInput Output

13. 4/3/2020 M4 - Functions 13
M4 Functions – Concepts
Like Math
 Behaves like a smaller program within
a larger main program
 Usually written to perform a single
task, a task we often expect to
perform many times
 Just like in every day life or math y=f(x), a function
may need some inputs in order to provide an output
 Function WILL NOT be executed until ‘others’
invoke it. In Console, try this!
ProcessInput Output
x f(x) y
Variable “a” stores the output value
(result from an expression)
Variable “b” stores the codes
(function statement, not value)

14. 4/3/2020 M4 - Functions 14
M4 Functions – Concepts
Key to Programming Process
Algorithms
Statements
Web Page
PROGRAMMING
RUN
f(..){..}
. . .
First Call
Return first result
Second Call
Return second result
 Invoke: Any and multiple time, unary expression. e.g. b(3); or
binary expression, e.g. let y=b(3)
Flow Chart JS Statement

15. 4/3/2020 M4 - Functions 15
M4 Functions – Concepts
Common use cases in JS programming
 In programming, a function usually performs
one well defined "high level" task that we
expect to carry out many times, such as:
 changing web page styles or content
 displaying web page hit count
 validating web form input
 performing calculations like scale
conversions
In older languages functions are often called procedures or
subroutines , but are referred to as methods in DOM.

16. 4/3/2020 M4 - Functions 16
M4 Functions – Concepts
Key Benefits: Modularity and Re-Use
 Divide & Conquer - Functions in JS
programming
 Divide: Break up a large/complex
JS program into modules/blocks,
e.g. Code Block ({…})
 Conquer: Solve individual
problem, easier to code/maintain
 Types: Built-In and User-Defined
 Objects: In OOP, Function is referred to as Methods, e.g.
alert() and console.log, built-in JavaScript browser methods

17. A(n) ___ allows you to execute a related
group of statements as a single unit.
A. variable
B. statement
C. event
D. code block
4/3/2020 M4 - Functions 17

18. A code block simply consists of grouped
statements with curly braces ({..}), e.g.
A. True
B. False
4/3/2020 M4 - Functions 18

19. From the following(s), select all the JavaScript’s
built-in function types.
A. core
B. browser
C. document
D. User-Defined
4/3/2020 M4 - Functions 19

20. For any fields that require numeric values, you can
use JavaScript’s built-in ________ core function to
determine whether the user actually entered a
number.
A. value()
B. integer()
C. isNumber()
D. isNaN()
4/3/2020 M4 - Functions 20

21. In JavaScript, window.prompt() method, a browser
built-in function (BOM), return true or false value ?
A. True
B. False
4/3/2020 M4 - Functions 21

22. What is the correct JS syntax (a DOM built-in
function, aka method) to change the content of
the HTML element below?
A. document.getElementByName("p").in
nerHTML = "Hellow World!";
B. document.getElementById("p").inner
HTML = "Hellow World!";
C. document.getElement("p").innerHTM
L = "Hellow World!";
D. #demo.innerHTML = "Hello World!";
4/3/2020 M4 - Functions 22

23. Which event (BOM built-in function) is used to
run something after the page has finished
loading?
A. onfinished
B. oncomplete
C. onload
4/3/2020 M4 - Functions 23

24. You use the Math.pow() method (core built-in
function) to:
A. Return any number
B. Return a number raised to the
power of a second number
C. Return a random value
between 0 and 1
D. Return a variable value
4/3/2020 M4 - Functions 24

25. let a = ‘011’; parseInt(a); will return:
A. 11
B. 0
C. 9
D. error
4/3/2020 M4 - Functions 25

26. The following programs produce the same
output?
A. True
B. False
4/3/2020 M4 - Functions 26

27. 4/3/2020 M4 - Functions 27
M4 Functions – Built-In Functions in-class Exercises
 See “M4 In Class Coding” in DC Connect
 Must be submitted by end of today

28. 4/3/2020 28
Refresh -M1, M2, M3 and M4 Takeaways
M2 – Getting Started
with JavaScript
M1 -The
Programming
Process
IPO
1. INPUT
2. OUTPUT
3. DECLARATION
4. EXPRESSION
5. DECISION
6. LOOP
variables values expressions
Algorithms
PC, FC
Statements
IPO
I&D Web
Page
PROGRAMMING
RUN
M3 – Variables,
Values,
Expressions
M4 - Functions
input output
process
How Data are stored ?
lobal vs local variables
declaration using “let”
What are the Data types ?
number
string
Boolean
null
undefined
object/function/arrays
How Data are computed?
assignment
arithmetic, string operators
comparison operator
mixed operator
IPO – Data Processing
M4 – Functions
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
output
properties methods events
Object
DOM
HTML
(structure, ”look”)
CSS
(presentation,
“feel”)
JS
(behavior, “act”)
 IO statements
 comments
 debug
 good practices
f(..){..}

29. 4/3/2020
In Class Coding #2 – Grade Distributions
31
4
2 1 1
3
0
5
10
15
20
25
30
35
A 90-110 B 80-90 C 70-80 D 50-70 E Fail N/A
In-Class Coding #2: Grade Distributions
Thursday
20
2
3
5
4
7
0
5
10
15
20
25
A 90-110 B 80-90 C 70-80 D 50-70 E Fail N/A
In-Class Coding #2: Grade Distributions
Friday
13
3
5
1
15
4
0
2
4
6
8
10
12
14
16
N/A E Fail D 50-70% C 70-80% B 80-90% A 90-110%
In-Class Coding #1: Grade Distributions
Thursday (41 students)
4
1 1 0
5
30
0
5
10
15
20
25
30
35
N/A E Fail D 50-70% C 70-80% B 80-90% A 90-110%
In-Class Coding #1: Grade Distributions
Friday (41 students)

30. 4/3/2020 M4 - Functions 30
M4 Functions – continue (week 5)
 Concepts and Built-in Functions
 User Defined Functions: Named vs Anonymous
 Invoking Functions: Parameters and Return (Input/Output)
 Scopes: Global vs Local Variables
TYPE e.g. FUNCTIONs TASK PERFORMED
Core and
Browser
Math.pow calculates powers or exponents
parseInt convert string to integer
parseFloat convert string to decimals
alert displays pop up window with message
prompt displays pop up requesting input
DOM
getElementById access specific page element
addEventListener attach code to respond to event
continue

31. 4/3/2020 M4 - Functions 31
Testing: HTML program vs console

32. 4/3/2020 M4 - Functions 32
M4 Functions –User Defined Functions
 What to consider? :
1. what needs to be done ?
2. What/if it will be named ?
3. how it will accomplish its task ?
4. what inputs it requires (if any) ?
5. what output it produces (if any) ?
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
output
functions
 What technique to use to define the
function?
f(..){..}

33. 4/3/2020 M4 - Functions 33
Refresh: M2 Variable, Declaration and Expression
 Declaration – assign name, value and data type
 var, const, let – keywords to declare a variable for
their data type: number, string and Boolean
(primitive)
 function – keyword to declare function variable
 Expression – perform tasks and return
a value variable value ;
expression

34. 4/3/2020 M4 - Functions 34
M4 Functions – Definition Techniques
Named/Anonymous, with/without return value
 Using function keyword
 Declaration (named)
 Expression (anonymous)
 Using function constructor
 Object Construction
(won’t be covered in this course)
perform
actions only
(define it before invoking it)

35. Which function declaration technique was
used in the following example?
A. Named: with function keyword in a
declaration statement
B. Anonymous: performing actions, no
return value
4/3/2020 M4 - Functions 35

36. Which function declaration technique was
used in the following example?
A. Named: in a declaration statement,
with a return value
B. Anonymous: with function keyword in
an expression
4/3/2020 M4 - Functions 36

37. 4/3/2020 M4 - Functions 37
M4 Functions –User Defined
Named Function: Declaration statement
 5 Considerations
indent
indent
Part 1 Header:
keyword, name, parameters
Part 2:
Body
1.what needs to be done ?
2.what/if it will be named ?
3.how it will accomplish its task ?
4.what inputs it requires (if any) ?
5.what output it produces (if any) ?
example
f(..) {..}
header body

38. 4/3/2020 M4 - Functions 38
M4 Functions –User Defined
Named Function: Example
#2 the NAME
#3 the TASKs
#1 the NEEDs
#4 the INPUT
#5 the OUTPUT
1.what needs to be done ?
2.what it will be named ?
3.how it will accomplish its task ?
4.what inputs it requires (if any) ?
5.what output it produces (if any) ?

39. 4/3/2020 M4 - Functions 39
M4 Functions – Invoking Functions
Similar to how built-in functions are called
 System invoked – by event handlers,
for Anonymous function
 Statements inside the function are executed only
when “something” invokes it; code or system
 Code invoked: by “you”, for Named
function; with or without parameters
(expression or assignment statement)

40. 4/3/2020 M4 - Functions 40
<!DOCTYPE html>
<html lang = "en">
<head>
<title>CWMD2601 – Scripting</title>
<meta charset = "utf-8" />
<!—enter your title info-->
</head>
<link rel="stylesheet" href="M2 Exercise.css" />
<h1>Module 2 Assignment0 -Extended Greeting</h1>
<body>
<label for = "name">NAME:</label>
<input type="text" id="name" size="15">
<label for = "program">PROGRAM:</label>
<input type="text" id="program" size="30" >
<p id = "greeting">Your personal greeting will display here</p>
<button id = "greet">
Display Greeting
</button>
<script src=“script.js"></script>
</body>
</html>
// creates a personalized greeting
document.getElementById('greet').onclick = function () {
// get user's name from the text field
let userName = document.getElementById('name').value;
// get user's name from the text field
let programName = document.getElementById('program').value;
// greet user by name in the document
document.getElementById('greeting').textContent
= 'Hello ' + userName + '. Hope you are enjoying the ' +
programName + ' program!';
document.getElementById('greeting').style.color = 'red';
document.getElementById('greeting').style.backgroundColor =
'yellow';
}
index.html
script.js
M2 Greeting Exercise –Anonymous Function

41. 4/3/2020 M4 - Functions 41
M4 Functions –User Defined Functions
Named Function: Exercise
 Modify Your M2 Program with Named Function
anonymous and system invoked
named and system invoked

42. 4/3/2020 M4 - Functions 42
M4 Functions – Invoking Functions (Named)
Parameters (Input)
 Arguments – values passed to the parameters; literals,
variables, or expressions
 Expressions - first evaluated, then the values are passed to
the function
 Variables – only it’s values are passed, original variables will
not change, try the following:
1.what needs to be done ?
2.what it will be named ?
3.how it will accomplish its task ?
4.what inputs it requires (if any) ?
5.what output it produces (if any) ?
f(..) {..}
header body

43. 4/3/2020 M4 - Functions 43
M4 Functions –User Defined Functions
Anonymous
// creates a personalized greeting
document.getElementById("greet").onclick = function () {
// get user's name from the text field
var userName = document.getElementById('name').value;
// greet user by name in the document
document.getElementById('greeting').textContent
= 'Welcome ' + userName + '!';
};
Recall that we used a custom function when we coded the
greeting script:
 The function had no name, as an expression:
syntax: function (parm1, parm2) {..statements..}
 It was invoked by event handlers for onclick button
f(..) {..}
header body

44. 4/3/2020 M4 - Functions 44
M4 Functions – Invoking Functions (Named)
Return (Output)
 Must exit with a return statement
if an output value is expected
return expression;
1.what needs to be done ?
2.what it will be named ?
3.how it will accomplish its task ?
4.what inputs it requires (if any) ?
5.what output it produces (if any) ?
literal value, variable or
calculation
back to the calling
statement, and continue
 Use Console to test the following with parameters: -1, 0,
1, Infinity, –Infinity
f(..) {..}
header body

45. 4/3/2020 M4 - Functions 45
M4 Functions – Invoking Functions (Named)
Exercise –user invoked, with parameters
Use a Console to test the convertToCentigrade function. Note that
the return value from a function can be assigned to a variable or
consumed directly as in the alert.

46. 4/3/2020 M4 - Functions 46
M4 Functions – Variable Scopes
Scope - a variable property, describes which part
of the program can see/use it
 global – declared outside of any function (or
code block)
 local – aka function scope, declared inside
and only be used within the function
 let – instead of var, cleared some of the confusions
 Try the followings in Console
f(..) {..}
header body

47. 4/3/2020 M4 - Functions 47
M4 Functions – User Defined Functions
Summary
 Named functions – declaration, for re-use & modularity
 Names must match in the declare and call statements
 Anonymous functions – expression (no name), for modularity
only, e.g. element.addEvent.Listener(“event” , function(){…..})
 Return -can perform just actions or return values, or both
 Parameters are optional, but must match the calling
statement; the right order and type
 let instead of var
 The “five things” to consider
1.what needs to be done ?
2.what it will be named ?
3.how it will accomplish its task ?
4.what inputs it requires (if any) ?
5.what output it produces (if any) ?
f(..) {..}
header body

48. Which of the following declaration statement
is to define a named function?
A. function=myFunction(){..}
B. function myFunction(){..}
C. function:myFunction(){..}
D. let function=myFunction(){..}
4/3/2020 M4 - Functions 48
f(..) {..}
header body
myFunction

49. With JavaScript how do you call a function
named "myFunction"?
A. call function myFunction()
B. call myFunction()
C. myFunction()
D. x = myFunction()
4/3/2020 M4 - Functions 49
f(..) {..}
header body
myFunction,
invoked by
• System or
• User

50. Inside the process symbol of the flow chart, can
there be another flowchart ? for modulization.
A. True
B. False
4/3/2020 M1 – The Process of Programming 50
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)

51. Is it possible to nest functions in JavaScript?
A. True
B. False
4/3/2020 M4 - Functions 51
f(..) {..}
header body

52. A. True
B. False
4/3/2020 M4 - Functions 52
plus() is a nested function
f(..) {..}
header body
Same as counter = counter + 1;

53. Which technique is used to define function add()?
A. Anonymous
B. Named
C. Constructor
4/3/2020 M4 - Functions 53

54. What is the value of total?
A. 0
B. 1
C. 2
D. None of the above
4/3/2020 M4 - Functions 54

55. Which of the following is a valid function
definition?
A. function myFunc(arg1,arg2) { }
B. func myFunc = (arg1 as string,
arg2 as int) { }
C. function myFunc(arg1, arg2):
4/3/2020 M4 - Functions 55
f(..) {..}
header body

56. Can you assign a anonymous function to a
variable?
A. True
B. False
4/3/2020 M4 - Functions 56
variable value ;
expression
Operators
arithmetic
string
comparison
logical
number
string
Boolean
null
undefined
object/??/array
HINT: Assignment Statement

57. How do you assign an anonymous function to
a variable?
A. let myFunction = function() { };
B. let myFunction = func() { };
C. let myFunction = func({});
4/3/2020 M4 - Functions 57
variable value ;
expression
operators
arithmetic
string
comparison
logical
number
string
Boolean
null
undefined
object/function/array

58. Sending values to the parameters (aka input to
the function) of a called function is called passing
arguments_.
A. True
B. False
4/3/2020 M4 - Functions 58
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
output
functions
f(..) {..}
header body

59. What statement is to return a value to the
place that called the function?
A. déclaration (let, var, function)
B. assignment statement
C. return
4/3/2020 M4 - Functions 59
f(..) {..}
header body

60. Parameters in a function definition are placed
within __________ .
A. braces
B. parentheses
C. double quotes
D. single quotes
4/3/2020 M4 - Functions 60
Hint:

61. Given the following code, what does myFunc()
return?
A. foobar
B. NaN
C. undefinedundefined
D. An error is thrown because of illegal
out of scope access
E. foo + bar
4/3/2020 M4 - Functions 61

62. Given the followings code, what does myFunc()
return?
A. 0
B. 5
C. 10
D. Undefined
E. NaN
4/3/2020 M4 - Functions 62

63. Given the followings code, what is the value of x
after myFunc is called?
A. 0
B. 5
C. 10
D. Undefined
E. NaN
4/3/2020 M4 - Functions 63
HINT: When invoking a function with parameters,
only their values are passed as arguments

64. If a function doesn’t explicitly use the “return”
operator, what will the return value be when the
function is invoked?
A. null
B. undefined
C. false
D. NaN
4/3/2020 M4 - Functions 64
f(..) {..}
header body

65. What will be returned after invoking `foo` ?
A. 7
B. 10
C. undefined
D. null
E. foo
4/3/2020 M4 - Functions 65
f(..) {..}
header body

66. What is alerted after function b is invoked?
A. 2
B. 1
C. 10
D. 3
4/3/2020 M4 - Functions 66
f(..) {..}
header body
HINT: arguments is an array storing the input values.
Not yet covered, try it !

67. What value is passed to function myFunction as
the argument?
myFunction( ‘5’);
A. ‘5’ (string)
B. 5 (number)
C. NaN
4/3/2020 M4 - Functions 67
f(..) {..}
header body

68. How can you get the value type of arguments
passed to a function?
A. using typeof() operator
B. using getType() function
C. Both of the above.
D. None of the above.
4/3/2020 M4 - Functions 68
f(..) {..}
header body

69. With the following statements, what is in the
console?
A. Number
B. String
C. Boolean
D. None of the above
4/3/2020 M4 - Functions 69
f(..) {..}
header body

70. What is alerted after function b is invoked?
A. Number
B. String
C. Boolean
D. None of the above
4/3/2020 M4 - Functions 70
f(..) {..}
header body

71. Guess what is alerted after function b is invoked?
A. 1
B. 2
C. 3
D. 5
4/3/2020 M4 - Functions 71
f(..) {..}
header body

72. Which of the following type of variable is visible
and accessible everywhere in your JavaScript
code?
A. global variable
B. local variable
C. Both of the above.
D. None of the above.
4/3/2020 M4 - Functions 72
f(..) {..}
header body

73. List all the global variables in the following program?
A. total and counter
B. total only
C. counter only
D. none
4/3/2020 M4 - Functions 73
f(..) {..}
header body

74. List all the local variables in the following program ?
A. total and counter
B. total only
C. counter only
D. none
4/3/2020 M4 - Functions 74
f(..) {..}
header body

75. What is alerted?
A. Undefined
B. 3
C. Invalid JavaScript
4/3/2020 M4 - Functions 75

76. What is alerted?
A. Undefined
B. 3
C. Invalid JavaScript
4/3/2020 M4 - Functions 76

77. What is alerted ?
A. ‘hello’
B. nothing
C. ‘Invalid JavaScript’ error message
4/3/2020 M4 - Functions 77

78. What is alerted?
A. ‘hello’
B. nothing
C. ‘Invalid JavaScript’ error message
4/3/2020 M4 - Functions 78
f(..) {..}
header body

79. The followings have the same result?
A. True
B. False
4/3/2020 M4 - Functions 79

80. The following produce the same result?
A. True
B. False
4/3/2020 M4 - Functions 80

81. The following produce the same result?
A. True
B. False
4/3/2020 M4 - Functions 81

82. What is alerted?
A. both are number
B. both are string
C. both are Boolean
D. both are function
4/3/2020 M4 - Functions 82

83. The following codes produce the same result.
A. True
B. False
4/3/2020 M4 - Functions 83

84. 4/3/2020 M4 - Functions 84
M4 Functions –User Defined Functions
Best Practices
 Placement all function definitions in .js
file and insert “..src=“ statement right
above </body> tag
 Declare all global variables first, (using
let) then function definitions, then the
invoking statements
 Name rules for function and parameter are same as variable,
e.g. cannot use JS reserved words, space are not allowed, …etc.
 Use lower case verb for functions that perform actions, e.g.
calcTax, displayDate

85. let convertToCentigrade =
degFahren => 5/9 * (degFahren - 32);
ES6 introduced a shorter, more compact way to create a JavaScript
function. Known as arrow functions because their syntax uses =>
they are becoming increasingly common. The way they are coded
again borrows from how functions in mathematics are written.
Here's the temperature conversion convertToCentigrade recoded as
an arrow function. Note that much of the previous syntax (like
return) is no longer needed. Use the Console to test this out.
T4 – Functions
Because arrow functions behave a little differently than a normal
function declared with function we will NOT use them in this course.
They are presented as an FYI, especially for those in CWD.
M4 Functions –User Defined Functions (FYI)
Arrow Functions in ES6

86. 4/3/2020 M4 - Functions 86
M4 Functions –User Defined Function
Summary
Type
 Built-In: Core, BOM & DOM
 User- Built: own or others
User Built
 Techniques: declaration,
expression & constructor
 Named vs Anonymous
Invoke/Exit
 System and code invoked
 Parameters: literals,
variables and expressions
 “return” statement
with/without value(s)
Scopes
 Global vs Local

87. 4/3/2020 87
M1, M2, M3 and M4 Takeaways
M1 -The
Programming
Process
IPO
1. INPUT
2. OUTPUT
3. DECLARATION
4. EXPRESSION
5. DECISION
6. LOOP
variables values expressions
Algorithms
PC, FC
Statements
IPO
I&D Web
Page
PROGRAMMING
RUN
M3 – Variables,
Values,
Expressions
input output
process
How Data are stored ?
lobal vs local variables
declaration using “let”
What are the Data types ?
number
string
Boolean
null
undefined
functions/arrays/objects How Data are computed?
assignment
arithmetic, string operators
comparison operator
mixed operator
IPO – Data Processing
M4 – Functions
built-in, user defined
scope, invoke, return
M4 - Functions
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
output
M2 – Getting Started
with JavaScript
DOM
HTML
(structure, ”look”)
CSS
(presentation,
“feel”)
JS
(behavior, “act”)
 IO statements
 comments
 debug
 good practices
f(..) {..}
header body
arguments
return
properties methods events
Object

88. 4/3/2020 M4 - Functions 88
M1, M2, M3 and M4 Takeaways

89. 4/3/2020 M4 - Functions 89
M4 Functions – Assignment (10%)
 See “M4 Home Assignment” in DC Connect