A function is a machine. In most of your future work, you'll be working with functions you didn't write and probably won't have time to read. You'll put something in it; it will you something else back. What happens inside the machine should not be of your concern, as long as you get back what you want.

Let's pretend we have a function that does long drinks, defined as follows:

function makeLongDrink(liquour, mixer, garnish) {
  var result = "here's a glass of " + liquour;
  result += " and " + mixer;
  result += " garnished with a slice of " + garnish; 
  return glass;
}

... make for quite a sloppy bartender, but let's forgive it for now.

The function just defines the process. It is a machine, and it's not activated yet. liquour, mixerand garnish- the function parameters - are just placeholders which will be used inside the machine.

To get a Moscow Mule you would call it like this:

var drink = makeLongDrink('vodka', 'ginger beer', 'cucumber');

This way you tell the machine to take 'vodka' as a liquour, 'ginger beer' as a mixer, "cucumber" as garnish. The machine won't need to know the specific of these ingredients; it will always apply the same process.

In this case you'll have the string "here's a glass of vodka and ginger beer garnished with a slice of cucumber" as a result - the return value, now assigned to the variable drink. Copy the two snippets in a javascript console and see the result if you have a minute to spare; it helps with memorising things.

Other things to notice: those values are only valid in the machine itself (it's not always so clear but for now it's enough).

This makes total sense: the fact that I give the machine "vodka" as a liquour does not mean vodka is the only liquour! Look (and maybe copy and paste each part in sequence in a javascript console):

// Part one
var liqour = 'gin';
console.log('Outside the function! console.log(liquour) will output "gin"');
console.log(liquour);

// Part two
console.log('This function definition won\'t output anything! To prove it I\'ll write something right after');

function makeLongDrink(liquour, mixer, garnish) {
  var result = "here's a glass of " + liquour;
  result += " and " + mixer;
  result += " garnished with a slice of " + garnish;

                                  // This is the line that would print
  console.log('liquour is now:'); // the long drink description
  console.log(liquour);           // once the machine is activated
  console.log('... but just inside our function, in order for us to make this:');
  console.log(result)
  return glass;
}

// Part three
console.log('See? We just prepared a machine; didn\'t activate it yet.');
console.log('Let's do it, with a cuba libre');

// Part four
var drink = makeLongDrink('rum', 'cola', 'lime');
console.log('This up here ^ is the result of us calling the function.');

// Part five
console.log('Now, despite `liquour` being "rum" within the machine...');

// Part six
console.log('It is still "gin" outside:');
console.log('liquour: ' + liquour);

So:

• The names of the parameters are just placeholders used within the function;
• Once the function is called, the value passed in the spot of the parameter names get assigned to variables of the same name;
• This assignment has no effect outside the function.

Now it should be easy to recognise functions you met before: for instance, the formula to calculate the area of a rectangle is:

width * height

Nobody assigned width or height! This is just the description of a process.

A javascript rectangle area calculator could be:

function rectangleArea(width, height) {
  return width * height;
}

... and in fact, if we tried to call it:

rectangleArea(5,6);

... we'd have the expected 30, without assigning the width and height variables outside.