-
Notifications
You must be signed in to change notification settings - Fork 7
/
lecture-functions.html
132 lines (109 loc) · 5.94 KB
/
lecture-functions.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<head>
<title>AC Workshop - Lecture: Functions</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<div class="container">
<div class="container-inner">
<div class="left-sidebar">
<div class="home-anchor">
<h3><a href="index.html">Intro to Programming with JavaScript</a></h3>
</div>
<div class="navigation-links">
<div class="navigation-link-item"><a href="activity-logging.html">Activity: Logging</a></div>
<div class="navigation-link-item"><a href="lecture-variables.html">Lecture: Variables</a></div>
<div class="navigation-link-item"><a href="activity-variables.html">Activity: Variables</a></div>
<div class="navigation-link-item"><a href="lecture-arrays.html">Lecture: Arrays</a></div>
<div class="navigation-link-item"><a href="activity-arrays.html">Activity: Arrays</a></div>
<div class="navigation-link-item"><a href="lecture-conditionals.html">Lecture: Conditionals</a></div>
<div class="navigation-link-item"><a href="activity-conditionals.html">Activity: Conditionals</a></div>
<div class="navigation-link-item"><a href="assignment-webproposal.html">Assignment: Web App Proposal</a></div>
<div class="navigation-link-item"><a href="lecture-loops.html">Lecture: Loops</a></div>
<div class="navigation-link-item"><a href="activity-arraysadvanced.html">Activity: Arrays (Advanced)</a></div>
<div class="navigation-link-item"><strong><i><a href="lecture-functions.html">Lecture: Functions</a></i></strong></div>
<div class="navigation-link-item"><a href="activity-functions.html">Activity: Functions</a></div>
<div class="navigation-link-item"><a href="activity-fizzbuzz.html">Activity: Fizz Buzz</a></div>
<div class="navigation-link-item"><a href="teamchallenge.html">Team Challenge</a></div>
</div>
</div>
<div class="content">
<h1>Lecture: Functions</h1>
<p>
Almost no code lives in isolation. It's a bit silly that all the code you've written so far always runs on the input, and you have to change the code itself to try different values! The reality is that most code is written in such a way that it can reused for [effectively] an infinite number of inputs. We do this by using <code>functions</code>.
</p>
<pre><code>// This is a "function definition"
const myFirstFunction = function(arg1, arg2) {
// This function has TWO parameters.
// This is a "return statement"
return arg1 + arg2 / 2
}
myFirstFunction(1, 2) // These are "function calls." The arguments are 1 and 2.
myFirstFunction(2, 3)
myFirstFunction(10, 100)</code></pre>
<p>
There are some important keywords that we use when talking about functions:
</p>
<ul>
<li><b>Function definition</b>: The declaration and code that describes the function. In JavaScript, we use the <code>function</code> keyword</li>
<li><b>Parameters</b>: When defining a function, the paramenters are the inputs</li>
<li><b>Arguments</b>: When calling a function, the arguments are the input variables</li>
<li><b>Function Call</b>: Running or executing a function is referred to as a "function call" or "calling the function". In JavaScript (and in the vast majority of languages) this is done with parenthesis after the name of the function</li>
<li><b>Return value</b>: The value that the function evaluates to when it is called. Inside the function it is declared using the <code>return</code> keyword</li>
<li><b>Function signature</b>: The function name and parameters combined are what is called a "function signature"</li>
</ul>
<pre><code>const square = function(inputInt) {
return inputInt * inputInt
}
let result = square(2)
result = square(10)
// Now let's push our brains a bit:
result = square(result)
// And a bit more!
result = square(square(2))</code></pre>
<p>
The fact that we can chain functions is not a special feature of functions. Instead it's a peek into how "evaluation of expressions" work. In <code>square(square(2))</code> The argument to the outer call to square is the result of the evaluation of <code>square(2)</code> which is just <code>4</code>. In other words, you do <code>square(2)</code> first, and then call square again on the result of that inner function call.
</p>
<h2>Functions can call other functions</h2>
<p>
One very powerful tool of functions is the ability to call other functions. You can chain them, run them inside loops or conditionals, really anything you can imagine!
</p>
<pre><code>const sumOfSquares = function(x, y) {
return square(x) + square(y)
}
</code></pre>
<h2>Let's see it in action</h2>
<p>
Let's try migrating a couple of our interesting challenges from the last set of exercises into functions. We'll do the first one together:
</p>
<pre><code>const findLargestElement = function(inputArray) {
// This is the code you wrote earlier!
// Only now the "given" variable is explicitly an argument to the function
let largestElement = inputArray[0]
for (let i = 0; i < inputArray.length; i++) {
if (inputArray[i] > largestElement) {
largestElement = inputArray[i]
}
}
// ... and we can now return the result. Very neat!
return largestElement
}
// Now we can re-use this function for any input we want!
let result = findLargestElement([1,2,99,100,55,32,80])
</code></pre>
<h2>Now migrate the rest on your own</h2>
<ul>
<li>Build a simple array</li>
<li>Build a slightly more complicated array (double the index, odd/even indices)</li>
<li>Range of numbers <i>Note: this one takes TWO argument</i></li>
<li>Average value within an array</li>
</ul>
</div>
</div>
</div>
</body>
</html>