Functions in JS

Functions: Reusable Machines

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

Functions: Reusable Machines

Functions: Reusable Machines

Code goes here

Functions: Reusable Machines

Code goes here

Arguments go in

Functions: Reusable Machines

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;
}

Code goes here

Arguments go in

Results come out

Syntax Breakdown

Code goes here

Arguments go in

Results come out

console.log("Hello from inside the function!");

Statements

Syntax Breakdown

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

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!";

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;

Code goes here

Arguments go in

Results come out

We have our insides...

var result = x * x;

Code goes here

Arguments go in

Results come out

Create the function

function f() {}

var f = function() {}

Function Syntax

f

Code goes here

Arguments go in

Results come out

How to create

Keyword

function f() {}

var f = function() {}
f

How to create

Code goes here

Arguments go in

Results come out

f

Name the function

function f() {}

var f = function() {}

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() {}

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() {}

Arguments go in

Results come out

Put them together

function square() {
    var result = x * x;
}

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.");
}

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."

Code goes here

Arguments go in

Results come out

Inputs

function square() {
    var result = x * x;
}

Code goes here

Arguments go in

Results come out

Inputs

Parameters

function increment(x) {
    x = x + 1;
    console.log(x);
}

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

Arguments go in

Results come out

Hook up the inputs

function square(x) {
    var result = x * x;
}

Arguments go in

Results come out

Hook up the inputs

function square(x) {
    var result = x * x;
}

square(5);
square(10);

Arguments go in

Results come out

Hook up the inputs

function square(x) {
    var result = x * x;
}

square(5);
square(10);

> undefined
> undefined

Outputs

Code goes here

Results come out

function square(x) {
    var result = x * x;
}

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;
}

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)

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