A presentation on JavaScript functions and examples demonstrating how to use them.

1. FUNCTIONS
W H AT Y O U N E E D TO K N O W I N T H E B E G I N N I N G .
… A N D M E T H O D S

2. BREAK INTO TECH SUMMIT
- WED, JANUARY 11TH

3. Follow Me
Twitter: @christopherhuie
LinkedIn: Chris Huie
Facebook: Chris Huie
Instagram: @huiestyle
Codepen: @ChrisHuie
Check Out My Meetups
Meetup: Learn to code Phoenix
Meetup: Learn data science Phoenix
Chris Huie
Developer Evangelist at Galvanize
Email: christopher.huie@gmail.com
Phone: 602-750-6878

4. •Functions are pretty much a set of instructions.
There’s really not much more to it than that.
•They are fantastic for keeping your code DRY
(Don’t Repeat Yourself).
•They’re also used all over the Javascript syntax
in combination with other things, so they are
important to learn.

5. FUNTION SYNTAX
function name( arguments ) {
statements;
}

6. NAMED VS ANONYMOUS FUNCTIONS
function() {
return “something” + “ interesting”;
}
Named
function alertSomething() {
return alert(‘something’);
}
alertSomething();
Anonymous
They do the same thing, but they’re just referred to differently inside the code.

7. A FUNCTION IS LIKE A RECIPE…
• You probably make sandwiches all the time and, if you don’t, you should. They’re
delicious.
• Making a sandwich consists of, for the most part, taking two pieces of bread, piling
things on the bottom piece of bread, then putting on the top piece.
• For the scope of this conversation, we’re going to assume that all sandwiches are
composed of two things: bread and some combination of ingredients.
• NOTE: This is partially pseudo-code.function
makePB&JSandwich() {
add PB&J
add top bread piece
return sandwich
}
makePB&JSandwich();

8. SANDWICHES…PART 2
• While that first function that we saw would be somewhat useful, let’s try to make
something a little more dynamic or, rather, useful in more than one instance.
• Let’s make a function that let’s you create a sandwich with mayo and any kind of meat
that you want. The key here is, how do we tell the function what kind of meat to add…
function
makeSandwich(meat) {
add mayo
add meat
add top bread piece
return sandwich
}
makeSandwich(‘turkey’);
• Notice that we now have something inside the parentheses called “meat”. That is
called a parameter. That means that whatever you put inside the parentheses is going
to be what the ”meat” reference next to “add” will turn into. The function call below
says “turkey”, so you just added mayo, turkey, added the top bread piece, and returned
the sandwich!

9. SANDWICHES…PART 3
• Let’s make a function that let’s you create a sandwich with any kind of spread that you
want, too. The key here is, how do we tell the function what kind of spread to add…
function makeSandwich(meat,
spread) {
add spread
add meat
add top bread piece
return sandwich
}
makeSandwich(‘turkey’, ‘mustard’);
• Notice that we now have something inside the parentheses called “spread”. All you
have to do now is replace that with whatever spread you want, be it mayo, mustard, or
whatever. Is it really that easy, you ask? Pretty much.

10. REAL CODE EXAMPLES
• Ok, now that we gave you an idea of what happens in a function, let’s take a look at
what you might see in a more real life example. Let’s do an example with no
parameters. In this function, we’re going to fire an alert that says ‘something’.
function alertSomething() {
return alert(‘something’);
}
alertSomething();
• What if we want to tell the function what exactly to alert? How do we do that?
function alertSomethingInteresting(str) {
return alert(str);
}
alertSomethingInteresting(’something interesting’);

11. YOU MENTIONED “METHODS”…
• So…it depends on who you talk to, but functionally (pun intended), functions and
methods are the same, they’re just in a different place. Methods are functions that are
attached to objects and functions are what they’re called everywhere else.
var person = {};
person.first_name = “Chris”;
person.last_name = “Huie”;
person.full_name = function() {
return person.first_name + “ “ + person.last_name;
}
person.full_name(); // ==> “Chris Huie”