Variables & Functions in Javascript (JS)
By: Destry Gustin
Tags: Javascript Tips, JavaScript, Development

Functions

A function is like a machine that has an input and an output.

Back to baking cookies…

When you bake cookies, you do the following tasks:

Combine ingredients

Scoop ingredients onto a baking sheet

Bake in an oven

Eat them for dinner (true story)

Each one of these tasks are functions that occur to make a cookie. If we had an assembly line to make cookies, we could have one machine that combines ingredients, one machine to put the combined ingredients onto baking sheets, one machine (an oven) that bakes the cookies, and a bunch of happy workers that eat the cookies. — Sorry machines, no cookies for you.

We write a function using special syntax that indicates you are declaring a function and assign it a name. Believe it or not, this function actually gets stored in RAM (like a variable does), so we name it to keep track of where the hoarder put it.

function combineIngredients() = {

//do some stuff to combine the ingredients

}

Parameters

Parameters are inputs to a function

Because a function has inputs and outputs (like ingredients and cookie batter). We tell functions what those inputs are by declaring parameters. Parameters are really just variables (or more specifically, the name of a place in memory like 0x407).

function combineIngredients(ingredient1, ingredient2, ingredient3){

// the parameters in this function are ingredient1, ingredient2,

// and ingredient 3

}

When we pass in parameters to a function, we are telling the function to use the value in the memory location (0x407, 0x1021, 0x3587).

For example, we declared some variables earlier firstIngredient, secondIngredient, thirdIngredient, etc… we can now pass those variables into the function so that the machine can combine them.

combineIngredients(firstIngredient, secondIngredient, thirdIngredient);

When I call the function combineIngredients and pass in the variable (aka the memory location), that function will use the values that are stored in memory at that specific location.

Looking at the function in relation to the memory, it would be something like this: function combineIngredients( value in memory location 1, value in memory location 2, value in memory location 3){ combine the ingredient in memory location 1 with the

ingredient in memory location 2 and the

ingredient in memory location 3

}

Putting it all together…

Writing a function that actually combines ingredients and outputs something would look like this

function combineIngredients(ingredient1, ingredient2, ingredient3){

var batter = ingredient1 + ingredient2 + ingredient3;



return batter;

}

When I call the function using the variables we defined earlier using

combineIngredients(firstIngredient, secondIngredient, thirdIngredient);

The function performs the action to combine the ingredients that are stored in memory as we defined early.

combine the 2 cups of flour with the <-- firstIngredient

1 cup of sugar and the <-- secondIngredient

half of tbsp of baking soda <-- thirdIngredient

The way the function does this, is by creating a new variable that is specific to the function and then executing the operations within the function.

var ingredient1 = firstIngredient;

var ingredient2 = secondIngredient;

var ingredient3 = thirdIngredient; //do something to combine the ingredients such as

var batter = ingredient1 + ingredient2 + ingredient3;

Returning values from functions

Often times we want to return a value from a function (i.e. the output of the machine) so that we can use that value later.

** Note I am saying value not variable **

We do this by using the keyword return

return batter; // returns the value that is in the memory location that the variable batter refers to - it is not returning the memory location

putting this all together, the function and execution of the function would be updated to

function combineIngredients(ingredient1, ingredient2, ingredient3){

var batter = ingredient1 + ingredient2 + ingredient3;



return batter;

} var chocolateCookieBatter = combineIngredients(firstIngredient, secondIngredient, thirdIngredient);

Now that I have a variable defined that assigns the value of combinedIngredients, I can use that in a later function.