Functions in JS
Functions: Reusable Machines
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Functions: Reusable Machines
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Functions: Reusable Machines
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Code goes here
Functions: Reusable Machines
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Code goes here
Arguments go in
Functions: Reusable Machines
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Code goes here
Arguments go in
Results come out
Engineering is Planning, then Executing
- Why do we need a machine?
- What is the result we want?
- What information do we have to start with?
Why do we need a machine?
To get some output, based on some input
To get some output, based on some input
Using the same method each time
Why do we need a machine?
To get some output, based on some input
Using the same method each time
So we have predictable outputs from the same inputs
Why do we need a machine?
What is the result we want?
What is the result we want?
What is the result we want?
What is the result we want?
var result = x * x;
What information do we have to start with?
What information do we have to start with?
f(x) = x * x
What information do we have to start with?
f(x) = x * x
What information do we have to start with?
Our function takes x in order to get us the answer we want!
f(x) = x * x
What we're aiming for
function square(x) {
var result = x * x;
return result;
}
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Code goes here
Arguments go in
Results come out
Syntax Breakdown
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Code goes here
Arguments go in
Results come out
console.log("Hello from inside the function!");
Statements
Syntax Breakdown
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Code goes here
Arguments go in
Results come out
console.log("Hello from inside the function!");
Statements
var x = 5 + 5;
var y = x + 5;
console.log(y);
Syntax Breakdown
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Code goes here
Arguments go in
Results come out
Syntax Breakdown
console.log("Hello from inside the function!");
Statements
var x = 5 + 5;
var y = x + 5;
console.log(y);
var slideContent = "Any kind of statement!";
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Code goes here
Arguments go in
Results come out
Syntax Breakdown
console.log("Hello from inside the function!");
Statements
var x = 5 + 5;
var y = x + 5;
console.log(y);
var slideContent = "Any kind of statement!";
var result = x * x;
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Code goes here
Arguments go in
Results come out
We have our insides...
var result = x * x;
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Code goes here
Arguments go in
Results come out
Create the function
function f() {}
var f = function() {}
Function Syntax
f
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Code goes here
Arguments go in
Results come out
How to create
Keyword
function f() {}
var f = function() {}
f
image credit: By Wvbailey [Public domain], via Wikimedia Commons
How to create
Code goes here
Arguments go in
Results come out
f
Name the function
function f() {}
var f = function() {}
image credit: By Wvbailey [Public domain], via Wikimedia Commons
How to create
Code goes here
Arguments go in
Results come out
f
Add parentheses, to put our inputs in
function f() {}
var f = function() {}
image credit: By Wvbailey [Public domain], via Wikimedia Commons
How to create
Code goes here
Arguments go in
Results come out
f
Add curly braces, to define where it starts and ends
function f() {}
var f = function() {}
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Arguments go in
Results come out
Put them together
function square() {
var result = x * x;
}
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Functions without inputs!
function sayHello() {
console.log("Hello everyone!");
}
function whatIsToday() {
console.log("Well, today definitely ends in y!");
}
function aUsefulFunction() {
console.log("You don't have to be useful to be valuable");
console.log("but it helps.");
}
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Calling functions
function sayHello() {
console.log("Hello everyone!");
}
function whatIsToday() {
console.log("Well, today definitely ends in y!");
}
function aUsefulFunction() {
console.log("You don't have to be useful to be valuable");
console.log("but it helps.");
}
sayHello()
> "Hello everyone!"
whatIsToday()
> "Well, today definitely ends in y!"
aUsefulFunction()
aUsefulFunction()
aUsefulFunction()
aUsefulFunction()
> "You don't have to be useful to be valuable"
> "but it helps."
> "You don't have to be useful to be valuable"
> "but it helps."
> "You don't have to be useful to be valuable"
> "but it helps."
> "You don't have to be useful to be valuable"
> "but it helps."
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Code goes here
Arguments go in
Results come out
Inputs
function square() {
var result = x * x;
}
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Code goes here
Arguments go in
Results come out
Inputs
Parameters
function increment(x) {
x = x + 1;
console.log(x);
}
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Code goes here
Arguments go in
Results come out
Inputs
Parameters
function increment(x) {
x = x + 1;
console.log(x);
}
Multiple Parameters
function difference(minuend, subtrahend) {
var diff = minuend - subtrahend;
console.log(diff);
}
Testing our machines
function difference(minuend, subtrahend) {
var diff = minuend - subtrahend;
console.log(diff);
}
Copy this function:
Testing our machines
function difference(minuend, subtrahend) {
var diff = minuend - subtrahend;
console.log(diff);
}
Copy this function:
Go to repl.it
Testing our machines
function difference(minuend, subtrahend) {
var diff = minuend - subtrahend;
console.log(diff);
}
Copy this function:
Run it like so:
difference(5,3);
difference(10,5);
difference(100, 200);
Testing our machines
Run it like so:
difference(5,3);
difference(10,5);
difference(100, 200);
Results!
> 2
> 5
> -100
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Arguments go in
Results come out
Hook up the inputs
function square(x) {
var result = x * x;
}
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Arguments go in
Results come out
Hook up the inputs
function square(x) {
var result = x * x;
}
square(5);
square(10);
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Arguments go in
Results come out
Hook up the inputs
function square(x) {
var result = x * x;
}
square(5);
square(10);
> undefined
> undefined
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Outputs
Code goes here
Results come out
function square(x) {
var result = x * x;
}
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Outputs
function square(x) {
var result = x * x;
return result;
}
The return keyword
Code goes here
Results come out
function square(x) {
var result = x * x;
}
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Outputs
function square(x) {
var result = x * x;
return result;
}
The return keyword
Code goes here
Results come out
function square(x) {
var result = x * x;
}
Calling our function
square(5)
square(10)
image credit: By Wvbailey [Public domain], via Wikimedia Commons
Outputs
function square(x) {
var result = x * x;
return result;
}
The return keyword
Code goes here
Results come out
function square(x) {
var result = x * x;
}
Calling our function
square(5)
square(10)
Results
> 25
> 100
Test Yourself!
- Start with by writing a function that greets you
- Modify your function so that it can greet anyone, using a parameter
- Create a function that adds two numbers together, from arguments, and then prints the answer (call it addTwo)
- Modify your function so that it can be called as an argument to itself, using the return statement
- Create a new function that calculates the average of 6 numbers(call it avg6), using the addTwo function (** use 5, 7, 9, 4, 5, 6 - you should get 6 as a result **) and returns them
- Calculate the average of 18 numbers (use 5, 7, 9, 4, 5, 6, 19, 22, 33, 26, 27, 30, 44, 44, 45, 44, 46, 41 which is 25.389) and print it using console.log(). Use only function calls, with no variable assignment outside of the function calls. You may need to create another function for this!
Functions in JS
By LizTheDeveloper
Functions in JS
- 1,416