Functions

Remember that a variable is a name for a piece of data

A function is the name for a piece of code

Why would you want to name a chunk of code?

Perhaps...

• you have some code you want to run again and again
• you want to do the same operation on different values
• you want to keep your code organized

Function example

Here's an example function:

function add(x, y) {
  let sum = x + y;
  return sum;
}

• function means "define a function"
• add is the name of the function
• x, y are the parameters of the function (also called arguments)
• sum is a local variable of the function
• sum is also the function's return value because of the magic word return

Call Me, Maybe

You call a function by its name, plus parentheses:

function add(x, y) {
  let sum = x + y;
  return sum;
}

add(2, 3)   // returns 5
add(12, 30) // returns 42

Lab: One Nation, Divisible

One number is divisible by another if you divide them and the remainder is 0.

Write a function called divisible that takes two numbers, and returns true if the first number is divisible by the second number, and false otherwise.

divisible(100, 10)    //=> true
divisible(100, 7)     //=> false
divisible(3333, 11)   //=> true
divisible(99, 12)     //=> false

Divisible solution

if(/*this expression evaluates true*/) {
  //do this
} else {
  //otherwise do this
}

function divisible(operator, operand) {
  if(operator % operand) {
    return true
  } else {
    return false
  }
}

divisible(100, 10) // => true

Shouter

Here is a function that takes some String as input, and as output returns a shouted version of that String.

function shouter(someString) {
  let loudString = someString.toUpperCase();
  return loudString + '!!!';
}

shouter('i like pizza');  => 'I LIKE PIZZA!!!'

The variable loudString is called a local variable and can only be used inside the function.

Lab: Capitalize

Please write a function that returns a Capitalized version of a word. Only uppercase the first letter of the word.

For example:

capitalize('tomato') returns 'Tomato'

A solution is on the next slide, but try to solve it on your own. Remember that there are many string operations available to you...

Capitalize Lab Solution

Useful String Methods

String Manipulation

let firstLetter = string[0]

let restOfString = string.slice(1)

function capitalize(word) {
  let firstLetter = word[0];
  let restOfWord = word.slice(1);
  return firstLetter.toUpperCase() + restOfWord.toLowerCase();
}

console.log(capitalize('smith'));
console.log(capitalize('MACGUYVER'));

Passing Variables to Functions

When you pass a variable to a function, that variable's value is assigned to a parameter.

The variable and parameter names do not need to match!

function shouter(someString) {
  let loudString = someString.toUpperCase();
  return loudString + '!!!';
}

let feeling = "I feel great";
let strongFeeling = shouter(feeling);

Four Function Syntaxes

WARNING: JavaScript has many ways to define a function.

Function declaration syntax

function add(x,y) { return x + y; }

The following are all roughly equivalent to the above:

Function Expression

let add = function(x,y) { return x + y; };

Arrow Function Expression

let add = (x,y) => { return x + y; };

Arrow Function Expression with implicit return value

let add = (x,y) => x + y;

• Note that these new forms are anonymous, meaning there is no name between function and (x,y)
  • the name of the function is the name of the variable that points to it

LAB: more about functions

• FreeCodeCamp

  • start with the challenge Write Reusable JavaScript with Functions
  • continue through the challenge Assignment with a Returned Value

• Read Eloquent JavaScript chapter 3