Javascript Function Syntax

Kyle Coberly

Follow this slide deck at http://slides.com/kylecoberly/deck-9

The Function Mystery Machine

Function Syntax

function myFunctionName(firstParameter, secondParameter){
    var calculation = firstParameter * secondParameter;
    return calculation;
}

var calculatedValue = myFunctionName(3, 3);

• function keyword

• name
• parameters
• curly braces
• body
• return statement
• invocation operator
• arguments

Function Syntax

function myFunctionName(firstParameter, secondParameter){
    var calculation = firstParameter * secondParameter;
    return calculation;
}

var calculatedValue = myFunctionName(3, 3);

function Keyword

• Means you're defining a function

Function Syntax

function myFunctionName(firstParameter, secondParameter){
    var calculation = firstParameter * secondParameter;
    return calculation;
}

var calculatedValue = myFunctionName(3, 3);

Name

• What you will use to call the function
• Must be unique
• Can't be a reserved word
• Conventionally uses camelCase in Javascript
• A more advanced function usage skips the name and is called an "anonymous function"
• The label on the Function Mystery Machine

Function Syntax

function myFunctionName(firstParameter, secondParameter){
    var calculation = firstParameter * secondParameter;
    return calculation;
}

var calculatedValue = myFunctionName(3, 3);

Parameters

• Parameters are inputs the function accepts
• Parameters are variables available to the function body
• Functions can have 0, 1, or many parameters
• If a function has 0 parameters, just use ()
• If a function has many parameters, separate with ,
• The funnel on the Function Mystery Machine

Function Syntax

function myFunctionName(firstParameter, secondParameter){
    var calculation = firstParameter * secondParameter;
    return calculation;
}

var calculatedValue = myFunctionName(3, 3);

Curly Braces

• Wrap around the function body
• Conventionally starts on the same line as the function keyword, name, and parameters
• Conventionally ends at the same indentation level as the start
• Doesn't end with a semicolon
• The case of the Function Mystery Machine

Function Syntax

function myFunctionName(firstParameter, secondParameter){
    var calculation = firstParameter * secondParameter;
    return calculation;
}

var calculatedValue = myFunctionName(3, 3);

Body

• The block of code you want to execute
• Has access to any parameters passed in and any variables declared outside of it
• The inside of the Function Mystery Machine

Function Syntax

function myFunctionName(firstParameter, secondParameter){
    var calculation = firstParameter * secondParameter;
    return calculation;
}

var calculatedValue = myFunctionName(3, 3);

Return Statement

• Part of the function body
• The output of the function
• Nothing after a return statement will run
• A body can have multiple return statements
• Can be an expression
• You can leave it out, but shouldn't
• Can be assigned to a variable
• The conveyor belt of the Function Mystery Machine

Function Syntax

function myFunctionName(firstParameter, secondParameter){
    var calculation = firstParameter * secondParameter;
    return calculation;
}

var calculatedValue = myFunctionName(3, 3);

Invocation Operator

• What calls, or "invokes" the function
• If the function has no arguments, is just ()
• If the function has arguments, they go inside
• The "on" switch for the Function Mystery Machine

Function Syntax

function myFunctionName(firstParameter, secondParameter){
    var calculation = firstParameter * secondParameter;
    return calculation;
}

var calculatedValue = myFunctionName(3, 3);

Arguments

• Go inside the invocation operator
• Multiple arguments are separated by commas
• Parameters are in the definition, arguments are in the invocation
• Order of arguments matches the order of the parameters
• The inputs for the function mystery machine

Group Review

Function Syntax - Group Review

function calculate3DArea(width, height, depth){
    var area = width * height * depth;
    return area;
}

Function Syntax - Group Review

function weirdWildFunction(){

    var self = this;
    var data = self.data;

    self.smallFunction(index);

    var nextindex = i+1;

    if (data.slides[nextindex){
        if (nextindex % 250 === 0){
            setTimeout(function(){               
                self.longFunction(nextindex);
            },0);
        } else {
            self.longFunction(nextindex);
        }

        return false;
    } else {
        return true;
    }

}

Function Syntax - Group Review

var basementArea = calculate3DArea(10, 20, 3);

Function Syntax - Group Review

var basementArea = calculate3DArea(10, 20, 3);

Function Syntax - Group Review

function calculate3DArea(width, height, depth){
    var area = width * height * depth;
    return area;
}

Function Syntax - Group Review

function calculate3DArea(width, height, depth){
    var area = width * height * depth;
    return area;
}

Function Syntax - Group Review

var basementArea = calculate3DArea(10, 20, 3);

Function Syntax - Group Review

var basementArea = calculate3DArea(10, 20, 3);

Function Syntax - Group Review

function calculate3DArea(width, height, depth){
    var area = width * height * depth;
    return area;
}

Function Syntax - Group Review

function calculate3DArea(width, height, depth){
    return width * height * depth;
}

Function Syntax - Group Review

function login(){
    return true;
}

Function Syntax - Group Review

login();

Solo Exercises

Function Syntax - Solo Exercises

function getSquare(numberToSquare){
    var squaredNumber = numberToSquare * numberToSquare;
    return squaredNumber;
}

Function Syntax - Solo Exercises

function getSquare(numberToSquare){
    var squaredNumber = numberToSquare * numberToSquare;
    return squaredNumber;
}

Function Syntax - Solo Exercises

function getSquare(numberToSquare){
    var squaredNumber = numberToSquare * numberToSquare;
    return squaredNumber;
}

Function Syntax - Solo Exercises

function getSquare(numberToSquare){
    var squaredNumber = numberToSquare * numberToSquare;
    return squaredNumber;
}

Function Syntax - Solo Exercises

var squaredNumber = getSquare(10);

Function Syntax - Solo Exercises

var squaredNumber = getSquare(10);

Function Syntax - Solo Exercises

var squaredNumber = getSquare(10);

Function Syntax - Solo Exercises

function getSquare(numberToSquare){
    var squaredNumber = numberToSquare * numberToSquare;
    return squaredNumber;
}

Function Syntax - Solo Exercises

function getSquare(numberToSquare){
    var squaredNumber = numberToSquare * numberToSquare;
    return squaredNumber;
}

Questions?

One Last Thing...

• Sometimes you will see functions declared this way
• All of the elements are the same
• There is a difference, but don't worry about it just yet

var multipleByTwo = function(inputNumber){
    var product = inputNumber * 2;
    return product;
}

var output = multipleByTwo(2);

Next Steps

• Rewrite some of the expressions from earlier lessons as functions
• Start by wrapping expressions in functions as-is, no parameters
• Try adding parameters in when you're comfortable

Thank You!

www.kylecoberly.com