Functions in JS

Functions: Reusable Machines

image credit: By Wvbailey [Public domain], via Wikimedia Commons 

f(x)
f(x)f(x)

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?

f(5) = 25
f(5)=25f(5) = 25

What is the result we want?

f(5) = 25
f(5)=25f(5) = 25
f(10) = 100
f(10)=100f(10) = 100

What is the result we want?

f(x) = x^2
f(x)=x2f(x) = x^2

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,413

More from LizTheDeveloper