No site found for codelikethis.herokuapp.com; using CodeLikeThis content.


 Slides

Functions

  • a variable is a name for a chunk of data
  • a function is a name for a chunk 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 a not very useful 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

Rant!!!

Here is a function that takes an "opinion" as input, and as output returns a VERY FORCEFUL statement of that opinion.

function rant(opinion) {
  let strongOpinion = opinion.toUpperCase();
  return strongOpinion + '!!!';
}

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

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

Lab: Capitalize

Please write a function that capitalizes a word.

For instance,

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

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'));

The variables firstLetter and restOfWord are called local variables and can only be used inside the capitalize function.

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 rant(opinion) {
  let strongOpinion = opinion.toUpperCase();
  return strongOpinion + '!!!';
}

let feeling = "I feel great";
let strongFeeling = rant(feeling);
Outside the function Inside the function Value
feeling opinion "I feel great"
strongOpinion "I FEEL GREAT"
strongFeeling "I FEEL GREAT!!!"

Four Function Syntaxes

WARNING: JavaScript has many ways to define a function.

This is the standard, original, retro function syntax:

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

The following are all roughly equivalent to the above:

let add = function(x,y) { return x + y; };
let add = (x,y) => { return x + y; };
let add = (x,y) => x + y;
  • Note that these new forms are anonymous:
    • 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